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, 06: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, 06:58 PM

well getting it full width and right up against the top.
Thanks for the quick reply,

_Aerospace_Eng_

Feb 17th, 2007, 07: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, 07: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, 07: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, 07: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, 07: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, 07: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.

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, 07: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,

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, 08:12 PM

Sorry rmedek, I'll know better next time.

neomaximus2k

Feb 19th, 2007, 08: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.