PDA

View Full Version : Header won't go all the way across

moon_dance
11-11-2006, 02:29 PM
I'm trying to use a CSS layout from the Layout Resevoir (http://www.bluerobot.com/web/layouts/) at bluerobot.com (http://www.blurobot.com) but there is one inconsistency between mine and the layout there: my header won't go all the way across the page like it is in both the 2 column layouts and the layout of bluerobot.com (http://www.blurobot.com) itself. I've tried to put in width:100%; but that didn't work. Any Ideas on how to achieve this? :help:

I just realized it might be easier to help if you had my code, so here it is:

<html>
<head>
<title>Two Column CSS Layout with Header</title>
<style type="text/css">

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
width: 100%;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:33px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color:black;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color:#eee;

}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
border: solid #000000 1px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 15px;
border: solid #000000 1px;
}
</style>
</head>

<body>

<div id="header" style="width: 604px; height: 100px">
Header :)</div>

<div id="left" style="position: absolute; left: 16px; top: 159px; height: 160px">

<b>Menu</b>
<p>Link</p>
<p>Link</p>
<p>Link</p>
<p>Link</p>


</div>


<div id="center">
<b>Content</b>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>

</body>
</html>
moon_dance
11-11-2006, 04:19 PM
I did a little bit of research, so at least I think I know the correct terminology for my question now: How do I make my header fluid like my content? (i.e. how do I make it so that my header is filling 100% of the window the whole time no matter what size it is?)

I'm sorry these aren't all in one post, but I am having problems finding the edit button...
Marta
11-11-2006, 04:47 PM
<div id="header" style="width: 604px; height: 100px">
Header :)</div>



Instead of specifying the width in pixels, you can specify it in percents. So 100% would make it take up the entire width no matter how big your page is.


Hope that helps! :D
J to the izzosh
11-11-2006, 05:37 PM
Marta's pointed out the basic problem: you have your header div defined as just 604 pixels in its style attribute. Style attributes, or inline styles, will overrule any other styles applied to that element: because they are the most specific rules, they win out in CSS's cascade. You should remove the inline style if you wish to control its properties from your style sheet.

If you want a block-level element like a div to fill the width of its parent (i.e., container) element, then you don't need to specify a width at all. The default value for block-level widths is "auto", which basically translates to "fit to width". Alternatively, you can specify a width of "auto".

One thing that you should do is start including a document type declaration (http://www.w3schools.com/tags/tag_doctype.asp) in your source. Without one, IE will remain in quirks mode in which it has a poor presentation of the CSS box model (http://www.w3.org/TR/2004/CR-CSS21-20040225/box.html). Specifically, it uses the specified width and height of an element as its total dimensions, including padding borders, etc. What it should be, and what it is in other major browsers, is that the specified width and height are the dimensions of the content only: padding, borders, and margins should be additional to those dimensions. Including a proper doctype, even HTML 4.01 transitional, will remedy this inconsistency by forcing IE out of quirks mode.
moon_dance
11-23-2006, 11:05 PM
Thank you so much! The header fluidity problem has been fixed! I have another problem however; when I type text bigger than a certain size on the header the bottom of the text is cut off. Also, I want the text to be at the very bottom of the header, and it is in the middle (vertically). :confused: Any Ideas on how to fix these problems?

here is my code now:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Two Column CSS Layout with Header</title>
<style type="text/css">

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
width: 100%;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:33px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color:black;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color: #ffb954;

}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
border: solid #000000 1px;
}
#center {
top: 0;
height:100px;
margin-left: 230px;
margin-right: 15px;
border: solid #000000 1px;
overflow:auto;
}
</style>
</head>

<body>

<div id="header">
<font face="Inkpen2 Script" color="#CC6600" size="5">HEADER</font></div>

<div id="left" style="position: absolute; left: 15px; top: 112px">

<b>Menu</b>
<p>Link</p>
<p>Link</p>
<p>Link</p>
<p>Link</p>


</div>


<div id="center">
<b>Content</b>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<p>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<p>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah <p>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>

</body>
</html>

Oh yeah, and I am confused on what exactly to do with that document type declaration... could you explain it to me?