Header image on top of eachother?

Get Started
1

I am stumped and I know its the simplest thing I am missing.

As you can see here.

http://wolphewebdesign.com/Clients/Brandon/

The header images on the right look like they are under the left images.

If anyone can point out what I am missing I would appreciate it.

HTML

<body>
<center>
<div id="container">
<div id="head1"></div>
<div id="head2"></div>
<div id="head3"></div>
<div id="head4"></div>


</div><!--Closes container-->
</center>

</body>

CSS

body {
	background:url(images/bg.jpg);
	}

#container {
	width:1020px;
	
	}

#head1 {
	background-image:url(images/head1.png);
	height: 86px;
	width: 512px;
	float: left;
	}
	
#head2 {
	background-image:url(images/head2.png);
	height:86px;
	width:538px;
	
	}
	
#head3 {
	background-image:url(images/head3.png);
	width:512px;
	height:54px;
	float: left;
	}
	
#head4 {
	background-image:url(images/head4.png);
	width:538px;
	height:54px;
	}
2

Even if you floated #head2 and #head4 to the right, the layout would still be broken, because their combined width exceeds the contaner width.

Really, though, there’s no reason to have those images split up. Make them one image.

Better still, detach the text from the background image and have one large background and place the text on top. You can still use image replacement techniques to keep the fancy fonts and styling, but text should not be provided via an image alone.

3

Looks you just fixed it :slight_smile:

Anyway, please don’t use <center>. It’s deprecated.


#container {
  width: 1050px; /* not 1020px ;) */
  margin: 0 auto;
}
4

I made image bigger but its still messed up

5

LOL, you aren’t listening. If you are just going to use images, just use one great big one. Don’t call it a website, though. As the wise ancients used to say, “An image maketh not a website”.