Hi,

After last weeks rather hard challenge this week we're going back to basics for something rather easier and in which everybody can have a go.

Theres been a lot of fuss been made recently about css pages that suffer from divitus and classitus. Divitus means that too many divs are being used when structural html elements should be used instead.

Classitius is when every tag seems to have a class when it doesn't need to and could be done with contextual selectors alone.

e.g - bad code
Code:
Css:
.heading {font-size:140%}
p.textstyle {color:red;background:blue}
 
html:
<div class="heading><p class="textstyle">This is a heading</p></div>
Good code:
Code:
CSS:
h1 {font-size:140%;color:red;background:blue}
 
Html:
<h1>This is a heading</h1>
So this week your task (as suggested by a sitepoint member) is to create a 3 column layout that has a full width header, sub header and footer but you are not allowed to use any divs or spans or classes or id's. The html must in fact remain untouched and of course as semantically correct as possible (as in the short snippet of code above).

This will help you think about how to construct pages correctly using the proper html elements and will result in leaner more readable code. Obviously you couldn't do a whole site like this as you would soon run out of elements, but for this exercise you should be fine.

Its quite an easy task but it will allow some of you to be inventive in what you create.

The basic layout is a 3 column layout where any column can be the longest and still push the footer down. The two side columns are fixed width and the centre column is fluid. We won't worry about equalising columns but the border between the columns should extend with the longest element.

Here are 2 screenshots of what I have come up with showing the layout expanded and collapsed.

http://www.pmob.co.uk/temp/images/quiz3col1.gif
http://www.pmob.co.uk/temp/images/quiz3col2.gif

You can either try and copy mine or come up with something similar (better hopefully). As with previous tests ie6 and firefox must look more or less the same. We won't worry about the odd pixel though.

Specific Rules:
  • No Classes or id's
  • No Divs or spans
  • No change to html at all
General Rules:
No frames or iframes
No javascript or scripting of any kind
NO TABLES
No inline styles
No images
No expression,conditional comments, behaviours etc.
Use Valid CSS
Use Valid xhtml
Must work in Firefox and ie6
No hacks, no child selectors, no universal selectors, no means of offering separate code to each browser. The same code must work for both browsers.
No finding loopholes - I'm sure you all know what I mean lol

As usual there are no prizes other than the self-satisfaction of completing this. If you have a valid layout then post a message here but PM me the solution so that other people can still have a go. I will decide on the best layout this time rather than the first one I receive.

As with the other tests these aren't meant to be suggestions for layout but more an exercise in using css to achieve something different and having fun at the same time.

Have fun .

Paul

PS. : In case you missed the other tests you can find them here:
test 1: http://www.sitepoint.com/forums/showthread.php?t=168555
test 2: http://www.sitepoint.com/forums/showthread.php?t=169710
test 3: http://www.sitepoint.com/forums/showthread.php?t=170190
test 4: http://www.sitepoint.com/forums/showthread.php?t=171221
test 5: http://www.sitepoint.com/forums/showthread.php?t=172472