Forums

mevaser

Hi, I am working on this website, and I need the header of the website to be full width. I have tried for a while, but nothing seems to work for me. Any eyes? The slider needs to be lowered, so it does not get cut off. Like http://www.ge.com/

My website is: http://bit.ly/L6r1tu

Thanks,

Michael_bonds

You have a div with the id of header1 which has width: 100%;

You have another div within that one that has an id of just header which has width: 960px;

Maybe that fixed width is your problem?

-Mike

Odd_E

Like stated above, use a wrapping div.



<div id="header-wrap">
	 <div id="header">
            Your Header Content
	 </div>	
</div>

yinzdo

Solution


#header1 {
	 z-index: 11;
}

Explanation
There is a wrapper #header1, and it is stretching the full 100% width with a white background as intended. The problem is that ul.slides has a z-index of 10, which means it (and the giant image inside) renders on top of #header1 but below #header.

The reason the inner #header is not covered up is because you assigned it a z-index of 11, which is greater than the z-index of 10 for ul.slides. Therefore the stack order in which these elements are rendered goes from top to bottom as follows:

#header with z-index: 11
ul.slides with z-index: 10
#header1 with no z-index (defaults to auto)

The band-aid fix is to give #header1 a z-index greater than 10 in order to have it render above ul.slides. In general, though, I would clean up all those z-index declarations if possible. It can make things real messy real quick.

mevaser

Thank you, that did the trick!

treehouse : what would you like to learn today?

Forums

header not full width (it must) Please