Still there's the whole problem with various tags. People were discussing that it should include things like blockquote, li, ol, and various other things on the index page as well.

Maybe we should modify it further?

I have 3 different ideas for this.... can we submit more than one design?

The more we add to it the better, people can just ignore things they don't (particular in regards things like spans).

But definitely things like ol, blockquote, code, table (an actual table) should be in there, as at the end of the day these are designs released as open source for other people to use are they not (i'm presuming they'll end up on the site), therefore they should have the same flexibility as any good opensource designer would give to a design/template.

fernbap's suggested code brings up another issue - whether to make the base code for a standard website design or a blog/cms theme. My preference would be for a standard website design since they are more useful and popular designs will undoubtedly soon be ported for WP, etc.

I'd also suggest that we avoid layout specific id names such as "sidebarbottom" and concentrate on content to give more flexibility.

a typo. fixed

JeremyD wrote:

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.

I thought that folks were referring to data tables, very useful to include in a template?

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.

Excellent idea! Although I'm using a different base code (Dave Shea has said that it's a little outdated now and he would change some things if he could start over).

I haven't coded in a loooong time so I'm terribly excited!

Just in case I've lost the plot a little though, are we all designing on a "garden" theme (as in, grass, flowers, etc.) or is the contest title simply a nod to the css zen garden and we can basically do anything with the base html code (as with the css zen garden)?

Posted By: DaisyJeremyD wrote:

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.

I thought that folks were referring to data tables, very useful to include in a template?

they probably were. I just either misread it or missed a post or two in my reading.

Posted By: conartistdesignsits like a css zen garden theme

Lovely, thanks Connor.

Hang on, that means I have to *shudder* make some decisions? Eeek!

Bumping to the front page -

Jeremy: everytime a conversation gets bumped, it will appear on TODC's homepage, so that people who don't bother to go to /forum/ still see this thread.

Posted By: SeanActually what Daisy did was ok

Phew! I didn't stop to think that bumping up might be breaking rules/etiquette so am very glad not to have done so.

Jeremy, I know it's always stickied but I'm guessing that it's the topics on the home page that get the most attention, certainly to flippety giblets like me

Daisy: those links tend to help people using screen-readers or braille-based-browsers, so adding them would be a good idea. They don't make much difference to users of text-based browsers (like links), because they can scroll by things.

Here's an idea:

3 volunteers take the css tinderbox code posted by perthmetro (page 1) and give it a quick test drive. Create a template and see whether it's a viable option.

Why 3? So that we could test if from the perspective of a beginner, intermediate and advanced coder/designer.

All 3 would report back in a week's time (Friday 11 July) with any suggestions for modifications, etc. The (semi) finished designs can be posted if the volunteers feel up to it . The 3 could contact each other off-forum with any ideas/issues etc. too.

So - I'm up for the beginner position - any other volunteers? Is this even a good idea?

Can you tell that I'm keen to get this moving?

I'm back... Looks like we need to get this started right?

This topic has been siting here for way longer than it needed to be. We don't need to test it as long as it is valid code, don't need to modify stuff.

We need to start it
--------
Because it has been so long

Is this thread the only place to learn more about the contest? Has it started yet, or are we waiting for some of the kinks to be ironed out? Anyways, I can donate some code that will use the same index.html file, and it will dynamically use the .css file and images for formatting. Let me know if I can help.

This code has more tags in it: <!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="Open Designs OD Garden contest" />
<link rel="stylesheet" type="text/css" href="odcontest.css" media="screen" />
<title>Open Designs OD Garden</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="toplinks">
<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>
<h1>Site name</h1>
<h2>Site description</h2>
</div> <!-- end header -->
<div id="navbar">
<ul>
<li class="selected"><a href="#" title="Home"><span>Home</span></a></li>
<li><a href="#" title="About"><span>About</span></a></li>
<li><a href="#" title="Gallery"><span>Gallery</span></a></li>
<li><a href="#" title="Contact"><span>Contact</span></a></li>
</ul>
</div><!--//end #navbar//-->
<div id="main_content">
<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>
<div class="newsfooter">
<span class="postedby">Posted by: <a href="#">Poster</a></span>
<span class="date">31/01/2008</span>
<span class="readmore">Read more...</span>
</div>

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

