Hi there,

 

I'm not amazing with CSS (learning!) and have run into a bit of a problem. Two actually.

 

1) I can't get the header and site content divs to stick together. There always seems to be this gap between them:

 

 

2) The menu images are really messed up due to dodgy CSS. I can't figure out how to get it to display in a list. CSS is as below:

 

#navbar li {
		display:inline;
		border:1px solid green;
		height:30px;
	}
		.navbar-home {
			list-style-image:url(../img/home.gif);
			height:30px;
			text-indent:-999px;
		}
		.navbar-about-us {
			list-style-image:url(../img/about-us.gif);
			height:30px;
			text-indent:-999px;
		}
		.navbar-portfolio {
			list-style-image:url(../img/portfolio.gif);
			height:30px;
			text-indent:-999px;
		}
		.navbar-the-team {
			list-style-image:url(../img/the-team.gif);
			height:30px;
			text-indent:-999px;
		}
		.navbar-tutorials {
			list-style-image:url(../img/tutorials.gif);
			height:30px;
			text-indent:-999px;
		}

 

Any CSS gurus want to give a newbie a hand?

 

Thanks!

 

-Cloudy

would it be possible to see all the html and css where you are having issues?

 

or a link where it is possible t grab it from?

Sure!

 

HTML:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-GB" />
<meta name="author" content="El Interneto" />
<meta name="resource-type" content="document" />	
<meta name="robots" content="index, follow, archive" />
<meta name="googlebot" content="archive" />
<meta name="description" content="Ooh content!" />
<meta name="keywords" content="I,like,keywords" />

<link rel="stylesheet" type="text/css" media="screen" href="css/index.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/accessibility.css" />
</head>

<body>
<div id="pagewrapper">

<div id="header">
	<a href="/" title="Testing"><h1 id="maintitle">Test</h1></a>

	<ul id="navbar">
		<li class="navbar-home">Home</li>
		<li class="navbar-about-us">About Us</li>
		<li class="navbar-portfolio">Portfolio</li>
		<li class="navbar-the-team">The Team</li>
		<li class="navbar-tutorials">Tutorials</li>
	</ul>
</div>

<div id="content">
  <p> </p>
  <p>kuk</p>
     <p>fef</p>
     <p> </p>
     <p>n</p>
 </div>

<div id="footer">
<a href="http://www.facebook.com/"><img src="img/facebook-icon.gif" alt="Find us on Facebook" /></a></div>
</div>
</body>
</html>

 

CSS:

 

#pagewrapper {
width:750px;
margin:0 auto;

}
#header {
width:750px;
height:79px;
background:url(../img/header-bg.png) no-repeat #fff;
}
#maintitle {
	text-indent:-999px;
	background:url(../img/logo.gif) no-repeat;
	height:34px;
	width:322px;
	float:left;
	margin:0 0 0 10px;
}
#navbar.ul {
	float:right;
	height:30px;
}
	#navbar li {
		display:inline;
		border:1px solid green;
		height:30px;
	}
		.navbar-home {
			background:url(../img/home.gif);
			height:30px;
			text-indent:-999px;
		}
		.navbar-about-us {
			list-style-image:url(../img/about-us.gif);
			height:30px;
			text-indent:-999px;
		}
		.navbar-portfolio {
			list-style-image:url(../img/portfolio.gif);
			height:30px;
			text-indent:-999px;
		}
		.navbar-the-team {
			list-style-image:url(../img/the-team.gif);
			height:30px;
			text-indent:-999px;
		}
		.navbar-tutorials {
			list-style-image:url(../img/tutorials.gif);
			height:30px;
			text-indent:-999px;
		}
#content {
width:742px;
background-color:#ccc;
min-height:250px;
height::auto;
overflow:visible;
background:url(../img/content-bg.gif) top center no-repeat;
border-left:4px solid #000;
border-right:4px solid #000;
}

#footer {
float:right;
height:15px;
width:740px;
text-align:right;
padding:5px;
background-color:#000;
}
#footer img {
	border:0px;
}

 

Thanks for the help so far!

 

-Cloudy

hmm i think to understand better im going to need a link to the actual site and how its dispalying, as i dont know which image is what from what u posted in your first post, or the dimensions of the images and whether they fit the DIVs

 

e.g. i can see a "contact us" image on the first image u posted but i cant see the "navbar" style for it?

 

sorry to be a pain

Sorry, I should have thought to give a fuller view! I've attached the file below, ignore the weirdly placed navbar, it's because I haven't got the logo designed yet!

 

 

 

 

Thanks for being so patient!

 

-Cloudy

hmmm its pretty confusing indeed.

 

what is the name of the image that has all the red lines on?

 

u cud try make every background a random color (each one diff) so u can see whats reaching where and where things are starting and stopping

 

for e.g. make header background green, maintitle blue, navbar orange and so on

That makes me feel a bit better, I feel like I'm being a complete idiot with this!

 

The red striped image is called header-bg.png, the coloured backgrounds appear as follows:

 

 

 

So it should really be working...

what happens if u take the "height: 79px" out of the header?

Or.. if u leave it, does it match the height of "header-bg.png", "logo.gif", and all the NAV gifs together?

In your image above, is everything posistioned in order, as you expect (regardless of the fap problem)? or should things be showing elsewhere?

 

 

The below needs a width defining as it as the float element in it.

#navbar.ul {
               float:right;
               height:30px;
       }

 

also in the below you have 2 ":" in "height"

#content {
       width:742px;
       background-color:#ccc;
       min-height:250px;
       height::auto;

Hey,

 

Taking the height:79px; out of the CSS means that the header disappears and the content box and top bar are pulled close together. Leaving it in does mean that the heights are equal!

 

Thanks for bringing those mistakes to my attention, I've corrected them and added a "width:auto;" to the float.

 

And yes, everything is showing itself in the correct position which is somewhat encouraging!

 

Do you think grouping the header image and the content box in one div may solve the issue?

 

-Cloudy

i think it maybe your images causing the spacing. would it be possible to send the images you use to me so i can replicate your site? email is anthwinter@hotmail.com

 

or is your site hosted anywhere i can look?

 

ive just created your site without the images and everything fits and joins OK, which is why i think the images maybe pushing them over.

 

on your divs you can put overflow:hidden; to test if its the images at cause

try removing all those paragraph tags <p> and see what happens...

Hmm it fits together perfectly when I remove all the <p>s.

 

Anth Winter, I'll PM you the site details!