… and on to the CSS. Follow along with:
First thing in every screen.css I write is a reset. Nulling the margins and padding on various elements, and stripping the border off a images and fieldsets. There are bigger/fatter resets out there, but I’ve never needed more than this… there are smaller ones, but they tend to screw up form elements. This is a nice happy middle ground.
hr - As mentioned before, bye-bye for people who can use the screen.css
html, body - The height:100% allows our #pageWrapper to have a percentage height declared on it, or even a min-height. % heights on elements are auto-transformed into “auto” if the parent element doesn’t have a height on it. The position:relative is just to make opera ‘behave’ when it comes to the use of min-height.
body - the comment on the text align says it all. IE 5.x is permanantly ‘stuck’ in quirks mode. Adding this one line and simply avoiding declaring width the same time as padding/border anywhere in the stylesheet instantly makes IE6 compatible page work JUST FINE all the way back to IE5.5 and possibly 5.2 (though I don’t test for 5.2).
The font size is declared in %/em so that large font/120dpi users, Win7 125%/150%/larger users, and some handhelds that obey ‘screen’ (72 or 75dpi) all get fonts that scale up or down AUTOMATICALLY for the user - saving them the hassle of diving for the zoom. For content (your paragraphs) this is the preferred font sizing method as recommended by the WCAG. At the VERY least if you find % confusing use pt, at least pt obeys the ‘system metric’ (how large the OS says fonts should be) in most browsers. The only time to use px for font sizes is when an image interaction is going to cause layout issues - font gets bigger when the image does not - it blows out of the image. This is why behind our gilder-levin image replacements we WILL be using px metric fonts, but for all the paragraphs we’ll use %/em.
You were designing to 11px which is even worse. From an accessibility standpoint 12px should be considered minimum, and really anything less than 14px makes me twitchy.
The 85% works out to 14px at 96dpi, and 17px for large font/120dpi users… the ‘perfect’ size according to many accessibility studies.
You might want to have a look at a page I wrote that compares all the different font size declarations.
… which also shows how px doesn’t auto-enlarge for LF/120 users, while pt and %/em do (in most cases - webkit doesn’t obey the system metric, FF doesn’t default to the larger size though you CAN manually set it).
Pretty much, the WCAG says use %/em - when the W3C makes a recommendation on how to make a page, might help to listen.
From there it’s just the background-color and the background-image.
Oh, you’ll notice I used a lot of .png - none of them use alpha transparency (the type of .png that doesn’t work in legacy IE) and have had their gamma correction lines stripped with tweakpng.exe
For the types of images you had .png results in some real savings without significant image degradation. You had some NASTY artifacting on your menus that I fought hard to get rid of.
#footer - these two share the same width and centering, so I declared them together.
#pageWrapper - The parts unique to the pagewrapper. I set overflow:hidden so it will wrap floats, and set up the background-color and font color. The min-height:100% will make it auto-expand to the full screen height if the content is shorter than the screen. Later on we’ll ride the footer up OVER #pageWrapper so that on tall screens with short content there are no scrollbars, but the footer is always at the bottom. I put our faux-column image here since it’s the only element that will stretch to the full height. This means we’ll need some trickery to ‘erase’ it in a couple spots later on.
* html #pageWrapper - IE6/earlier has no min-height, but will incorrectly treat height as such if overflow is set to visible. We use the “* html” hack to hide this from other browsers as an invalid target (since there should be no parent to html). The overflow:visible state undoes our float wrapping, but the height declaration trips ‘haslayout’ for IE, which just so happens to wrap floats.
h1 - The position:relative is so we can position our span in relation to the h1. I’m using zoom:1 as a haslayout trigger so that in IE the span positioning actually works right. The padding centers our text in the total area of the heading logo, and from there it’s fonts and colors. The 227px of top/bottom padding plus the 48px line-height == 275px, same as our re-mastered Logo image - the min-height made padding it down from the top difficult without adding more DIV - so I incorporated the gradient and spacing into the logo image instead.
h1 span - and this is gilder-levin - or at least my take on it. FF 3.6 and opera 9 both introduced problems with the putting the span first and allowing aboslute positioning to just ‘go where it should’ so I put the span after the text in the markup, and declare “top” and “left” removing that problem. Basically we absolute position the span over our text, and apply the banner as the background of the span erasing the text for screen.css users who have images turned on.
#mainMenu - since I’m going to float the anchors, we first set up some float wrapping behaviors. We toss the same margin on it to push it away from the faux-column background, and set up a background-color and the font. The text-align SHOULD inherit from body so we shouldn’t have to say it again, but for some reason IE6 ignores it. (That reason being IE6 is dumb as fried ****)
#mainMenu li - setting display:inline on the LI basically makes all the browsers pretend the LI don’t even exist. Since you don’t have any dropdown menus, this is the fastes/cleanest way to deal with them.
#mainMenu a - position:relative is for absolute positioning the nested spans. I float them so they have block-type behavior while all sitting on the same line, and the overflow:hidden chops off bits of our span we don’t want to see - we’ll get to that in a sec. Again, I avoid declaring a height on them, and instead use the 24px top/bottom padding added to our 18px line-height to total our 42px image height.
#mainMenu a span - the nested spans get positioned just like our h1 span did, but you’ll notice I sized them the TOTAL size of our mainMenu.png. The overflow:hidden will hide the unwanted bits, letting us just slide the background OR the span around to make our hover states and to show each ‘section’ of buttons. Oh, I also tweaked the spacing on that menu a bit as they weren’t evenly spaced.
#mainMenu a:hover - just set a background-color change for people browsing with images disabled.
#mainMenu a:active span,
#mainMenu a:focus span,
#mainMenu a:hover span - sliding the span up reveals it’s bottom half - our hover states.
#mainMenu .buttonClass a - how wide each button is.
#mainMenu .buttonClass span - the upper left corner on the image of each button. We just slide the background-image over to show each button.
#columnWrapper - the holly hack (height:1% is typically used as a haslayout trigger - basically an IE specific bugfix. In this case it fixes the min-height footer positioning when resizing the screen in IE7… AND Opera. Damned if I know why it fixes Opera - but it works. Margin is again just to ‘push off’ that faux column’s side bits, and finally a text-align to undo the text-align:center we set way back on body for IE5.
#contentWrapper - the method I use for making columns is a bit complex and involves some trickery. First, we make the outer wrapper on the main column float to one side at 100% width. At 100% wide that leaves 0px free for a column to fit. The bottom padding is to make sure the footer cannot ride up over Content.
Content - we set a large left padding to make room VISUALLY for the side column. This has no effect on actually PLACING that side column though… I also set up some padding for the content and by using one less px on the left and one extra px on the right for the margins, we can use border-top instead of padding-top to erase that top bit of the fuaxColumns.png
#sideBar - and here’s that trickery. We float it the same direction, set it’s width, and then apply a NEGATIVE margin the same direction. Negative margins reduce the width of an element as used when calculating it’s positioning (but not how large it renders). In this case by doing width:228px margin-right:-228px we’ve made it 0px wide so far as positioning is concerned. 0 can fit next to that 100% on #contentWrapper.
I wrote a page that explains that in more detail.
On sidebar you can also see a bottom padding - same reason as #contentWrapper, to make sure that when we ride #footer up over #pageContent, the text in #sideBar doesn’t get hidden behind it.
#sideBar h2 - these share a lot in common, so style them together. The left padding makes room for that bullet image, the bottom margin is just to make the formatting pretty, fonts and colors are nothing too fancy though the image interaction means we should use px fonts (boo!) so it doesn’t break cross browser. Finally we just position that bullet image as a background.
Content h3 - just fonts and padding. Nothing fancy.
Content p - I use a EM bottom padding instead of margin because padding is more predictable (no collapse issues) and EM will enlarge with the 85% font we declared on body.
#sideBar p - these all share the same margins, so set them together.
#sideBar .news h3 - The date. I use some trickery here to add that striped background. First, we set the font size/style and that background stripe.
#sideBar .news h3 span - setting this to inline-block makes it scale to the same size as the parent h3… a little right padding and a white background color erases that stripe behind this element. This way as the date changes width you don’t have to sweat using a different image or worry about the image riding down under it.
#sideBar .newsItem - a little extra indent.
#sideBar .newsItem h4 - strip the bottom margin, just make it bold and the same size as the paragraph that follows.
#sideBar .moreInfo - I aligned it right so it wouldn’t be mistaken for part of the content.
#footerWrapper - the position:relative makes certain it will depth sort OVER #pageWrapper hiding the bottom of it. Set the height, and a negative top margin reduces it to zero height for flow, but it will render full height over the element before it.
#footer - we already set it’s width up top, so we just set some top padding to push the text down. I apply the bottom of the content area image as the background here, and give it a hint of height so that the whole image will render. We don’t want that height plus padding taller than 90px, so I used 64 as a nice safe value.
#footer a and psuedosates - just your links color and behaviors.
… and that’s it for the CSS.
I know I probably left you with more questions than answers, but hopefully you’ll be able to come away from this with a bit more CSS knowledge than you had at the start.
Hope this helps.