Back Home

Open Designs

Community. Driven.

    •  
      CommentAuthorSean
    • CommentTimeMay 13th 2008 edited by Sean on the 13th May 2008 at 15:23:44 EDT
     
    Hey fellow admins and moderators... a little help on explaining what an 'OD Garden design theme' would be, then I can update this post with official contest rules, etc and we can get this thing finally rolling.

    Now that voting is over on the contest theme, lets work out the details on what is an OD Garden Design and how long people have for submissions, etc.

    As for general guide lines, I think the contest entries should follow the rules on normal OD designs (validate, no tables, no javascript, etc.).

    Thoughts?
    •  
      CommentAuthorgnome
    • CommentTimeMay 13th 2008 edited by gnome on the 13th May 2008 at 19:22:18 EDT
     
    EDIT: sean, I was halfway through this when you posted and closed that conv, and vanilla told me that "YOu do not have enough priviliges to do that" :P

    Does this sound sane?
    • All designs must use the same HTML source, with own link in the bottom, and their own stylesheet calls
    • The use of CSS frameworks is discouraged (it is extra baggage)
    • Design must meet the submission guidelines set for all submissions here
    • Judging will be based on several broad categories: cross-browser/cross-platform consistency, visual appearance/asthetics, readability/usability, uniqueness/creativity, quality of code, general efficicency (both net file size and number of CSS properties changed)
    If not, then we'll need to work that out, as this is just a rough suggestion.
  1.  
    I like all of gnomes' suggestions except the one about CSS frameworks, I think people should be given the freedom of choice to decide whether they want to use one or not.

    Main point though, who does the HTML for this contest?
  2.  
    can we allow js execptions for IE only and transparency hacks? I know a lot of templates on here have already gotten away with that
  3.  
    Sean: I agree on following the standard OD submission rules. I think that just a style sheet should be submitted, and a link can be added to the footer after the contest, that way it's super easy to see that the proper XHTML was used. I edited a version of the css Zen Garden html file. Feel free to modify it, butcher it, etc. I just thought that starting there would be a good idea, because they've already been doing this for a while.
    •  
      CommentAuthoricyone
    • CommentTimeMay 13th 2008
     
    brilliant...
    •  
      CommentAuthorNickyD
    • CommentTimeMay 13th 2008
     
    Posted By: SeanAs for general guide lines, I think the contest entries should follow the rules on normal OD designs (validate, no tables, no javascript, etc.).
    I agree with this. If you need help judging, I am available.
  4.  
    i like that template. It will give us a good amount of room to work with and be really creative
    •  
      CommentAuthorperthmetro
    • CommentTimeMay 13th 2008
     
    Don't let this post distract from this discussion but I doubt I (and other newbies) will be able to make a contribution to the contest as my css skills just aren't up to coding from scratch I work by pulling apart other designs and making them into my own. Any chance in also having a basic css sheet go along with the html to start me off? Or would someone like to donate one to me that I can hack around with... Thanks. Pete
    •  
      CommentAuthorkirby145
    • CommentTimeMay 14th 2008
     
    According to the rules, they consider allowing use of css frameworks. Which are great, but to help in learning css i would not use them.
    •  
      CommentAuthorperthmetro
    • CommentTimeMay 14th 2008
     
    Thanks for the "if I were you", but... ya not me and I wanna compete in the contest, so.... Does anyone know where can get hold of one of these css framework thingies?
    • CommentAuthorwfiedler
    • CommentTimeMay 14th 2008
     
    Pete - have a look here: 960 Grid System

    Once you have understood how it works, it's really simple...
    •  
      CommentAuthorperthmetro
    • CommentTimeMay 14th 2008
     
    Thanks for that - i'll try to work it out
    • CommentAuthorJames
    • CommentTimeMay 14th 2008
     
    We could perhaps take one step further and include all style tags as well, eg blockquote, tables, forms etc to produce a more detailed project?
    •  
      CommentAuthorgreg
    • CommentTimeMay 14th 2008
     
    Posted By: JamesWe could perhaps take one step further and include all style tags as well, eg blockquote, tables, forms etc to produce a more detailed project?
    all that should be up to the individual designers imho.
    • CommentAuthorNOWdesign
    • CommentTimeMay 14th 2008
     
    Look guys, we just need to KISS (keep it simple, stupid) on this one, as we are at a danger of having only a few entries.

    I'm really happy that we are having this particular theme, it does allow for greater scope with regards to being tested, as Open Source Web design is not *just* about design, it is also about the markup and style, using this as a competition theme, we will still be able to see the best in design, but #innovation and clever use of markup will come up trumps too, plus the chance to really test your skills.

    I like the idea of using a modified ZEN garden template, but the one simplified above needs to be simplified some more - far more if we are to get the intermediate coders to take note and join in. We do want to have a challenge, but it should be based on skill and not on university degrees - what I'm saying is we should really have a fair balance of design and skill.

    I believe that the template should have the following:


    • Uneditable HTML file - the only thing you can change is a CSS file which you have complete control over.

    • The HTML could consist of various divs, in a certain source order, so that anyone can choose to have columns or whatever

    • Table, headings, blockquote, images, lists, and a form should all be in there somewhere



    My sugegstion is that the source code of the html file should have standard named divs in a certain order, such as this:

    #parentContainer
    #top
    #header
    #nav
    #content
    #news
    #subContent
    #contact
    #footer
    #bottom

    that way, the coder does have complete choice using margins, absolute positioning or whatever to create the layout of their choice.

    The HTML markup in my opinion MUST not only be valid HTML, but be engineered properly, using appropriate source order for the named divs.

    Keeping in mind HTML5 will actually have pre-named divs I really think this is the best idea.

    I would be happy to knock something together - or alongside someone if needed?
    • CommentAuthorRob
    • CommentTimeMay 14th 2008
     
    How can it be up to the individual designer if we can't edit the html page?

    blockquote, tables, forms etc should be included in order to make a proper flexible, useful template, rather than just a design which looks nice but doesn't cater for users needs.

    After all i'm presuming that these templates will end up being available for download on OD?
    • CommentAuthorNOWdesign
    • CommentTimeMay 14th 2008
     
    Posted By: RobHow can it be up to the individual designer if we can't edit the html page?


    That is the whole point of a "Garden" type contest. Are you familiar with http://www.csszengarden.com/? Designers submit a design based on a pre-made HTML file - all that they are allowed to change is the CSS.

    One way of adding credit to the design is through the CSS - adding an image in the #footer for example - or crediting them on a specific contest submissions page.

    with a non-editablle HTML file - there would be no cheaters!
    • CommentAuthorNOWdesign
    • CommentTimeMay 14th 2008 edited by NOWdesign on the 14th May 2008 at 10:03:09 EDT
     
    Should we limit the use of the display:none property in CSS? Someone *could* still cheat by using that - choosing to hide tables for example - using this property so that they do not have to style tables!
    •  
      CommentAuthorperthmetro
    • CommentTimeMay 14th 2008 edited by perthmetro on the 14th May 2008 at 10:23:38 EDT
     
    If it gets too/slightly hard there's no way I can compete. that's why i voted for colours.
    •  
      CommentAuthorJeremyD
    • CommentTimeMay 14th 2008 edited by JeremyD on the 14th May 2008 at 15:20:06 EDT
     
    perth, if you get stuck or anything feel free contact me (toxicityj@gmail.com). I'm home all day tomorrow and I'd be more than willing to give you a hand.

    And I don't know why people keep referring to tables. tables fall under things outlawed in the template submission guidelines, and it looks like it will double as the guideline for this contest.

    If anyone needs any practice with making designs using nothing but the CSS, csszengarden (NOWdesign's post above has a link) provides the base HTML/CSS for their site. So that's probably a good place to start figuring this stuff out. That's what I'm doing in preparation, anyway.
    •  
      CommentAuthorgnome
    • CommentTimeMay 14th 2008 edited by gnome on the 11th August 2008 at 20:08:03 EDT
     
    NOWdesign: If an element appears in the HTML, it must appear in the final design

    I think that this HTML gets a bit closer to what we want, eh? I'll put together a style sheet too, and anyone is welcome to modify this, or start from scratch in order to get the base style for the contest.
    •  
      CommentAuthorJeremyD
    • CommentTimeMay 14th 2008
     
    Looks good to me, Jason.
    •  
      CommentAuthorperthmetro
    • CommentTimeMay 14th 2008
     
    Thanks Jeremy and Jason
    • CommentAuthorRob
    • CommentTimeMay 15th 2008
     
    Posted By: NOWdesign
    Posted By: Rob How can it be up to the individual designer if we can't edit the html page?


    That is the whole point of a "Garden" type contest. Are you familiar with http://www.csszengarden.com/ ? Designers submit a design based on a pre-made HTML file - all that they are allowed to change is the CSS.

    One way of adding credit to the design is through the CSS - adding an image in the #footer for example - or crediting them on a specific contest submissions page.

    with a non-editablle HTML file - there would be no cheaters!

    Yeah I am aware of the CSS Zen Garden, I was replying to greg's post "all that should be up to the individual designers imho.", concerning blockquotes, tables etc, I was saying they need to be present in the HTML file, as there's no way to make it up to the individual designer, unless they simply choose to ignore those tags.
    • CommentAuthorfernbap
    • CommentTimeMay 15th 2008
     
    Just a question (i think it wasn't asked before):
    Can you submit more than one design?
    •  
      CommentAuthorkirby145
    • CommentTimeMay 15th 2008
     
    How about we start contest by May 25?
    • CommentAuthorfernbap
    • CommentTimeMay 23rd 2008
     
    Did everyone forget about this?
    •  
      CommentAuthorSean
    • CommentTimeMay 23rd 2008
     
    As I type this, I just finished talking with Joe via mobile phone. He's away from the internet for 1 maybe 2 more days, then he can get caught up on all of this. I filled him in best I could over the phone.

    About the contest, he will be sending me the backend code so I can get the contest upload/preview going for all of us.

    More to come from Joe in a couple days. Hang in everyone.
    •  
      CommentAuthorkirby145
    • CommentTimeJun 4th 2008
     
    ?
    •  
      CommentAuthorperthmetro
    • CommentTimeJun 4th 2008
     
    Posted By: Seanhe will be sending me the backend code so I can get the contest upload/preview going for all of us.


    That's what I asked before. Why don't all the admins have access to all the backend code? I'm not asking this for the hell of it, I'd really like to know.
    •  
      CommentAuthorSean
    • CommentTimeJun 4th 2008 edited by Sean on the 04th June 2008 at 02:09:15 EDT
     
    @perthmetro: We (all 3 of us admins) have the source code and also the code for how we've done previous contests, however this new CSS Zen type contest is a lot different now that I'm looking over this thread.

    Previously people created a design (HTML) and style sheet (CSS), they uploaded the design, it could be previewed, we voted and a winner was picked.

    My understanding now for this new contest is we'll have a basic HTML framework and people create different CSS to change the look of the design.

    Am I understanding this correctly? If so, we do not have a method in place for people to upload a style sheet and have it work with the same HTML like Zen Garden.

    I'm heading to bed now and will be back online in about 8 hours, so hopefully this can be worked out so we can get rolling on this.

    I'm not trying to hold anything up, I've just got questions and need some answers/advise. Thanks.
    •  
      CommentAuthorperthmetro
    • CommentTimeJun 4th 2008
     
    @ Sean, still not sure as to why only Joe has access to some 'code', surely ALL code/stuff can be uploaded to a common area? But i'll leave that subject for another time.

    RE: contest - Yes the way i see the contest is exactly as you described it.. a contest in css work rather than html work (that's why i didn't vote for it - but Pete won't go there either wink )

    Why not just get each entry to upload their submission as per normal and include the same index.html . Is there a script that can compare a submitted html to the master html to ensure it has not been altered?
    •  
      CommentAuthoryugnats
    • CommentTimeJun 4th 2008
     
    Posted By: perthmetroWhy don't all the admins have access to all the backend code?
    maybe its because the admins don't want to share their custom code even amongst each other? i know people have asked for backend code here before and it wasn't offered up.
    •  
      CommentAuthorSean
    • CommentTimeJun 4th 2008 edited by Sean on the 04th June 2008 at 14:06:36 EDT
     
    @perthmetro: We all (3 admins) have the exact same access to the source code, however from time to time we 3 do various testing on new features or fixing things, so that's why sometimes we need to pass things back and forth. We are not using a real version control system at this point.

    @yugnats: All 3 admins have the exact same access to the servers, source code, sftp, database, etc.
    •  
      CommentAuthorkirby145
    • CommentTimeJun 5th 2008
     
    I don't see any problem with people submitting it normally. They just include the same index page provided and their css. No modifications or the participant is disqualified.
    Posted By: perthmetro
    Why not just get each entry to upload their submission as per normal and include the same index.html . Is there a script that can compare a submitted html to the master html to ensure it has not been altered?
    • CommentAuthorfernbap
    • CommentTimeJun 9th 2008
     
    Bump bidibump

    Hey? Did everyone forget this?
    •  
      CommentAuthorSean
    • CommentTimeJun 9th 2008
     
    @fernbap: working on a way for people to upload css and use the same html.
    • CommentAuthorfernbap
    • CommentTimeJun 9th 2008 edited by fernbap on the 09th June 2008 at 22:57:41 EDT
     
    hmm... it might be simpler to replicate the html files, editing a single line calling the CSS.

    People upload the CSS and images, the system creates a replicated index.html file with a custom call to the CSS

    Another way would be to make a SQL table with the design names and CSS file names, and call that table from the HTML (PHP, in fact). You just have to pass one single parameter to index.php, the design ID.
    •  
      CommentAuthorkirby145
    • CommentTimeJun 23rd 2008
     
    Any more news?
    •  
      CommentAuthorperthmetro
    • CommentTimeJun 23rd 2008
     
    I think if it can't be sussed out sooner than later then just do it manually - but the comp needs to start... sort of like, now.
    •  
      CommentAuthorkirby145
    • CommentTimeJun 23rd 2008
     
    Someone keeps saying that we need to make it so you can only submit css, we don't need to do that

    Just say you have to use the index.htm included or you are disqualified and there you go.
    ---
    Other than this, I'm not sure what is being worked on?
    •  
      CommentAuthorperthmetro
    • CommentTimeJun 23rd 2008
     
    Posted By: kirby145Just say you have to use the index.htm included or you are disqualified and there you go.


    I agree... problem solved - let's start.
    •  
      CommentAuthorgnome
    • CommentTimeJun 23rd 2008
     
    Why don't you two come up with a better version of the HTML for the contest, one that includes a wider variety of tags? Somebody has to do that, and better you guys doing it than me doing it. bigsmile
    •  
      CommentAuthorperthmetro
    • CommentTimeJun 23rd 2008 edited by perthmetro on the 23rd June 2008 at 13:51:41 EDT
     
    I got one hangon I'll find it

    here we go from css tinderbox

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="Enter your description here so that you can take advantage of search engine optimization." />
    <meta name="keywords" content="keywords, are, always, good, to have, and use, so that, you are, seen in the, search engines, and people, will come, to your, web site, then buy, what you, are selling, or saying" />
    <meta name="author" content="The CSS Tinderbox - http://www.csstinderbox.com" />
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <title>the css tinderbox: fixed 3-column over 4-column layout (basic)</title>
    </head>
    <body>

    <div id="postHeader">
    <a href="#" title="Links">Links &#8250;&#8250;</a>&nbsp;&nbsp;<a href="#" title="Site Map">Site Map &#8250;&#8250;</a>&nbsp;&nbsp;<a href="#" title="Contact">Contact &#8250;&#8250;</a>

    </div><!--//end #postHeader//-->

    <div id="centerColumn">

    <div id="navbar">
    <ul>
    <li><a href="#" title="Home">Home</a></li>
    <li><a href="#" title="About">About</a></li>
    <li><a href="#" title="Gallery">Gallery</a></li>
    <li><a href="#" title="Contact">Contact</a></li>

    </ul>
    </div><!--//end #navbar//-->

    <div id="header">
    <h1>site title</h1>
    <h2>fixed 3-column over 4-column layout</h2>
    </div><!--//end #headern//-->

    <h2>centerColumn</h2>

    <h3>sub heading</h3>
    <p>Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus, si Palatinas videt aequos aras remque Romanam Latiumque felix alterum in lustrum meliusque semper prorogat aevom, quaeque Aventinum tenet Algidumque, quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>

    <hr />

    <div id="cell_1">
    <h2>cell_1</h2>
    <p class="news">Quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>
    <ul class="news">
    <li class="news"><a href="#">Link</a><br />

    <em>Date<br />
    Puerorum amicas adplicat auris.</em></li>

    <li class="news"><a href="#">Link</a><br />
    <em>Date<br />
    Puerorum amicas adplicat auris.</em></li>
    </ul>

    </div><!--//end #cell_1//-->

    <div id="cell_2">
    <h2>cell_2</h2>
    <p>Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus, si Palatinas videt aequos aras remque.</p>
    <p>Romanam Latiumque felix alterum in lustrum meliusque semper prorogat aevom, quaeque Aventinum tenet Algidumque, quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>
    </div><!--//end #cell_2//-->

    <div id="cell_3">

    <h2>cell_3</h2>
    <p>Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus, si Palatinas videt aequos aras remque.</p>
    <p>Romanam Latiumque felix alterum in lustrum meliusque semper prorogat aevom, quaeque Aventinum tenet Algidumque, quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>
    </div><!--//end #cell_3//-->

    <hr />

    <div id="box_1">
    <h2>box_1</h2>

    <p>Quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>
    <ul>
    <li><a href="#" title="Link">Link&#8230;</a></li>
    </ul>
    </div><!--//end #box_1//-->

    <div id="box_2">
    <h2>box_2</h2>

    <p>Quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>
    <ul>
    <li><a href="#" title="Link">Link&#8230;</a></li>
    </ul>
    </div><!--//end #box_2//-->

    <div id="box_3">
    <h2>box_3</h2>

    <p>Quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>
    <ul>
    <li><a href="#" title="Link">Link&#8230;</a></li>
    </ul>
    </div><!--//end #box_3//-->

    <div id="box_4">
    <h2>box_4</h2>

    <p>Quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>
    <ul>
    <li><a href="#" title="Link">Link&#8230;</a></li>
    </ul>
    </div><!--//end #box_4//-->

    <div id="footer">
    Copyright, &copy; 2005-2006 <a href="#" title="Company Name">Company Name</a> |
    <a href="http://www.csstinderbox.com" title="Contact">The CSS Tinderbox</a>
    </div><!--//end #footer//-->

    </div><!--//end #centerColumn//-->

    </body>
    </html>


    and here's some basic styling css to start those off who need some help

    /*******************************************************
    TITLE: Fixed Three-Column Over Four-Column Layout V1.0
    DATE: 20060807
    AUTHOR: The CSS Tinderbox - http://www.csstinderbox.com
    *******************************************************/

    body {
    margin:.5em;
    padding:0;
    height:100%;
    background-color:#ffffff;
    color:#000000;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:.9em;
    }

    a {
    color:#cc0000;
    text-decoration:underline;
    }

    a:hover {
    color:#616161;
    text-decoration:none;
    }

    blockquote {
    margin:1em;
    padding:.5em .5em .5em 85px;
    background-color:#D7ECF8;
    }

    blockquote p {
    margin:.2em;
    color:#000000;
    }

    hr {
    margin-bottom:20px;
    border:none;
    width:99%;
    color:#eeeeee;
    background-color:#eeeeee;
    height:1px;
    clear:both;
    }

    td.desc {
    padding:4px;
    text-align:left;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:.7em;
    }

    #postHeader {
    margin:0 auto;
    padding:0 .2em .3em .2em;
    width:720px;
    text-align:right;
    vertical-align: middle;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:.7em;
    text-transform:uppercase;
    }

    #centerColumn {
    margin:0 auto;
    padding:1em;
    width:720px;
    text-align:left;
    vertical-align: middle;
    background-color:#ffffff;
    }

    #centerColumn h2 {
    margin:0 0 -.5em 0;
    padding:.75em 0 0 0;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:1.1em;
    }

    #centerColumn h3 {
    margin:0 0 -.5em 0;
    padding:.75em 0 0 0;
    font-size:.8em;
    font-weight:lighter;
    letter-spacing:.1em;
    }

    #navbar {
    margin:-1em -1em 0 -1em; /* Mozzila attributes */
    padding:1em 0 1em 0 !important; /* IE specific attributes */
    padding:1em 0 0 0;
    background-color:#cccccc;
    }

    #navbar ul {
    margin:0 0 -1em .3em !important;
    margin:.3em 0 0 .3em;
    padding:0 0 1em 0;
    list-style:none;
    background-color:#cccccc;
    }

    #navbar li {
    margin:0 0 0 -.27em;
    padding:.2em 0 .2em 0 !important;
    padding:1em 0 1em 0;
    list-style:none;
    display:inline;
    background-color:#cccccc;
    }

    #navbar li a {
    margin:0 0 0 0;
    padding:1em .5em 1em .5em !important;
    padding:1em .5em 0 .5em;
    }

    #header {
    margin:0 -1em 0 -1em;
    padding:0 0 0 0;
    height:143px;
    background-color:#cccccc;
    border-top:1px solid #ffffff;
    }

    #header h1 {
    margin:0 0 -14px 10px;
    padding:10px 0 0 .9em;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:1.7em;
    font-weight:lighter;
    letter-spacing:.15em;
    color:#000000;
    }

    #header h2 {
    margin:0 0 0 0;
    padding:1em 0 0 30px;
    font-size:.9em;
    font-weight:300;
    letter-spacing:.1em;
    color:#000000;
    }

    #cell_1 {
    margin:0 5px 1em 0;
    padding:8px;
    float:left;
    width:210px;
    background-color:#cccccc;
    }

    #cell_2 {
    margin:0 14px 1em 14px;
    padding:8px;
    float:left;
    width:210px;
    background-color:#cccccc;
    }

    #cell_3 {
    margin:0 0 1em 5px;
    padding:8px;
    float:left;
    width:210px;
    background-color:#cccccc;
    }

    #cell_1 p, #cell_2 p, #cell_3 p {
    font-size:.75em;
    color:#000000;
    }

    #cell_1 h2 {
    margin:0 0 -4px 0 !important;
    margin:0 0 -20px 0;
    padding:4px 0 10px 0;
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#000000;
    font-weight:bold;
    }

    #cell_2 h2 {
    margin:0 0 -4px 0 !important;
    margin:0 0 -20px 0;
    padding:4px 0 10px 0;
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#000000;
    font-weight:bold;
    }

    #cell_3 h2 {
    margin:0 0 -4px 0 !important;
    margin:0 0 -20px 0;
    padding:4px 0 10px 0;
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#000000;
    font-weight:bold;
    }

    .barepic {
    border:none;
    }

    .right {
    float:right;
    margin:5px;
    padding:2px;
    }

    .left {
    float:left;
    margin:5px;
    padding:2px;
    }

    .center {
    width:auto;
    margin-left:auto;
    margin-right:auto;
    }

    .news em {
    font-size:.8em;
    color:#000000;
    }

    #cell_1 ul.news, #cell_2 ul.news, #cell_3 ul.news {
    margin:0 0 0 5px;
    padding:0 0 0 0;
    list-style:none;
    }

    #cell_1 li.news, #cell_2 li.news, #cell_3 li.news {
    margin:0 0 .3em 0;
    padding:5px 0 6px 10px;
    font-size:.75em;
    }

    #cell_1 ul, #cell_2 ul, #cell_3 ul {
    margin:0 0 0 5px;
    padding:0 0 0 0;
    list-style:none;
    }

    #cell_1 li, #cell_2 li, #cell_3 li {
    margin:0 0 .3em 0;
    padding:5px 0 6px 5px;
    font-size:.75em;
    }

    #box_1 {
    margin:0 5px 2em 0;
    padding:8px;
    float:left;
    width:150px;
    background-color:#cccccc;
    }

    #box_2 {
    margin:0 7px 2em 14px;
    padding:8px;
    float:left;
    width:150px;
    background-color:#cccccc;
    }

    #box_3 {
    margin:0 14px 2em 7px;
    padding:8px;
    float:left;
    width:150px;
    background-color:#cccccc;
    }

    #box_4 {
    margin:0 0 2em 5px;
    padding:8px;
    float:left;
    width:150px;
    background-color:#cccccc;
    }

    #box_1 p, #box_2 p, #box_3 p, #box_4 p {
    font-size:.75em;
    color:#000000;
    }

    #box_1 h2, #box_2 h2, #box_3 h2, #box_4 h2 {
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#000000;
    font-size:.8em;
    }

    #box_1 ul, #box_2 ul, #box_3 ul, #box_4 ul {
    margin:0 0 0 5px;
    padding:0 0 0 0;
    list-style:none;
    }

    #box_1 li, #box_2 li, #box_3 li, #box_4 li {
    margin:0 0 .3em 0;
    padding:5px 0 0 5px;
    font-size:.8em;
    }

    #footer {
    position:relative;
    clear:both;
    bottom:0;
    margin:5em 0 0 0;
    padding:0;
    height:4em;
    line-height:4em;
    text-align:center;
    font-size:.7em;
    background-color:#ffffff;
    }


    And here's the result...
    http://csstinderbox.raykonline.com/demos/fixed-3-4c/index.html
    •  
      CommentAuthorkirby145
    • CommentTimeJun 23rd 2008
     
    That looks pretty decent to me, people can of course hide any unwanted boxes and move them around if they want in the css.
  5.  
    Haha, looks like I've got a head start.

    I uploaded a design using that same tinderbox skeleton a while back. I gave myself a half hour to modify it, then uploaded it to OD.

    It was great fun, and I'm sure this contest will get some creative juices flowing around here.
  6.  
    lol lucky sam
  7.  
    do the same rules as od apply. no js and no text in images?
    •  
      CommentAuthorJeremyD
    • CommentTimeJun 23rd 2008
     
    I'm really excited about this contest! CHICKEN WINGS!

    see? I'm so excited I'm yelling out food.