Bildergalerie mit CSS

[Gunnar Bittersmann]

Hello out there!

<div style="border-style: solid; width: 350px; height: auto;">
      <div style="width: 100px; background-color: silver; border-style: dashed; border-width: 1px; float: left;">

"Im Float-Modell wird eine Box [...] aus dem Fluss entfernt." [CSS2 §9.3]

"Nur untergeordnete Elemente im normalen Fluss werden [bei der Berechnung der Höhe] berücksichtigt (das heißt, Floating-Boxen [...] werden ignoriert [...])" [CSS2 §10.6.3]

<div style="width: 100px; background-color: silver; border-style: dashed; border-width: 1px; float: left;">

Warum gibst du dieselbem Styles für jedes 'div' an? Spätere Änderungen möchtest du dann an allen Stellen vornehmen? Außerdem machen Inline-Style-Angaben den Quelltext schlecht lesbar.

Verzichte auf 'style'-Attribute! Mache sämtliche Darstellungs-Angaben im zentralen Stylesheet! Gib dem äußeren 'div' eine ID "foo" und  selektiere die inneren mit dem Nachfahrenselektor '#foo div':

<div id="foo">  
  <div>  
    Platzhalter  
  </div>  
  <div>  
    Platzhalter  
  </div>  
</div>

Im Stylesheet:

#foo  
{  
  border-style: solid;  
  width: 350px;  
  height: auto;  
}  
  
#foo div  
{  
  width: 100px;  
  background-color: silver;  
  border-style: dashed;  
  border-width: 1px;  
  float: left;  
}

(Ich hätte gerne die SuFu benutzt, wusste aber keine passenden Suchbegriff)

"+float +Fluss"

See ya up the road,
Gunnar