long live CSS...but how?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
gotlisch
Forum Newbie
Posts: 23
Joined: Wed Jan 11, 2006 8:37 am

long live CSS...but how?

Post by gotlisch »

Hi Guys,

I'm trying to step away from using tables, and only use css. So far I'm very happy with my choice, but I ran into a little problem.
How can I generate a list combineing php and CSS? Cause if I do it the same way I used to do it with tabels the elements will just be
stacked untop of each other...


Cheers

Micheal
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

Personally, I generally keep my css static, as an external file. Makes it easier to maintain, imho.

But you can use php to generate css.. I'm not sure what you mean about it 'stacking'.. share some example code?
User avatar
Skittlewidth
Forum Contributor
Posts: 389
Joined: Wed Nov 06, 2002 9:18 am
Location: Kent, UK

Post by Skittlewidth »

I guess gotlisch is talking about how to avoid using tables, and getting divs to line up horizontally.

I've found this the trickiest technique to master and its the one thing that makes me want to give up on CSS again and again.

In order to get a series of divs to line up horizontally you need the "float" attribute. However, after you have finished a row you then need to use
"clear:both" to stop the elements continuing to stack up horizontally. Then you can start a new line of floating divs beneath for the next row.

At least, thats the theory. I often find that my text doesn't line up properly, especially when I'm trying to style forms. You will also need to close up the padding and margins or things will be very spaced out.

Another alternative that might work is to use css styled lists.

This article is helpful: http://www.alistapart.com/articles/multicolumnlists/
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Moved to Client Side.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

First thing. Tables are tables... they are still valid XHTML so don't try to stop using them all together. The only place you should use tables is for presenting data... that's what they're intended for. If you're pulling data from a database and producing a list it's most likely the correct place to make use of a table.

However, you can produce things dynamically with XHTML yes. The entire layout on this website for instance, I could render with DIV tags and a bit of CSS. More complex structures would get very tricky (nesting fluid layouts inside of fluid layouts).

As for a simple two column, table-style layout try using techniques shown on a list apart for negative margins ( http://www.alistapart.com/articles/negativemargins ):

Code: Select all

<?php

$data = array(
    array('Column 1 value 1', 'Column 2 value 1'),
    array('Column 1 value 2', 'Column 2 value 2'),
    array('Column 1 value 3', 'Column 2 value 3')
);

foreach ($data as $array)
{
    ?>
    
    <div style="width: 100%;">
        <div style="width: 100%; margin-left: -200px; float: right;">
            <div style="margin-left: 200px;">
                <?= $array[0] ?>
            </div>
        </div>
        <div style="width: 200px; float: left;">
            <?= $array[1] ?>
        </div>
        <div style="height: 0; font-size: 0; clear: both;">&nbsp;</div>
    </div>
    
    <?php
}

?>
The layout will look the same as a borderless table as so:

Code: Select all

<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td width="200">Column 1 value 1</td>
        <td>Column 2 value 1</td>
    </tr>
    <tr>
        <td width="200">Column 1 value 2</td>
        <td>Column 2 value 2</td>
    </tr>
    <tr>
        <td width="200">Column 1 value 3</td>
        <td>Column 2 value 3</td>
    </tr>
</table>
To acheive the appearance of cell background colors and borders you need to use something they refer to as "Faux Pas" columns on a list apart. That article covers that too ;)
gotlisch
Forum Newbie
Posts: 23
Joined: Wed Jan 11, 2006 8:37 am

Thanx!

Post by gotlisch »

Hi guys!

Thanx for all the respns...I actually came to the conclusion that a combination of CSS and tables were the best solution. I basically integrated my table into the rest of the CSS structure which works great.

Tables are great for when you're generating "lists" from a database, why over do it.


Cheers

Michael

In the future I will K.I.S.S
Post Reply