SitePoint Sponsor |
|
User Tag List
Results 1 to 23 of 23
Thread: Test your CSS skills - Number 6
-
Jun 7, 2004, 14:44 #1
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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.
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>
Code:CSS: h1 {font-size:140%;color:red;background:blue} Html: <h1>This is a heading</h1>
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
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
-
Jun 7, 2004, 18:15 #2
- Join Date
- Dec 2003
- Location
- Houston, Texas
- Posts
- 227
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Easy Task???
Boy after looking at what can't be used, I really feel stupid.
John
-
Jun 8, 2004, 05:17 #3
- Join Date
- Jul 2002
- Location
- Toronto, Canada
- Posts
- 39,347
- Mentioned
- 63 Post(s)
- Tagged
- 3 Thread(s)
Originally Posted by Paul O'B
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?
-
Jun 8, 2004, 05:42 #4
- Join Date
- Sep 2002
- Location
- Canada
- Posts
- 2,087
- Mentioned
- 1 Post(s)
- Tagged
- 1 Thread(s)
r973: because your "not allowed to use any divs or spans or classes or id's"
"A nerd who gets contacts
and a trendy hair cut is still a nerd"
- Stephen Colbert on Apple Users
-
Jun 8, 2004, 06:13 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by rudy
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
-
Jun 8, 2004, 07:06 #6
- Join Date
- Mar 2002
- Location
- Bristol, UK
- Posts
- 2,240
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Is it OK to position an element using position: absolute;? It's not a span or DIV, don't worry
-SamSam Hastings
-
Jun 8, 2004, 07:14 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Is it OK to position an element using position: absolute;? It's not a span or DIV, don't worry
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
Paul
-
Jun 8, 2004, 07:24 #8
- Join Date
- Mar 2002
- Location
- Bristol, UK
- Posts
- 2,240
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ahhh perhaps I'd better rethink a couple of things then
-SamSam Hastings
-
Jun 8, 2004, 08:23 #9
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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
-
Jun 8, 2004, 08:51 #10
- Join Date
- Mar 2002
- Location
- Bristol, UK
- Posts
- 2,240
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'm still working on mine
How long until you stop accepting entries?
-SamSam Hastings
-
Jun 8, 2004, 09:58 #11
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
How long until you stop accepting entries?
-
Jun 8, 2004, 10:29 #12
- Join Date
- Jan 2004
- Location
- Kentucky, USA
- Posts
- 1,099
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You say that we cannot change the HTML at all.... what HTML?
-
Jun 8, 2004, 14:14 #13
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
What html ?
Your own html of courseIf I gave everybody the html it would be too easy
Code:<p>this is allowed</p>
Code:<p id="centrecolumn">this isn't allowed</p>
Use your own (as semantic as possible) html to make the layout.
Paul
-
Jun 8, 2004, 16:15 #14
- Join Date
- Jan 2004
- Location
- Kentucky, USA
- Posts
- 1,099
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ok, well your wording was strange then, because we'd HAVE to change our own HTML to make anything
-
Jun 9, 2004, 05:41 #15
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by megaman
-
Jun 9, 2004, 05:47 #16
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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
-
Jun 9, 2004, 06:16 #17
This is going great Paul, great idea!
-
Jun 9, 2004, 06:52 #18
- Join Date
- Mar 2002
- Location
- northern MI
- Posts
- 1,392
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I seriously wish I had time for this. This is so much fun!
Great threads Brian
-
Jun 9, 2004, 12:04 #19
- Join Date
- Mar 2004
- Location
- Europe
- Posts
- 214
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hmmm. I've got half of it working but I run out of html elements that do not affect the content!
-
Jun 9, 2004, 12:12 #20
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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
-
Jun 13, 2004, 11:51 #21
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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 :
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>
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.
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"> <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>© 2004 Footer Inc. All rights reserved.</h4> </body> </html>
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
-
Jun 14, 2004, 11:53 #22
- Join Date
- Apr 2004
- Location
- CT
- Posts
- 21
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
thanks Paul, and congrats to everyone else who won and participated.
can't wait for the next one!
-
Jun 14, 2004, 14:45 #23
Well done everyone!
Bookmarks