logic behind making the <li>=>divs alternate colors?

[student101]

It seems my <li>'s need to be coded by hand not sure.

All I need is the logic behind making the <li>=>divs alternating colors dynamically

<div class="post_body nicelist">
<ol>

<li class="palt"> <!-- background: #eee;-->
<div class="comment_author left">
<span class="comment"><?php echo $row_rsnews['txtHeading']; ?></span></div>
<div class="clearer"></div>
<div class="body">
<p><?php echo nl2br($row_rsnews['memdescription']); ?></p>
</div>
</li> <!--color end background: #eee;-->


<li id="comment-256"> <!--comment num random; background: #fff;-->
<div class="comment_author left">
<span class="comment"><a href="#">Elementum</a></span>
<div class="date"><a href="#">December 21st, 2007 at 12:46 pm</a></div>
</div>
<div class="clearer"></div>
<div class="body">
<p>Comments are cool!</p>
</div>
</li> <!--color end background: #fff;-->

</ol>
</div>


Cheers

[rangana]

You might find this basic example useful:


<ul>
<?php
for($i=0;$i<10;$i++)
{
if($i%2==0)
echo '<li style="background:#eee;">Content of Even list</li>';
else
echo '<li style="background:#fff;">Content of Odd List</li>';
}
?>
</ul>

[student101]

I managed to figure it out, atually really simple.

<style type="text/css">
li.palt {background: #eee;}
</style>

<ol>
<?php do {
$cls = ($cls =='palt' ? '' : 'palt' ); // Switch the background color. ?>
<li class="<?php echo $cls ; ?>">
<div class="comment_author left">
<span class="comment">some_text</span></div>
<div class="clearer"></div>
<div class="body">
<p>some_text</p>
</div>
</li>
<?php } while ($row_rsnews = mysql_fetch_assoc($rsnews)); ?>
</ol>

Thanks

[boogyman]

you shouldn't have an empty class, so my only suggestion would be to replace


$cls = ($cls =='palt' ? '' : 'palt' ); // Switch the background color. ?>
<li class="<?php echo $cls ; ?>">


with



<li<?php echo $cls=='palt' ? '>' : ' class="palt">'; ?>


which would produce



<li>


and



<li class="palt">


respectively

[student101]

Ok fair enough, not good to have an empty class;
Your method doesn't actually work.
Fixed:
$cls = ($cls =='palt' ? 'alt' : 'palt' ); // Switch the background color. ?>

Cheers

[Medyman]

For CSS aficionados, you can do this with pure CSS (assuming you're using a modern browser that supports advanced CSS selectors (http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/)). Look into the nth-child selector (http://reference.sitepoint.com/css/pseudoclass-nthchild).

[student101]

For CSS aficionados, you can do this with pure CSS (assuming you're using a modern browser that supports advanced CSS selectors (http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/)). Look into the nth-child selector (http://reference.sitepoint.com/css/pseudoclass-nthchild).
My problem is more dynamic, the data comes from the DB and it needs to change accordingly, including the OLD guys who are viewing has IE5.5 / 6, they for some odd reason are happy with that.

Neat idea.

Cheers

[boogyman]

For CSS aficionados, you can do this with pure CSS (assuming you're using a modern browser that supports advanced CSS selectors (http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/)). Look into the nth-child selector (http://reference.sitepoint.com/css/pseudoclass-nthchild).
that is a CSS3 property and at best will not be supported by IE for probably another two years, although if history is proving anything they may take 3/4 if they ever support it LOL



My problem is more dynamic, the data comes from the DB and it needs to change accordingly, including the OLD guys who are viewing has IE5.5 / 6, they for some odd reason are happy with that.
if i used IE regularly i would use verision 6 myself. I do not like the new interface of 7 and 8

[Medyman]

that is a CSS3 property and at best will not be supported by IE for probably another two years, although if history is proving anything they may take 3/4 if they ever support it LOL

It's getting there. At least IE8 will have full CSS 2.1 compliance. They really seem to be focused on meeting the requirements of the standards community. Good for them, I say.

[Twey]

There's nothing wrong with having an empty class. The modulo method is more flexible and doesn't require an extra variable.

[Medyman]

Just ran across MoreCSS (http://yellowgreen.de/morecss)today. It seems to allow support for n-th child selectors (in it's own syntax) in a cross-browser way. It is JS based, FYI.

For zebra-styling:
http://morecss.yellowgreen.de/documentation/properties/add-class/

[student101]

It works fine like it does, thanks.

Cheers