As of recently been getting stuck into html/css so bear with me. Bought quite a few books here on SP and spend a few weeks studying and now finally getting stuck into things so to speak.
I run a decent sized gaming community at theoldergamers.com and so far have always been outsourcing my design to paid designers. I want to do things myself a bit more now and I thought that reverse engineering (building it in plain html/css) my site would be a good way to understand what is going on. At the same time I’m also wanting to make some changes and have hit my first CSS issue where I just can’t get something to work.
What I am trying to achieve is to wider my top banner to be full width in a browser but have the “content/images” to remain centered but when resizing the browser window I want both left/right side of the browser to close in to the central image rather then have the image slide to the left.
A good example of this can be seen at: au.ign.com where the ign logo stays central even when resizing.
I tried floats, absolute positioning, I tried so many things I kinda lost track now so any tips on how to achieve this would be appreciated.
The only problem I notice is that on text resize (not zoom) will result in the items breaking to the next line. If the width were defined in ems the page would have stretched to accommodate.
There are a couple of places where things could be reduced but probably not really worth the effort. I’d use a different method for hiding the text in the h1 rather than text-indent (google glider/levin image replacement).
I managed to get the logo to move now using the auto margin, it’s currently centering which I assume will fix itself if I can get the sponsor logos to move to the rhs.
Problem is that they are dropping below the logo.
Both log and sponsor div have a margin: 0 auto; applied.
So why aren’t they on the same line, I could understand it if the width is too small but the wrapper has a width of 100% applied to it so when I max my browser window I would expect them to line up.
If you want the inner content of the header centred then place it in an inner element with a width and use auto margins. That’s what the other site is doing.
.inner{width:1060px;margin:auto}
Then add that inner element inside the header to hold the inner content.
On another matter you can’t use a height for your wrapper as that would be very bad as content should dictate the height because you never know how much content you will have. Also you can’t add padding to 100% wide element which is why you have a horizontal scrollbar. Remove the padding or remove the width.
Basically I created that inner-nav, then floated the menu items to the left within it to make sure they are central to the page but bordering proper left on the nav.
I also found that I need to clear the float otherwise it kept trying to squeeze against the other floating elements on top.
One point of confusion though as I now have both an inner-header and inner-nav.
I understand that floats are removed from document flow, when I don’t clear the inner-nav ul selector and only float it it attaches itself to the rhs of the inner-header element.
I understand that multiple left floated elements would behave like this and all go on the same horizontal line if space allows them to fit.
But the #nav ul is floating within #inner-nav, both innner-header and inner-nav have a width of 1004px so how can the nav ul still get moved to the right of the inner-header if I make my browser wide enough? I would not expect this to be possible given the width of each element?
Finally got there, I removed the “nav” all together and created an inner nav for both main and primary, was ending up with more Divs then I needed (I think).
But if you have a minute to have a quick look at the end result:
Your #inner-nav and #inner-header are holding only floated children and therefore have no height because they don’t contain their floated children.
Therefore the floats will rise up alongside other floats and ignore the parent because it has no height.
You need to clear the floats and clear each block. #inner-nav,#inner-header { clear:both;/* clear floats above */ overflow:hidden;/* clear floated children*/
}
I managed to get it working but still a few questions.
I have setup a wrapper, I would think that if I want to go full screen I would have to set it’s width to 100%?
This doesn’t seem to have any affect/benefit though, why/why not?
A static element is width:auto by default which means it will be as wide as it’s parent container and that effectively means it will stretch the full 100% width by default. Adding 100% width to it will make no change unless the element had padding or borders and then it would be too big.
However, if the element is a wrapper and holds more than simple content then IE6 and IE7 would like that element to have haslayout and the easiest way to do this would be with a dimension such as width:100%.
I gave you the answer above. Just use an inner element to hold the header content at the width needed (which looked to be about 1060px but you can tweak that to suit).
Then just float the header and sponsor elements as before but inside the inner element.
It also looks as though you are trying to make the anchor inside the logo bigger than the parent! The parent id 496px but you want the nested anchor at 507px. How is that going to fit?
