The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Test your CSS skills - Number 6

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.

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.

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.

Is it OK to position an element using position: absolute;? It's not a span or DIV, don't worry

as long as it adheres to the guidelines in the first post:
e.g.

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

Just had another great entry from Hulkur which has copied my original layout exactly - well done.

If anyone else wants to have a go there are still a few days left. You can either copy my layout exactly (see image link in first post) or come up with one of your own 3 columns based on the same sort of criteria as mentioned in the first post.

You need to try and keep it making semantic sense by using html elements that suit the task.

If you look at my image you should be able to identify what html elements to use by the type of content they represent.

But as I said above anything too complicated and you will run out of suitable elements to use to keep it sensible. With css you could use any element and style it but that wouldn't be the point would it

The textarea should have rows and cols to validate but thats the only thing wrong with it. The design was inventive and had a practical use and looks great (much better than mine lol).

The winner for the best copy of my design goes to :Hulkurhttp://www.larp.ee/fun/test5.html
The layout validates and is very similar to the example I set. The only thing I could say is that the bottom links are not really semantically correct as they use blockquote which should be for quotes. Otherwise its fine and a worthy winner.

Well done to all who took part and anyone else I forgot to mention I hope you enjoyed the quiz and learned something along the way. There will be another one in a few days time which will give you all time to have a rest.