PDA

View Full Version : full width header



ttttt
02-17-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_
02-17-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
02-17-2007, 05:58 PM
well getting it full width and right up against the top.
Thanks for the quick reply,

_Aerospace_Eng_
02-17-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
02-17-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
02-17-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
02-17-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
02-18-2007, 06:12 PM
Thanks, but the div doesn't hug the top of the window. The site is http://versa-soft.com .

Excavator
02-18-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
02-18-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
02-19-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
02-19-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
02-19-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
02-19-2007, 07:12 PM
Sorry rmedek, I'll know better next time.

neomaximus2k
02-19-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
02-19-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. :)