Header Not Aligning

D12Eminem989 · August 21, 2009

Hello, I have a problem with my header not aligning correctly, I have 2 images in the header for the right and left side and a middle background that repeats with a header logo and ads on the right of the logo.

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="hdr">
<div id="body">
    	<div id="hdrbl"></div>
        	<div id="hdrbm">
            <div id="hlogo">My logo here</div>
            <div id="hads">Google ads here</div>
</div>
    <div id="hdrbr"></div>
</div>
</div>
</body>
</html>

Here is my CSS:

body {
background: #012853;
color: #C1C1C1;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin: 10px 10px 10px 10px;
padding: 0px;
}
.hdr #body { /* Overall body for the header */
padding: 0;
height: 104px;
}
.hdr #hdrbl { /* Header left image */
background-image: url(images/style/img_01.gif);
width: 82px;
height: 104px;
float: left;
}
.hdr #hdrbm { /* Header middle background */
background-image:url(images/style/img_03.gif);
background-repeat: repeat;
height: 104px;
width: auto;
float: none;
}
.hdr #hdrbr { /* Header right image */
background-image:url(images/style/img_02.gif);
width: 86px;
height: 104px;
float: right;
}
.hdr #hlogo { /* Header logo */
padding: 0;
height: 104px;
}
.hdr #hads { /* Header right ads */
float: right;
padding-right: inherit;
}

haku · August 21, 2009

I think your problem is caused because of.....

oh wait. You didn't even tell us what your problem was.

D12Eminem989 · August 21, 2009

The problem is the whole right side isnt aligning. Look here:

http://dev.bbhosting.org/

haku · August 21, 2009

Hows it supposed to look?

D12Eminem989 · August 21, 2009

It's supposed look like this:

http://i27.tinypic.com/rviofm.jpg

Cetanu · August 21, 2009

Try:


.hdr #hdrbl { /* Header left image */
background-image: url(images/style/img_01.gif);
width: 82px;
height: 104px;
float: left;
}
.hdr #hdrbm { /* Header middle background */
background-image:url(images/style/img_03.gif);
background-repeat: repeat;
height: 104px;
width: auto;
float: left;
}
.hdr #hdrbr { /* Header right image */
background-image:url(images/style/img_02.gif);
width: 86px;
height: 104px;
float: left;
}

I changed them all to float left...think of it like they're stacking next to each other.

Might work.

Oh, and for good measure, right after the header is defined in the html you may want to use something like

.clear{

clear: both;

}

or <div style="clear: both;"></div>

That will stop them from shifting.

haku · August 21, 2009

Change your HTML to this:

<div id="header_background">
  <div id="header_right"></div>
  <div id="header_left"></div>
</div>

Then you can set your CSS like this:

#header_background
{
  background: // set your repeating background here
  width: 100%;
  height: // set the height of the background image here
}
#header_left
{
  float:left;
  width: // set the left end width here
  height: //set the same height as above
}
#header_right
{
  float:right;
  width: //set the right end width here
  height: // set the same height as above
}

Sign In

Header Not Aligning

Recommended Posts

D12Eminem989

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

D12Eminem989

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

D12Eminem989

Link to comment

Share on other sites

Cetanu

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information