PDA

Click to See Complete Forum and Search --> : transition from tables to CSS

aaron.martinas
07-19-2007, 03:39 PM
hi,

tablesless design continues to baffle and confuse me. i know CSS pretty well, but i just dont get CSS layouts at all.

before you continue, the page im about to reference only works in firefox because IE doesnt allow you to change the innerHTML property of a TBODY/TR element. that is why i need to transistion to CSS instead of tables.

here is my site:

http://webfiles.dreamhosters.com/query_master/

i need to take that design, keep the exact same layout (more or less), but do it in CSS.

im not asking for anyone to recode it, but rather, to tell me how to create ONE row element to contain the data that it will contain, and how to create the "shell" (that is, my outer border) that will contain each row.

thanks for any insight!
andkhl
07-19-2007, 03:50 PM
.myRow {
font-family: ...whatever;
font-size: .... whatever;
padding: 1em 1em 1em 1em;
border: solid 1px #000000;
}





<body>
<p class="myRow">This is a line of text in a box</p>
</body>



This might be what you are looking for.... Maybe?
WebJoel
07-19-2007, 03:57 PM
Large site.
My initial thought was '-tables? -oh no!' but this is tabluar data to which I would include a <th> to 'columnize' the <td> elements under the correct table-headings.

If I understand you correctly, -you want a better way to do this and still retain the graphical elements of the double-green borders.
You are not far off. I doubt if I could 'say' how or 'what' I would try, so I will try some things on the other OS when I switch over (I am on a Linux system right now and do not have all the tools I need installed yet).

I did note a javascript problem:<script type-"text/javascript"> Note that the " - " should be a " = ".
Kor
07-19-2007, 04:05 PM
In my oppinion, even at this stage, CSS is not such a solid language to permit the full translation from tables to divs/spans controlled by CSS attributes. A hybrid administration (tables and DIVS) will save you time and money, at least for about 1-2 years...
aaron.martinas
07-19-2007, 05:21 PM
my problem is that my php backend isnt just giving me data that i then format with html, the php is giving me pre-formatted information that i append to an existing html page.

i see what youre saying. make php just give me data, and use my HTML page to format it the way it is supposed to be formatted. that is a MASSIVE recode for me.

this is what PHP passes:

echo "<tr onclick=\"javascript:loadwindow('$server', '$port');\" onmouseover=\"highlight(this, 0);\" onmouseout=\"highlight(this, 1);\">";
echo "<td bgcolor=#000000>" . $_SESSION['list']['a' . $serverIndex]["ServerName"] . "</td>";
echo "<td bgcolor=#000000>" . $_SESSION['list']['a' . $serverIndex]["Version"] . "</td>";
echo "<td bgcolor=#000000>" . $_SESSION['list']['a' . $serverIndex]["Mod"] . "</td>";
echo "<td bgcolor=#000000>" . $_SESSION['list']['a' . $serverIndex]["Mission"] . "</td>";
echo "<td bgcolor=#000000>" . $_SESSION['list']['a' . $serverIndex]["Type"] . "</td>";
echo "<td bgcolor=#000000>" . $_SESSION['list']['a' . $serverIndex]["Ping"] . "</td>";
echo "<td bgcolor=#000000>" . ($_SESSION['list']['a' . $serverIndex]["Password"] ? "<img src=images/locked.jpg alt=locked! width=6 height=7>&nbsp;" : "") . ($_SESSION['list']['a' . $serverIndex]["Dedicated"] ? "<img src=images/dedicated.jpg alt=dedicated! width=8 height=8>" : "") . "</td>";
echo "<td bgcolor=#000000>" . $_SESSION['list']['a' . $serverIndex]["Players"] ."/". $_SESSION['list']['a' . $serverIndex]["MaxPlayers"] . "</td>";
echo "<td bgcolor=#000000>" . $_SESSION['list']['a' . $serverIndex]["ServerIP"] . ":" . $_SESSION['list']['a' . $serverIndex]["ServerPort"] . "</td>";
echo "<td bgcolor=#000000>" . $_SESSION['list']['a' . $serverIndex]["CpuSpeed"] . "</td>";
echo "</tr>";

any idea how i can turn that into a independent span or div?
WebJoel
07-19-2007, 05:39 PM
....any idea how i can turn that into a independent span or div? No, -I have no ideas. This part is a bit beyond my skillset. I am not convinced that using TABLEs in this case is wrong. This is tabular data (from your site). I would use TABLE layout. :confused:
aaron.martinas
07-19-2007, 05:58 PM
shazbot!

... but upon further reading, it looks like andkhl has something i can perhaps work with.. the only problem there is that if one cell has data that is X in pixels, and the next row has a cell of the same datatype that is X + 20 pixes, i wouldnt get the same layout..

e.g.:


---------------------
| CELL A, ROW 1 |
---------------------------
| CELL A, ROW 2 |
---------------------------

and so forth