- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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,
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
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.
Thank you, that did the trick!