… and to breakdown the CSS. Mine is sufficiently different from the original (a single 6k “for screen only” vs. 41k in five files without media types) there’s no common ground to even compare them, so I’ll just explain what I did.
I always start out with a reset – there are smaller resets and larger resets; the smaller ones tend to break form elements, the larger ones have NOTHING to do with actually resetting anything and are more CSS frameworks than anything else. The POINT of a reset is to set up the elements different browsers display different default behaviors on – and that’s IT. That means margin and padding on a handful of block-level elements, border on TWO elements, and that’s IT!
Next I hide those horizontal rules – again those are only in the code for people who won’t see screen/tv/projection CSS.
body - I just use text-align to center #pagewrapper in legacy IE which only have “quirks mode”. I set up the default font size I want across the entire page, which is a nice simple 85% giving 14px for 96dpi users and 17px for 120dpi users. Personally, I like a nice tall line-height too. I position the background “top center” so that regardless of screen width you don’t get ‘partial’ bits of the background revealed.
#pagewrapper - width, centering, background, and set the alignment back to normal after our IE 5.x centering method. Because of the techniques used to build the rest of the page, it is possible to make the layout semi-fluid or fully-fluid here if desired.
h1 - center the text, margin the bottom to push the menu away, font, color, background. Nothign too fancy. We don’t need to state width or height as it will expand to fit what we put in it. The background-image is one of the two busts – I put them in a single file to save a handshake and to make better use of the image encoding possibilites… for the H1 we just show the top-half by setting it to “top left”.
h1 span - the outermost span gets set to display:block so it will expand in height to fit it’s content. A “holly hack” to trip haslayout fixes a scrolling issue in IE, and we just pad the sides to make sure the text will never overlap the images, and pad the top and bottom to make room. Three line-heights of 54px plus two 30px paddings equals that 222px, letting us avoid stating a fixed height which would break when combined with padding to make the text look centered…
h1 span span - on this one we just undo the padding and background we set on the outermost span. This leaves it as a normal display:block element splitting the text into three lines.
#mainMenu - killing the list-style is the norm for a menu list, and I use overflow:hidden and a fixed height to wrap floats. I like to set the font-size on the outermost container, which I used px metric fonts because of the background image interaction… thankfully few if any people will complain about 16px being ‘too small’. The tiled background-image is the same file used on the anchors – though I ALSO combined it with the hover state; more on that in a moment. I also declare a background-color so images off users aren’t stuck up the creek with invisible white on white text.
#mainMenu li – unless you are going to add dropdowns later, I try to avoid putting ANY styling on LI as cross-browser they are an unpredictable mess. Setting display:inline pretty much strips them of all formatting cross-browser letting us use the anchor for our real style.
#mainMenu a – the anchors get floated to stack without any extra gaps and to allow top/bottom padding to be applied in all browsers. Again we have the background-image for the gradient. Again I declare the background-color.
#mainMenu a:pseudos – the hover states get the color changes, but also I slide the background image up 30px to reveal it’s bottom half. Simple effect to let you use one image for all your hover states instead of using multiple images that may not even load into memory until used, leaving a “delay” on first hover. It also reduces the number of separate files speeding up the page load.
.firstFauxColumn – the two wrappers to make the fake full-height columns is pretty simple. Margin to space it away from the edges like the original, and the background image repeating on the left.
.secondFauxColumn – I set up some float wrapping, and then the other image repeating on the right.
#contentWrapper – the outer wrapper for a fluid center column content first layout. I generally use this method whether the page is fluid or not just because it’s reliable, predictable and not prone to float drop.
Content – side margins to push away from where the columns would be, padding to make it pretty. Using both lets me mix px metric column space with EM padding for content… very nice when the content gets larger.
Content h2 – just centering and fonts, nothing fancy.
#firstSideBar – a float with a negative margin equal to it’s width has zero width for figuring out it’s “positioning”, which lets it fit next to the 100% width floated #contentWRapper. The first one gets the margin on the right which puts it’s content off the right side of the page, which we can then slide left with relative positioning putting the column in place. Sounds complicated, but it’s a slick way to build a center column code-order first layout.
#secondSideBar – the second one is simpler, since doing the margin on the left will put the whole column precisely where we want it.
#firstSideBar h2,
#secondSideBar h2,
.infoSection h2 – these all share the same appearance for mine, so I declare them together. Simple padding, font, color, background. Yawn.
#firstSideBar p,
#secondSideBar p – ooh, padding. I prefer padding instead of margins since it prevents overlap issues.
.sideMenu,
.newsList – these just get list-style stripped. From here out a number of ‘like’ values are declared together for these two menu types.
.sideMenu li,
.newsList li - as before, just strip styling off them with display:inline, and let the anchors do the grunt-work.
.sideMenu a.
.newsList a – – display:block lets them accept vertical padding and puts them on their own lines, and they both lose text-decoration.
.sideMenu a padding and color, nothing fancy.
.sideMenu a:active,
.sideMenu a:focus,
.sideMenu a:hover – colors… ooh… colors.
.sideMenu .current a - just style that one indicating the current page differently. At least, I assume that’s what you were doing on the original.
.newList a - padding and margins combine not only to space them apart, but to make room for that star image applied as a background.
.newsList a:active,
.newsList a:focus,
.newsList a:hover – color, text decoration… again, no real surprises.
#firstSideBar .controls I don’t speak greek so I was kind of guessing, but I assumed this elemetn was some sort of admin login controls.
.infoSection – I use width:100% and float:left to handle the float wrapping as the popups from the accuweather thing would get cut off otherwise. padding the bottom spaces us off from the footer without worrying about margins.
.infoSection h2 – all the h2 get the same alignment, and I use border instead of padding so that the background color applied to .calendar is overwritten back to our normal background. We already set up the rest of their appearance up top.
.infoSection .subSection – floating all three of them 300px width and 10px left margin makes them fit. The display:inline prevents IE from turning that 10px margin into 20px which it has the nasty habit of doing on floats. Floats are inherently display:block and NOTHING you set for “display” can change that behavior, but for some weird reason it trips a rendering quirk in IE that makes it behave properly.
.calendar – I just set the gray background here along with our text alignment.
.calendar h3 – each of the subheadings get the same fonts and colors.
.calendar.date – except for this one, which also gets a background-image and padding on the top.
.calendar .date span – the nested span uses the narrow container method noonnope suggested earlier to break it into multiple lines. The alignment isn’t always perfect, but it’s “good enough”.
.calendar .date span b – the nested bold tag also gets a bigger font, and it’s so narrow that the narrow width multi-line break doesn’t work, but display:block fixes that.
Depending on the content for those, you MAY be better off getting rid of the SPAN and using BR instead just for reliability.
.calendar .sunriseSunset - half the width, float, margin, border. Pretty simple.
Is this the little girl I carried?
Is this the little boy at play?
I don’t remember growing older
When did they?
.calendar .moon - rather than float this one too, I just use a margin to push it over so the centering is always correct. Simple, fast, effective.
.calendar p – the parts I put in P are debatable as to whether those are really paragraphs or not, but it also gave me a separate tag to target for padding without resorting to any extra classes.
.informative – wasn’t quite certain what to even call the elements this is applied to since your page is all Greek to me.
.toolTip – the outer wrapper for the various accuweather elements. Position:relative and some z-index games let me be sure that on hover our content will show. IE will screw up the positioning without a haslayout trigger, so the holly hack is good as any allowing us to avoid declaring a fixed width or height; something that’s always a disaster when you want to use padding or border at the same time.
.toolTip img – the images basically get the same formatting as a ‘leading plate’.
.toolTip h3 – each one’s heading just gets some extra padding. I really didn’t feel the need to play with the font size on them.
.toolTip h3 a – the anchors inside get green and text-dec stripped. I used a darker green because the one you had was insufficient contrast making it not meet accessibility norms.
.toolTip div – the nested div is APO’d off screen at the start. The width should be sufficient for any content, and the large border makes it attractive with our simple CSS hover replacing that train wreck of javascript.
* html .toolTip div – using the * HTML hack to target IE6- we just kill the hover effect to ‘gracefully degrade’ for legacy IE users. Rather than waste scripting on people stuck on the old browser, let’s just show them the content normally. Simple, small, and all you need for supporting legacy users.
.toolTip:hover – background-color so we see it’s hovered, z-index change to make sure it depth sorts not only over everything other section on the page, but also it’s own kin.
.toolTip:hover div – just slide it into place.
.toolTip h4 – just some alignment, font and colors.
.toolTip h4 small – just making sure the size is the same everywhere.
.toolTip b – I add padding to the B instead of the outer wrapper. It MAY be worth resorting to a second div to apply the padding, but this seems to work for now.
#footer – the clear SHOULDN’T be neccessary given all our floats are wrapped, but IE can be a bit of a re-re in that department… likewise it needs a haslayout trigger so it doesn’t screw up the preceeding margin. (by applying it before and inside the element and doubling BOTH!). Rest of it is just color, paddings, borders… yawn.
#footer a and pals – just colors and decoration.
From this point on it’s just some standard elements I use a lot on my sites:
.offset – some elements are ‘offset’ from their kin, like your placeholder image on that page. (REALLY hope that’s not a REAL page on the site)… simple class that says it’s an offset, but not what that offset would actually appear like.
.plate – standard image plate… block level, centered.
.leadingPlate – a lead-in image. float it, pad it enough to push any content away from it.
.trailingPlate – the opposite. Float the other way, pad the other way.
… and that’s it, the how/why/what of the CSS for my approach to coding your page. I realize you’re probably somewhat neutered in what you can change by the CMS you are in and the various mods/plugins (like the accuweather thing) in how much of it you can actually apply – but I’m hoping you will at least be able to come away with SOMETHING useful out of all this…
… and that it shows how bad some off the shelf solutions are coded.
Again, hope this helps, or at least gets you thinking in different directions.