Zen Garden - Dev class ="?"

I'm not 100% sure what thread my question would fit into since it links with CSS, xhtml, and PHP. When I look at zengarden-sample.html (http://www.csszengarden.com/zengarden-sample.html) I noticed the code for browsing designs on the site template is:

<div id="lselect">
<h3 class="select"><span>Select a Design:</span></h3>
<!-- list of links begins here. There will be no more than 8 links per page -->
<ul>
<li><a href="/" title="AccessKey: a" accesskey="a">Sample #1</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>

<li><a href="/" title="AccessKey: b" accesskey="b">Sample #2</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
<li><a href="/" title="AccessKey: c" accesskey="c">Sample #3</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
<li><a href="/" title="AccessKey: d" accesskey="d">Sample #4</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>

<li><a href="/" title="AccessKey: e" accesskey="e">Sample #5</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
<li><a href="/" title="AccessKey: f" accesskey="f">Sample #6</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
<li><a href="/" title="AccessKey: g" accesskey="g">Sample #7</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>

<li><a href="/" title="AccessKey: h" accesskey="h">Sample #8</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
</ul>
</div>
But when you view the site (http://www.csszengarden.com/) the links are nothing like this.

So, my question is: How is this possible? would it be a php script changing the div class="a"?

I like the concept of making a semantic website, keeping the basic core page the same. And wanting todo the same with my website.

Iews

When you make a submission for CSS Zen Garden you don't get to touch the HTML. You can only submit a CSS file and the images it requires.

When you make a submission for CSS Zen Garden you don't get to touch the HTML. You can only submit a CSS file and the images it requires.

I'm not interested in creating a CSS layout for Zen Garden, just wanna understand how the creator went about changing the <div class/id="whatever">.

But thank you for your reply.

I'm not interested in creating a CSS layout for Zen Garden, just wanna understand how the creator went about changing the <div class/id="whatever">.

But thank you for your reply.Server-side scripting is used to generate the page.

Server-side scripting is used to generate the page.

ASP, PHP?

presentation should be controlled by css no matter whether the page was created in html, xhtml or by a server-side language.

bazz

Look in the HTML file or the source code for

zengarden-sample.html (http://www.csszengarden.com/zengarden-sample.html)

You'll see

<style type="text/css" media="all">
@import "sample.css";
</style>That is where you would embed your own CSS file. So all over that site are different pages all with the same identical HTML file just their own CSS file. Look around and check out each persons CSS file. These people are the epitome of awesome CSS programmers. They use the div id's to add their own images in CSS.

EDIT: Hmm I think that is relevant to what you're asking. I just got really confused when I read everything over.

presentation should be controlled by css no matter whether the page was created in html, xhtml or by a server-side language.

bazz
I agree. xHTML; page being my template, CSS; being the design of that template, and well I'm hoping to have a understanding of how to build a website that can be semantic site built with XML. I just wanted to have a basic understanding of how ZenGarden went about changing their coding server-side.

I'm only guessing but with my knowledge I would go about it by building a template design, kinda like WordPress's. having files like: header.php, sidebar.php, footer.php... and then adding functions to them to display whatever I need.

I just wanted to see if anyone else had some feed back.


Look in the HTML file or the source code for

zengarden-sample.html (http://www.csszengarden.com/zengarden-sample.html)

You'll see

<style type="text/css" media="all">
@import "sample.css";
</style>That is where you would embed your own CSS file. So all over that site are different pages all with the same identical HTML file just their own CSS file. Look around and check out each persons CSS file. These people are the epitome of awesome CSS programmers. They use the div id's to add their own images in CSS.

EDIT: Hmm I think that is relevant to what you're asking. I just got really confused when I read everything over.

I've been trying to rap my mind around how cssZenGarden changes the Links from the zengarden-sample.html (http://www.csszengarden.com/zengarden-sample.html)
I've spent alot of time googling the topic of PHP in hoping to find a way to create a webpage with minimum files as possible and being able to do as little editing as possible, to these core files later on when I wish to do a face lift of the design.

zengarden-sample.html (http://www.csszengarden.com/zengarden-sample.html)
looks like this:
<li><a href="/" title="AccessKey: b" accesskey="b">Sample #2</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>

The Source is: csszengarden (http://www.csszengarden.com/l)
<li><a href="?cssfile=/208/208.css&amp;page=0" title="AccessKey: b" accesskey="b">Sakura</a> by <a href="http://www.re-bloom.com/" class="c">Tatsuya Uchida</a></li>

I'm heading to the Library to pick up some books on PHP. I hope this post helps explains myself alittle more clearly. Thanks guys for your help so far!

I've been trying to rap my mind around how cssZenGarden changes the Links from the zengarden-sample.html (http://www.csszengarden.com/zengarden-sample.html)


Well the HTML you get to work with looks like:

<ul>
<li><a href="/" title="AccessKey: a" accesskey="a">Sample #1</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>

etc...


Of course you can't change any thing in the HTML. Their HTML, in which your style sheet is being attached to, looks more like (using a Wordpress example since you mentioned it first ;) ) :

<h3>Select a Design</h3>
<?php query_posts('showposts=8'); ?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href='<?php the_permalink() ?>'><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>


While the sample you have is hard coded, Theirs is a variable. It pulls the 8 most recent designs and dynamically builds the list through a loop.