• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Alternate row colours

#1
[eluser]Bainzy[/eluser]
Hi everyone,

i have being looking around for a way of making alternate row colors, the only information i can find is on the table class ... however i do not want to use tables to make my listings .. i use divs to contain my information, how can i alternate row colours using divs ??

Any help would be greatly appreciated.

Chris

#2
[eluser]n0xie[/eluser]
If it's tabular data, why not use a table?

#3
[eluser]Bainzy[/eluser]
because every website i code i use pure css and divs for .. i never use the table element of html just the way i work i guess

Maybe if i give some more information on the project.

Basically i am making a property listings website, now the front page has 10 of the latest properties listed, and all i wanted to do was have the alternating colours so people can easily distinguish the different properties.

eg

Code:
<div id="row1">
// Property info
</div>

<div id="row2">
// Property info
</div>

#4
[eluser]n0xie[/eluser]
Semantically speaking, imho the table element is correct if you are talking about 'rows' or in your case it should be a list. But to each his own.

Code:
&lt;?php
$zebra = NULL;
foreach($list as $value):
  $zebra = (is_null($zebra)) ? 'someclassname' : NULL;
  echo "<div class='$zebra'>some stuff here</div>";
endforeach;
?&gt;

#5
[eluser]alphane[/eluser]
What's wrong with just giving the alternative div a new css class when printing each property?

Code:
$alt = 'alt';
*start loop*
    &lt;?
    if ($alt) {
        $alt = '';
    }
    else
    {
        $alt = 'alt';
    }
    ?&gt;
    <div class="property &lt;?=$alt;?&gt;">
        //content...
    </div>

*do loop*

So you're looking for an output of
Code:
<div class="property"></div>
<div class="property alt"></div>
<div class="property"></div>
<div class="property alt"></div>
<div class="property"></div>

#6
[eluser]alphane[/eluser]
n0xie's version is tidier :-)

#7
[eluser]Eric Barnes[/eluser]
Just use the alternator function. Part of the string helper:
http://ellislab.com/codeigniter/user-gui...elper.html

#8
[eluser]sdotsen[/eluser]
You can do the same for CSS classes ...

Code:
$i=0;
    
$colors = array('blue', 'white');

foreach( $students as $student )
{
<insert code seen below - CI forum strips the HTML code>
}

Quote:echo '<tr bgcolor="'.$colors[$i++ % 2].'"><td>'.$student.'</td></tr>';

#9
[eluser]Bainzy[/eluser]
hi everyone and thanks for the comments and the help. I ended up useing alphances code and it worked a charm so i will leave it like that for the time being.

Thanks again for the fast responces and great help !

#10
[eluser]Johan André[/eluser]
How the hell can this:

Code:
$alt = 'alt';
*start loop*
    &lt;?
    if ($alt) {
        $alt = '';
    }
    else
    {
        $alt = 'alt';
    }
    ?&gt;
    <div class="property &lt;?=$alt;?&gt;">
        //content...
    </div>

*do loop*

...be cleaner than this:

Code:
&lt;? foreach($items AS $item) : ?&gt;
   <div class="&lt;?=alternator('odd', 'even');?&gt;">
      // content
   </div>
&lt;? endforeach; ?&gt;

Just asking... Smile


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme ¬© 2014 iAndrew  
Powered By MyBB, © 2002-2019 MyBB Group.