Header image on top of eachother???

**laflair13** · May 4, 2011 16:40

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

As you can see here.

Code:

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

Code:

<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

Code:

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;
	}

**ralph.m** · May 4, 2011 16:49

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.

**ScallioXTX** · May 4, 2011 16:49

Looks you just fixed it

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

Code css:

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

**laflair13** · May 4, 2011 17:31

I made image bigger but its still messed up

**ralph.m** · May 4, 2011 17:40

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".

User Tag List

Thread: Header image on top of eachother???

Thread Tools

Display

Header image on top of eachother???

Bookmarks

Bookmarks

Posting Permissions