Welcome Guest, Not a member yet? Register   Sign In
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




Theme © iAndrew 2016 - Forum software by © MyBB