suit: Text unter dem Bild anzeigen

Beitrag lesen

SELF-Forum

Text unter dem Bild anzeigen

suit Homepage des Autors
– Informationen zu den Bewertungsregeln

Hehe. Ok ok... Ich werde mich da nachher mal dran versuchen... Bis jetzt habe ich das zwar noch nich so ganz verstanden, aber kommt zeit kommt rat... ;)

wichtig ist, dass du deinen geist säuberst ;) nein im ernst: denke nicht an das "wie soll es aussehen" sonder denke daran "was sagt es aus" oder "was ist es, was ich grade habe"

sämtliche dinge, die das aussehen betreffen haben in html nix zu suchen - alles was du an aussehen in html hineinbringst, macht dir nur arbeit

die bilder untereinander oder nebeneinander ist mit dem richten html-schnipsel  unabhängig vom unfang deiner galerie mit wenigen css-zeilen erleidigt

untereinander und nebeneinander ist prinzipiell nur ein display: block; gegen ein float: left; zu tauschen (beim li-element)

ob du nun 2 bilder nebeneinander haben willst und dann eine neue zeile oder 3 oder 7 ist völlig egal - auch eine dynmanische anzahl je nach größe des elternelements ist möglich

eine starre variante mit kompliziertem html zeigt zb die google bildersuche - hier ist immer eine fixe anzahl an bildern nebeneinander (egal wie groß der viewport des browsers ist)

der vollständigkeit halber hier nochmal - die container für deine bilder sollten so aussehen - angenommen 3 bilder pro zeile, 5 bilder in summe

  
<ul class="galerie">  
  <li>[BILD]</li>  
  <li>[BILD]</li>  
  <li>[BILD]</li>  
  <li>[BILD]</li>  
  <li>[BILD]</li>  
<ul>

die ungute variante mit tabelle sähe etwa so aus

  
<table class="galerie">  
  <tr>  
    <td>[BILD]</td>  
    <td>[BILD]</td>  
    <td>[BILD]</td>  
  </tr>  
  <tr>  
    <td>[BILD]</td>  
    <td>[BILD]</td>  
    <td>&nbsp;</td>  
  </tr>  
<table>

wenn du nun 2 bilder pro zeile haben willst, sieht die tabelle so aus

<table class="galerie">
  <tr>
    <td>[BILD]</td>
    <td>[BILD]</td>
  </tr>
  <tr>
    <td>[BILD]</td>
    <td>[BILD]</td>
  </tr>
  <tr>
    <td>[BILD]</td>
    <td>&nbsp;</td>
  </tr>
<table>[/code]

der code der liste ändert sich dadurch nicht, der bleibt gleich

am anfang sieht die tabellen-variante immer einfacher aus, aber wenn du etwas ändern willst, oder dynamik brauchst, bricht dir der augenscheinlich schnelle und einfache weg das genick ;)

Beitrag melden
–
Informationen zu den Bewertungsregeln