PHP uitvoer in CSS, niet meer in tabel.

[Dionysus007281]

Ik heb een php script dat een overzicht van al m'n DVD's uit een Mysql Db haalt. Dit script heb ik ingebouwd in een HTML pagina, en de uitvoer wordt in een tabel weergegeven.

Nu ben ik bezig m'n hele site om te zetten naar CSS, en wil dit dus ook graag in CSS doen.

Dit is het oude:

code:

<?php
$quotedtitel = mysql_escape_string($titel);
$query = "SELECT titel,cast,episodes,genre,speelduur,regio,aantal FROM dvd WHERE titel like '%$quotedtitel%' ORDER BY titel";
$result = mysql_query($query);
while ($row = mysql_fetch_array($result)) {

?>
    <tr>
    <td><div align="left"><?php echo $row["titel"]; ?></div></td>
    <td><div align="left"><?php echo $row["cast"]; ?></div></td>
    <td><div align="left"><?php echo $row["episodes"]; ?></div></td>
    <td><div align="left"><?php echo $row["genre"]; ?></div></td>
    <td><div align="right"><?php echo $row["speelduur"]; ?></div></td>
    <td><div align="right"><?php echo $row["regio"]; ?></div></td>
    <td><div align="right"><?php echo $row["aantal"]; ?></div></td>
    </tr>

Hiermee wordt een tabel gegenereerd die alle DVD's laat zien, dus een tabel met 534 regels.

Als ik nu het volgende doe:

code:

<?php
$quotedtitel = mysql_escape_string($titel);
$query = "SELECT titel,cast,episodes,genre,speelduur,regio,aantal FROM dvd WHERE titel like '%$quotedtitel%' ORDER BY titel";
$result = mysql_query($query);
while ($row = mysql_fetch_array($result)) {

?>
<div id="leftcontent">
<p class="dark">
<?php echo $row["titel"]; ?>
</p>
</div>

'

dan zie ik heel snel alle 534 titels voorbijflitsen in het hokje van 190x20 dat in de CSS is aangegeven voor class="dark", waarna de laatste titel blijft staan.

Mijn vraag: Hoe kan ik een volledige lijst laten zien met 534 regels, zonder dat ik voor alle regels een aparte regel in HTML moet maken?
En als we toch bezig zijn, het "uitvoerhokje" moet real-time aangepast worden qua formaat, omdat de ene titel langer is dan de andere.

Misschien ontkom ik in deze niet aan tabellen?

[ Voor 19% gewijzigd door Dionysus007281 op 13-10-2004 14:02 ]

[RobzQ]

Probeer dit eens:

code:

<?php
$quotedtitel = mysql_escape_string($titel);
$query = "SELECT titel,cast,episodes,genre,speelduur,regio,aantal FROM dvd WHERE titel like '%$quotedtitel%' ORDER BY titel";
$result = mysql_query($query);

Echo '<div id="leftcontent">';

while ($row = mysql_fetch_array($result)) {
   Echo '<p class="dark">'.$row["titel"].'</p>';
}

Echo '</div>';
?>

[crisp]

Waarom zou je hier geen tabel voor gebruiken? Voor zover ik kan zien lijkt het me tabulaire data en is een tabel dus juist de meest logische constructie.

[RM-rf]

crisp schreef op 13 oktober 2004 @ 14:12:
Waarom zou je hier geen tabel voor gebruiken? Voor zover ik kan zien lijkt het me tabulaire data en is een tabel dus juist de meest logische constructie.

Een andere optie zou wmb een DL zijn (Definition List):
enkel kent deze enkel opties voor DT (Definition Term) en DD (Definition Description):
het is niet de bedoeling opvolgende DD's te gebruiken, maar misschien is

code:

<DL>
    <DT><?=$row["titel"] ?>
    <DD>
        <UL>
            <LI class="cast"> <?=$row["cast"] ?>
            <LI class="episodes"> <?=$row["episodes"] ?>
            <LI class="genre"> <?=$row["genre"] ?>
            <LI class="speelduur"> <?=$row["speelduur"] ?>
            <LI class="regio"> <?=$row["regio"] ?>
            <LI class="aantal"> <?=$row["aantal"] ?>
</DD>

Het is wel enigszins lelijk om zo twee geneste Lists te gebruiken:
een tabel zou ik enkel kiezen als de opzet is als

code:

<TABLE>
<THEAD>
   <TR>
       <TH>title
       <TH>cast
       <TH>episodes
       <TH>genre
       <TH>speelduur
       <TH>regio
       <TH>aantal
<TBODY>
   <TR>
       <TD class="cast"><?=$row["cast"] ?> 
       <TD class="episodes"><?=$row["episodes"] ?>
        <TD class="genre"> <?=$row["genre"] ?>
        <TD class="speelduur"><?=$row["speelduur"] ?>
        <TD class="regio"><?=$row["regio"] ?>
        <TD class="aantal"><?=$row["aantal"] ?>
</TABLE>

(voor de voorbeelden eventjes HTML4.01 gebruikt)

Voor het werkelijke probleem in de topicstart, dat alle 'dark'-boxes over elkaar lijken te verschijnen...
Heb je misschien position: absolute; gebruikt?

[crisp]

Een definition list mag best meerdere definition descriptions bevatten voor een term:

HTML:

<dd>
  <dt>bus</dt>
  <dd>motorvoertuig bedoelt voor het vervoer van meer dan 8 personen</dd>
  <dd>cilindervormig hol voorwerp waarin iets opgeborgen kan worden</dd>
</dd>

[Dionysus007281]

Ik ben iets verder. Ik had helemaal niet door dat ze allemaal bovenop elkaar geplaatst werden. position:absoluet weg en het lijkt al iets beter.

Verder heb je idd wel gelijk dat tabellen uitermate geschikt zijn, maar ik ben net 2 dagen met CSS, en wil dus gewoon wat klooien.
Ik moet bv. nog uitzoeken hoe ik tabellen EN CSS kan combineren, en m'n javascript werkt ook niet meer.
Ik snap er nog niet alles van , maar dat maakt leren leuk, nietwaar?

[Civil]

_{@crisp volgens mij mag een definition description geen definition term bevatten (dd > dl)}

@TS Net zoals je classes gebruikt voor die ene paragraaf, kun je deze ook gebruiken voor tabellen, rijen en cellen. Je stuctuur van een tabel zoals in je startpost is zoals al duidelijk is gemaakt wel goed (let op tips van RM-rf).
Als je al die inline styling zoals align-left weghaald, en dit oplost met css (text-align: left;) en ook de breedte van de cellen (width), kleur van de tekst (color), border rond de cellen (border), backgroundcolor van de cellen (background-color) und so wieder ermee opgeeft. Krijg je een hele schone html structuur, die je volledig vorm kan geven door middel van css.

Onthoud in ieder geval altijd dat je de juiste html structuur gebruikt voor wat je aan data presenteerd. Tabulaire data doe je dus in een tabel, daar ga je geen gekke fratsen voor verzinnen.