PDA

View Full Version : full width header



ttttt
Feb 17th, 2007, 05:50 PM
Hi,
I've been trying for a while to make a cross browser header the full width of the page that hugs the top. I have and example of what I'm trying to achieve: http://www.nhs.uk/
Thanks,

_Aerospace_Eng_
Feb 17th, 2007, 05:55 PM
Okay so what is your question? What are you having trouble with? All they did was use a background image and made it repeat in the x direction.

ttttt
Feb 17th, 2007, 05:58 PM
well getting it full width and right up against the top.
Thanks for the quick reply,

_Aerospace_Eng_
Feb 17th, 2007, 06:00 PM
Okay so what code are you using? Got a link to your current page? We aren't psychic you know.

croatiankid
Feb 17th, 2007, 06:03 PM
Get it to the top: take padding/margin off the BODY.
Full width: put a 1 pixel wide image gradient (light-dark blue) as the background of a DIV (div's are 100% wide by default), and repeat-x.

ttttt
Feb 17th, 2007, 06:07 PM
Get it to the top: take padding/margin off the BODY.
Full width: put a 1 pixel wide image gradient (light-dark blue) as the background of a DIV (div's are 100% wide by default), and repeat-x.
erm... how exactly do I do that with my style sheet?

croatiankid
Feb 17th, 2007, 06:12 PM
body{margin:0;padding:0;}
/* corresponding to <div id="header"> */
#header {background: url(gradient.png) repeat-x;}
You can't create gradients with stylesheets, but you can with most moderately good image creating programs

ttttt
Feb 18th, 2007, 06:12 PM
Thanks, but the div doesn't hug the top of the window. The site is http://versa-soft.com .

Excavator
Feb 18th, 2007, 06:23 PM
You left the default margin on the h1.
When you did this:
body,div.header {
margin:0;
padding:0;
}
It only set margin/padding for body and #header.

Do this instead:
body {
width: 100%;
}
* {
margin:0;
padding:0;
}
.header {
height:100px;
background: url(http://versa-soft.com/images/header.png) repeat-x;
}


The * is a wildcard that covers everything.

rmedek
Feb 18th, 2007, 06:26 PM
The very first element used (h1) has margins, so it pushes the div down. Weird, I know, but that's how it works. In these cases, you can remove the margins in the heading and try padding instead, or add padding to the div.header.

ttttt
Feb 19th, 2007, 06:32 PM
Thanks, that works now!
But I have another question regarding the same site(http://versa-soft.com/), so I didn't think there was much point making another thread.
Well, the right column doesn't line up with the top of the middle column. I made border around the divs in question so it is easy to see where they begin and end. Any help would be appreciated.
Thanks,

Excavator
Feb 19th, 2007, 07:08 PM
Place your floats first in the markup:

<body>
<div class="container">
<div class="header">
<h1 class="header"><img src="images/vs.png" width="35" height="35" alt="" />Versa-Soft</h1>
</div>
<div class="body">
<div class="left">
<div class="menu">
<h3 class="menu">Navigation</h3>
<ul class="navigation">
<li class="navigation"><a class="navigation" href="http://versa-soft.com">Home</a></li><br/><li class="navigation"><a class="navigation" href="http://versa-soft.com/forum">Forum</a></li><br/><li class="navigation"><a class="navigation" href="http://versa-soft.com/downloads">Downloads</a></li><br/><li class="navigation"><a class="navigation" href="http://versa-soft.com/products">Products</a></li><br/><li class="navigation"><a class="navigation" href="http://versa-soft.com/support">Support</a></li><br/><li class="navigation"><a class="navigation" href="http://versa-soft.com/development">Development</a></li><br/><li class="navigation"><a class="navigation" href="http://versa-soft.com/contact.php">Contact Us</a></li><br/><li class="navigation"><a class="navigation" href="http://versa-soft.com/about">About</a></li><br/> </ul>
</div>
</div>
<div class="right">
<p class="right">right column</p>
</div>
<div class="center">
<h2 class="title">Under Construction</h2>

</div>

<div class="clear">
</div>
<div class="footer">
<h5 class="copyright">&copy; 2007 Versa-Soft</h5>
</div>

</div>

</div>
</body>

rmedek
Feb 19th, 2007, 07:09 PM
Start another thread. I realize it's the same site, but having the actual problems organized helps the forum searches. Thanks…

Well, never mind.

Excavator
Feb 19th, 2007, 07:12 PM
Sorry rmedek, I'll know better next time.

neomaximus2k
Feb 19th, 2007, 07:12 PM
Thanks, that works now!
But I have another question regarding the same site(http://versa-soft.com/), so I didn't think there was much point making another thread.
Well, the right column doesn't line up with the top of the middle column. I made border around the divs in question so it is easy to see where they begin and end. Any help would be appreciated.
Thanks,

Well because I am in a very good mood I'll tell you the code and i'll even make it so your main content is shown in the code first so it will help your Search Engine Ranking.



<style type="text/css">

#contentwrapper{
float: left;
width: 100%;
}

#thecontent{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftnavigation{
float: left;
width: 230px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}

#rightnavigation{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left margin to -(RightColumnWidth)*/
background: #FDE95E;
}

</style>
<div id="contentwrapper">
<div id="thecontent">
Your content goes here for the bulk of the page
</div>
</div>

<div id="leftnavigation">
Your content goes here for left Navigation
</div>

<div id="rightnavigation">
Your content goes here for Right Navigation
</div>



have fun!

rmedek
Feb 19th, 2007, 08:09 PM
Sorry rmedek, I'll know better next time.

Ah, don't sweat it…it's no particular rule, I just find it tends to help out so it's a personal preference. :)