Test your CSS skills - Number 6

[Paul O'B]

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

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:

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

[jodmcc]

Easy Task???

Boy after looking at what can't be used, I really feel stupid.

John

[r937]

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.

that's not obvious at all

i would soon run out of what?

are you suggesting that once i use an h1 i can't use it again?

or what are you getting at?

[The New Guy]

r973: because your "not allowed to use any divs or spans or classes or id's"

[Paul O'B]

are you suggesting that once i use an h1 i can't use it again?

Yes you can use it again but if you have floated it left then you won't be able to float it right later on. You can of course stack them all left (or wherever you put them in the first place).

As newguy said because i've banned any extra markup in the html you can't assign a different class to the element to make it behave differently as no classes id's spans or divs are allowed .

Paul

[SJH]

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

-Sam

[Paul O'B]

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

Otherwise you are free to do what you want

Paul

[SJH]

Ahhh perhaps I'd better rethink a couple of things then

-Sam

[Paul O'B]

Hi,

First entry just in from Tconley79 looks very nice. I won't post the link or code yet because I don't want anyone peeking yet .

So Tconley79 is in the lead unless you can do better

Paul

[SJH]

I'm still working on mine

How long until you stop accepting entries?

-Sam

[Paul O'B]

How long until you stop accepting entries?

You've got plenty of time. I'll let it run for a few days

[megamanXplosion]

You say that we cannot change the HTML at all.... what HTML?

[Paul O'B]

What html ?

Your own html of course If I gave everybody the html it would be too easy

<p>this is allowed</p>

<p id="centrecolumn">this isn't allowed</p>

No ID's, Classes, spans or divs (or loopholes) allowed.

Use your own (as semantic as possible) html to make the layout.

Paul

[megamanXplosion]

Ok, well your wording was strange then, because we'd HAVE to change our own HTML to make anything

[Paul O'B]

Ok, well your wording was strange then

My wordings always strange lol

[Paul O'B]

Hi,

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.

Thanks to all those that have entered so far

paul

[Dangermouse]

This is going great Paul, great idea!

[junjun]

I seriously wish I had time for this. This is so much fun!
Great threads Brian

[Subjective Effec]

Hmmm. I've got half of it working but I run out of html elements that do not affect the content!

[Paul O'B]

Yes that's the problem .

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

Paul

[Paul O'B]

Hi,
Time to wrap quiz6 up and announce the winners.

The winners are Tconley & and Hulker.
First here's the link to the page that I asked you to either copy or to come up with one of your own.

http://www.pmob.co.uk/temp/quiz6.htm

Heres the code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
 margin:0;padding:0;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 83%;
 color: #000000;
 background-color: #D1DCE9;
}
h1 {
 background:#AAAAFF;
 color:white;
 text-align:center;
 border-bottom:5px solid #FF9999;
 border-top:5px solid #FF9999;
 margin:0;
 padding:3px 0;
}
h2 {
 background:#fff;
 color:#000;
 text-align:center;
 border-bottom:2px solid red;
 margin:0px;
 font-size:100%;
 text-align:left;
}
h3 {
 background:#D0B1D1;
 color:#000;
 text-align:center;
 border-bottom:2px solid red;
 margin:0px;
 padding:5px 0;
 font-size:100%;
 text-align:center;
}

p {
 margin:0 197px;
 border-right:1px solid #000;
 border-left:1px solid #000;
 border-bottom:1px dashed #000;
 padding:5px;
 background-color: #94C2C5;
}
a:hover{background:#ffffcc;color:red}
dl{margin:0}
ul, dl {
 clear:left;
 float:left;
 width:197px;
 margin:0;
 padding:0;
 background:#ffffcc;
 border-right:1px solid #000;
 border-bottom:1px solid #000;
}
dl {
 background:#D0B1D1; 
 color:#000;
}
ul {list-style-type:none;}
ul li {
 text-align:center;
 line-height:25px;
 height:25px;
 border-bottom:1px solid #000;
}
ul li a {
 text-decoration:none;
 display:block;
 height:100%;
}
ul li a:hover {
 background:yellow;
 color:red;
}
h3,ol {
 float:right;
 width:197px;
 clear:right;
}
ol{
 color: #000;
 background-color: #CFB9A9;
 border-bottom:1px solid #000;
 border-left:1px solid #000;
 line-height:20px;
 margin:0 0 10px 0;padding:0;
}
ol li {margin-left:25px;}
h4 {
 margin:0;
 border-top:1px solid #000;
 border-bottom:1px solid #000;
 font-size:90%;
 text-align:center;
 padding:10px;
 background:#CAFFCA;
 clear:both;
}

</style>
</head>
<body>
<h1>This is the header</h1>
<h2>Sub header - Breadcrumb trail - You are here ><a href="#"> Home</a></h2>
<ul>

  <li><a href="#">Menu item 1</a></li>
  <li><a href="#">Menu item 2</a></li>
  <li><a href="#">Menu item 3</a></li>
  <li><a href="#">Menu item 4</a></li>
  <li><a href="#">Menu item 5</a></li>
  <li><a href="#">Menu item 6</a></li>

  <li><a href="#">Menu item 7</a></li>
  <li><a href="#">Menu item 8</a></li>
</ul>
<h3>Reasons to visit this site</h3>
<ol>
  <li>It's Good</li>
  <li>It's Free</li>
  <li>It's CSS</li>

  <li>It's Good</li>
  <li>It's Cheap</li>
  <li>It's Nice</li>
  <li>It's Here</li>
  <li>It's Mine</li>
</ol>
<dl>

  <dt title="Cascading Style Sheets"><abbr title="Cascading Style sheets">CSS</abbr></dt>
  <dd>Cascading Style Sheets : Some info about CSS : Some info about CSS : Some 
	info about CSS : Some info about CSS : Some info about CSS : </dd>
</dl>

<p>This is the centre content : This is the centre content : This is the centre 
  content : This is the centre content : This is the centre content : This is 
  the centre content : This is the centre content : This is the centre content 
  : This is the centre content : </p>
<p>This is the centre content : This is the centre content : This is the centre 
  content : This is the centre content : This is the centre content : This is 
  the centre content : This is the centre content : This is the centre content 
  : This is the centre content : </p>
<h4>| <a href="#">link</a> | <a href="#">link</a> | <a href="#">link</a> | <a href="#">link</a> 
  | <a href="#">link</a> |</h4>

</body>
</html>

The above code is valid xhtml and passes bobby aaa for accessibility etc.

Note that I have allowed a little leeway in these entries so I'm not being as strict as usual. The winners to meet the specified criteria as mentioned above are:

Best original layout: Tcoley79
http://www.liquidarch.com/sp/no_divs.htm

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 :Hulkur
http://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.

Other layouts worth mentioning are:
Frost - Good effort bud didn't validate
http://bragatel.pt/frost/

hulksjedi - Good effort not finished though (no link available).

Late entry by Little Rose (and with a little bit of coaching from me) has a good solid entry.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />
<style type="text/css">
html {margin: 0; padding: 0;}
body {margin: 0; padding: 0; background: white;
font: 0.80em Verdana, Helvetica, sans-serif;}
h1, h4 {padding: 0.5em;}
h1 {background: #E7FE8A; color: green;
margin: 0;}
h2 {margin: 0; padding: 0.2em 1em;
font-size: 100%;
background: #ccc;
border: solid green; border-width: 1px 0;}
h3 {margin: 0; padding: 0 0 0 2px; width: 200px;
font-size: 100%; background: green; color: white;
float: right;}
h4 {font-size: 80%;
clear: both;
font-weight: normal;
background: #eee; color: #666;
margin: 0;
text-align: center;
border: solid #ccc; border-width: 1px 0;
}

ul {
border: solid green; border-width: 0 1px 1px 0;}
ul {margin: 0; padding: 0; float: left;}
ul li {list-style: none; padding: 0; margin: 0;}
blockquote {width: 162px; margin: 1px 0 0 1px; padding: 0;
background: #eee;}


ol { 
border-bottom: 2px solid green;
border-left: 2px solid green;
width: 200px;
clear: right;
float: right;
color: black;
background: #E7FE8A;
margin: 0; padding: 0;}
ol li {list-style-position: inside;
padding: 0.5em; font-weight: normal;}
p {
background: #white;
margin: 0 200px 0 163px; padding: 1em;
}
a {
display: block;
background: #EFFEB3; color: green;
border-bottom: 1px solid green;
margin: 0; padding: 0.5em;
text-decoration: none;
width: 150px;
}


</style>
</head>
<body>
<h1>This is the header</h1>
<h2>subheader here</h2>
<ul>
  <li><a href="#">menu item one</a></li>
  <li><a href="#">menu item two</a></li>
  <li><a href="#">menu item three</a></li>
  <li><a href="#">menu item four</a></li>
  <li><a href="#">menu item five</a></li>
  <li><a href="#">menu item six</a></li>
  <li>
	<blockquote> Cascading style sheets: some info<br />
	  Cascading style sheets: some info<br />
	  Cascading style sheets: some info<br />
	  Cascading style sheets: some info </blockquote>
  </li>
</ul>
<h3>Reasons to visit this site</h3>
<ol>
  <li>fabulous</li>
  <li>extraordinary</li>
  <li>amazing</li>
  <li>fantastic</li>
  <li>super cool</li>
  <li>css-licious</li>
</ol>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec eros. 
  Sed est arcu, vulputate nec, elementum ut, sagittis ac, enim. Donec vitae massa 
  non lectus blandit viverra. Sed felis arcu, imperdiet ac, blandit quis, suscipit 
  id, lorem. Nullam cursus nibh at arcu. Vestibulum ante ipsum primis in faucibus 
  orci luctus et ultrices posuere cubilia Curae; Morbi bibendum sapien. Ut elementum 
  hendrerit tortor. Ut viverra venenatis leo. Maecenas feugiat pretium dui. Nulla 
  eget dolor in wisi semper sagittis. Nullam ac est. </p>
<h4>&copy; 2004 Footer Inc. All rights reserved.</h4>
</body>
</html>

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.

Thanks for playing.

Paul

[LittleRose]

thanks Paul, and congrats to everyone else who won and participated.
can't wait for the next one!

[Dangermouse]

Well done everyone!