SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 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>
    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

  2. #2
    SitePoint Addict jodmcc's Avatar
    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

  3. #3
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,340
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Paul O'B
    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?
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  4. #4
    Put your best practices away. The New Guy's Avatar
    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

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rudy
    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

  6. #6
    SitePoint Wizard
    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

    -Sam
    Sam Hastings

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 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
    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

  8. #8
    SitePoint Wizard
    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

    -Sam
    Sam Hastings

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 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

  10. #10
    SitePoint Wizard
    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?

    -Sam
    Sam Hastings

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    How long until you stop accepting entries?
    You've got plenty of time. I'll let it run for a few days

  12. #12
    SitePoint Wizard megamanXplosion's Avatar
    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?

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    What html ?

    Your own html of course If 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>
    No ID's, Classes, spans or divs (or loopholes) allowed.

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

    Paul

  14. #14
    SitePoint Wizard megamanXplosion's Avatar
    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

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by megaman
    Ok, well your wording was strange then
    My wordings always strange lol

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 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

  17. #17
    SitePoint Wizard Dangermouse's Avatar
    Join Date
    Oct 2003
    Posts
    1,024
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is going great Paul, great idea!

  18. #18
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

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

  19. #19
    SitePoint Addict
    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!

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 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

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 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>
    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.

    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>&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

  22. #22
    SitePoint Member
    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!

  23. #23
    SitePoint Wizard Dangermouse's Avatar
    Join Date
    Oct 2003
    Posts
    1,024
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well done everyone!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •