datenbankausgabe tebellarisch nach 4 td-tags umbruch

[KIUNES]

Hallo Leute,
also ich programmiere grade eine Gallerie, so jetzt lese ich die datenbank aus und lasse mir die Bilder auflisten, alles soweit kein problem. Nur sieht das in ner Gallerie doof aus, wenn die Bilder untereinander sind. Ich will das halt so machen, dass immer 4 Bilder nebeneinander sind und dann die tabelle durch ein tr-tag in die nächste zeile geht. Ich denke ihr wisst was ich meine kann mir da jemand helfen?

 

[Bieber]

ist das jetzt ein Scherz?

a) gibt es tausend kostenlose Gallerien im Netz die man verwenden kann
b) versteh ich grad überhaupt nicht, wo das Problem ist... vier Bilder hintereinander anzuzeigen und dann einen Zeilenumbruch zu machen sollte ja nun wirklich easy sein

vielleicht postest du mal deinen bisherigen Code, und sagst uns was du bisher probiert hast um das "Problem" zu lösen

 

[KIUNES]

Ja sicher gibt es das, aber ich will meine eigene machen, kann sein dass ich da ein denkfehler habe, aber kann man das nicht mit einer for schleife machen?

 

[ToM80]

Klar kann man dass.
Hier mal ein ganz simples Bsp auf PHP-Basis:

for ($x=0;$x<count($Bilder),$x++) {
  echo "<tr>";
      echo '<td><img src="pics/'.$Bilder[$x].'"></td>';
      $x++;
      echo '<td><img src="pics/'.$Bilder[$x].'"></td>';
      $x++;
      echo '<td><img src="pics/'.$Bilder[$x].'"></td>';
      $x++;
      echo '<td><img src="pics/'.$Bilder[$x].'"></td>';
  echo "</tr>;
}

 

[KIUNES]

Alles klar verständlich, aber wie mach ich, dass es danach in der nächsten zeile weitergeht?

 

[ToM80]

Das macht die FOR Schleife ;-)

Eine Erweiterung für das obige Beispiel:

$Bilder=Array();
$Bilder[]="bild1.jpg";
$Bilder[]="bild2.jpg";
$Bilder[]="bild3.jpg";
$Bilder[]="bild4.jpg";
$Bilder[]="bild5.jpg";
$Bilder[]="bild6.jpg";
$Bilder[]="bild7.jpg";
$Bilder[]="bild8.jpg";

 

[ZeitGeist]

Ich würde die Bilder in gleich große divs packen (größe definieren) und die divs floaten lassen. Dadurch kümmert sich der Browser selbständig um den Umbruch und du hast automatisch immer die volle Breite ausgenutzt.

Ansonsten deine Zählvariable modulo durch die Anzahl Bilder pro Zeile teilen und den Rest betrachten. Wenn dieser 1 ist, mußt du eine neue Zeile beginnen (also nen <tr> ausgeben) wenn dieser 0 ist mußt du eine Zeile beenden.

Toms Lösung geht natürlich auch, gefällt mir aber nicht so sehr, da dort "redundanter" Code steht.

 

[ToM80]

Mein Code ist ja auch nur ein simpeles Beispiel und da er nach vier Bilder und <tr><td> fragte hab ich es damit gemacht ;-)

 

[KIUNES]

Ich würde die Bilder in gleich große divs packen (größe definieren) und die divs floaten lassen. Dadurch kümmert sich der Browser selbständig um den Umbruch und du hast automatisch immer die volle Breite ausgenutzt.

Ansonsten deine Zählvariable modulo durch die Anzahl Bilder pro Zeile teilen und den Rest betrachten. Wenn dieser 1 ist, mußt du eine neue Zeile beginnen (also nen <tr> ausgeben) wenn dieser 0 ist mußt du eine Zeile beenden.

Toms Lösung geht natürlich auch, gefällt mir aber nicht so sehr, da dort "redundanter" Code steht.

Der Vorschlag hört sich gut an, leider bin ich nicht so fit in css, also definiere ich einfach die breite und höhe des div layers in dem sich das bild befindet ind setze die nebeneinander ja?

 

[ZeitGeist]

<div style="float:left; width:110px; height:110px;">
<img ....>
</div>
<div style="float:left; width:110px; height:110px;">
<img ....>
</div>

Wenn dein Bild nicht in einem Block-Element liegt, sondern in einem inline Element (zum Beispiel innerhalb eines a-Tags) dann brauchst du noch display:block;