Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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 I noticed the code for browsing designs on the site template is:
    Code:
    	<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 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
    Last edited by Iews; 02-26-2008 at 06:45 AM. Reason: Adding more details.

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #3
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hemebond View Post
    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.

  • #4
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Iews View Post
    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.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #5
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hemebond View Post
    Server-side scripting is used to generate the page.
    ASP, PHP?
    Last edited by Iews; 02-26-2008 at 08:00 PM.

  • #6
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    presentation should be controlled by css no matter whether the page was created in html, xhtml or by a server-side language.

    bazz

  • #7
    New Coder
    Join Date
    Oct 2005
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Look in the HTML file or the source code for

    zengarden-sample.html

    You'll see

    Code:
    <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.

  • #8
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bazz View Post
    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.


    Quote Originally Posted by DaKKie View Post
    Look in the HTML file or the source code for

    zengarden-sample.html

    You'll see

    Code:
    <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
    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
    looks like this:
    Code:
    <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
    Code:
    <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!

  • #9
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Quote Originally Posted by Iews View Post
    I've been trying to rap my mind around how cssZenGarden changes the Links from the zengarden-sample.html
    Well the HTML you get to work with looks like:
    Code:
    <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 ) :
    Code:
    <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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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