<div id="box_2">
<h2>box_2</h2>
<ol>
<li><a href="#" title="Link">Link&#8230;</a></li>
<li><a href="#" title="Link">Link&#8230;</a></li>
<li><a href="#" title="Link">Link&#8230;</a></li>
</ol>
<blockquote>
Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force.
<cite>Darth Vader, to General Motti</cite>
</blockquote>
</div><!--//end #box_2//-->

<div id="box_3">
<h3>box_3</h3>
<table>
<tbody>
<tr>
<th>Title</th>
<th>Title</th>
<th>Title</th>
</tr>
<tr>
<td>Title</td>
<td>Title</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Title</td>
<td>Title</td>
</tr>
</tbody>
</table>
</div><!--//end #box_3//-->

<div id="box_4">
<h4>box_4</h4>
<dl>
<dt>Queulat National Park</dt>
<dd>Queulat National Park is a national park of Chile located in the Aisén Region. It covers an area of 1,541 square kilometres.</dd>
<dt>Edward Abramoski</dt>
<dd>Edward "Abe" Abramoski served as Head Athletic Trainer for the Buffalo Bills for 37 years.</dd>
</dl>
</div><!--//end #box_4//-->
</div><!-- end main content -->
<div id="sidebar">
<div class="sidebarlinks">
<h2>Side Links</h2>
<ul>
<li class="selected"><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>
<div class="categories">
<h2>Categories</h2>
<ul>
<li><a href="#" title="Home">Category 1</a></li>
<li><a href="#" title="About">Category 2</a></li>
<li><a href="#" title="Gallery">Category 3</a></li>
<li><a href="#" title="Contact">Category 4</a></li>
</ul>
</div>
<div class="news">
<h2>News title</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>
<div class="newsfooter">
<span class="postedby">Posted by: <a href="#">Poster</a></span>
<span class="date">31/01/2008</span>
<span class="readmore">Read more...</span>
</div>
</div>
<div id="sidebarbottom"></div>
</div><!-- end sidebar -->

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

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

</body>
</html> Could some other folks either give feedback on this, or post their own edited versions?

I just made the longest post i've ever made and stupidly lost it, so i'll do it again but in bullet point format (might be better that way anyway).

I won't bother editing your code to include the things i'm suggesting as that'll just get confusing, i'll just leave you to add the stuff people suggest.

1) The toplinks div should be outside the header div as this will give us more flexibility of where we want to place it, it shouldn't necessarily have to go within that div, although I do see the reason for it being there.

2) The toplinks should be in a list format, to give us more flexibility as we can recreate anything we can do with just the links with li's, but if we want to do something else we can do without having to put widths on the links or something equally annoying.

3) Can we expand the table, its very limited at present, really it should follow the proper standard of having a thead, tbody and tfoot, with the th being moved into the place of the thead. Can we also add a caption to the table.

4) All of the ul's should have classes, I know some do, but everyone should to help us with more flexibility.

5) Can we have a search input somewhere. Where you place it will be difficult as some will like it in the sidebar and some will like it at the top, but i'll leave that for you to try and test.

6) Can we add first and last classes to the li's, that'll be a great help when using background images with lists. Obviously anyone that doesn't want to use them can just ignore them.

I'll put together some basic CSS later today, and I'll post it on my site both as a downloadable zip archive and with a preview.

is it better to have 3 judges, or community polls? I would like to use three judges
3 or more judges. Polls are problematic. could somebody help me flesh out the template? What do you mean? Definitely we need to add tags: http://htmldog.com/reference/htmltags/ Is my minimal style alright? I wanted to leave the layout to the designer, but I could easily add the stylesheet which the template originally came with in. It's great. The nature of this contest doesn't exactly seem to
produce user friendly <i>templates</i> but it will be fine for designs.

If only people voted for something less complicated in the first place.

My Thoughts: Having all those different boxes showing off all the different types of things that we can style are nice, but this is a contest for 'design'.
When you have that many little boxes with all of the different elements it begins to take away from the design; providing to much empty space.
Now, I'm not saying it will look horrible, but from playing around with it a bit, I'm not really linking it. If you want to have a styles page then go for it. But in my opinion we don't really need all that info on the index page. Use content, then style the content with the different elements. Like you've done in the first box (with the contest description). That way we're not stuck with a bunch of white space.

Ethan: I believe you can display: inline; them into oblivion if you want to. I even put that into the default style, to help those designers not in the mood to style lots of little boxes. Note that a two column design works well with main-content as one column, and sidebar as the other. It has been updated.