Bildergalerie mit CSS

[Julian]

Hallo allesamt,

Ich möchte eine kleine Bildergalerie mittels CSS umsetzen.

Die Anforderungen:

• eine bestimmte Anzahl an Bildern soll angezeigt werden (im Stil einer Matrix)
• wenn das Browserfenster kleiner gezogen wird soll sich die Matrix anpassen, d.h. die Bilder rutschen untereinander. Die Matrix wird schmäler und länger.

Mein bisheriger Code:

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

Soweit so schlecht: Die "Bilder-Divs" liegen rein visuell nicht mehr in der umrahmenden Div.

Ist-Zustand:

Soll-Zustand:

Was muss ich tun? (Ich hätte gerne die SuFu benutzt, wusste aber keine passenden Suchbegriff)

mfg Julian

[Cheatah]

Hi,

Was muss ich tun?

zur Berechnung von height:auto werden gefloatete Elemente nicht mit einbezogen, sofern das Element selbst nicht ebenfalls gefloatet ist oder eine von "visible" verschiedene overflow-Eigenschaft besitzt.

Cheatah

[Julian]

Danke für die schnelle Antwort!

zur Berechnung von height:auto werden gefloatete Elemente nicht mit einbezogen, sofern das Element selbst nicht ebenfalls gefloatet ist oder eine von "visible" verschiedene overflow-Eigenschaft besitzt.

klingt logisch. Die Angabe height: auto war auch mehr eine Verzweiflungstat.
Wie kann ich es sonst lösen?

[Gunnar Bittersmann]

Hello out there!

zur Berechnung von height:auto werden gefloatete Elemente nicht mit einbezogen, sofern das Element selbst nicht ebenfalls gefloatet ist oder eine von "visible" verschiedene overflow-Eigenschaft besitzt.

klingt logisch. Die Angabe height: auto war auch mehr eine Verzweiflungstat.
Wie kann ich es sonst lösen?

Die Antwort hast du eben selbst zitiert.

Es ist eben Cheatahs Art, Wichiges in Nebensätzen zu formulieren. ;-)

See ya up the road,
Gunnar

[Julian]

zur Berechnung von height:auto werden gefloatete Elemente nicht mit einbezogen, sofern das Element selbst nicht ebenfalls gefloatet ist oder eine von "visible" verschiedene overflow-Eigenschaft besitzt.

Die Antwort hast du eben selbst zitiert.

Es ist eben Cheatahs Art, Wichiges in Nebensätzen zu formulieren. ;-)

Ich kann leider weder float noch overflow der Äußeren Div ändern da Sie teil eines dreispaltigen Layouts ist.

(Diese Layoutvorlage von SELFhtml)

[Cheatah]

Hi,

Die Angabe height: auto war auch mehr eine Verzweiflungstat.

die Angabe von height:auto ist überflüssig, sofern keine gegenteilige Angabe existiert, und ändert auch nichts, da es der Initialwert ist.

Wie kann ich es sonst lösen?

Siehe Gunnars Antwort auf diese Deine Frage.

Cheatah

[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

[Julian]

So, nach langem rumgeteste doch ne Lösung gefunden.

Die Äußere Div wird nicht angetastet sondern es wird stattdessen doppelt verschachtelt. Somit bleibt mein Spaltenlayout unangetastet und trotzdem sieht es gut aus:

  
  <div id="aussen">  
   <div id="overflow">  
     <div class="bild"></div>  
     <div class="bild"></div>  
     <div class="bild"></div>  
     ...  
   </div>  
  </div>  

zugehörige css:

  
#overflow {  
  overflow: auto;  
  }  
.bild {  
  float: left;  
  }  

Danke an alle für die Hilfe!

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':

Das mache ich im Normalfall auch. Mein Codeschnipsel war nur quick'n'dirty hingerotzt. Trotzdem auch dir danke für deine Mühe!

[Gunnar Bittersmann]

Hello out there!

<div class="bild"></div>
     <div class="bild"></div>
     <div class="bild"></div>

Die Klasse "bild" soll wozu gut sein?

[...] selektiere die inneren mit dem Nachfahrenselektor '#foo div':

Das mache ich im Normalfall auch.

Warum tritt gerade der Normalfall nicht ein?

Mein Codeschnipsel war nur quick'n'dirty hingerotzt.

Der eben auch?

See ya up the road,
Gunnar

[Julian]

Hi Gunnar

<div class="bild"></div>

Die Klasse "bild" soll wozu gut sein?

Die Eigenschaften der Klasse werden auch außerhalb der Div verwendet
Außerdem finde ich die "direkte" Adressierung über Klassen in manchen Fällen übersichtlicher

Der eben auch?

mehr oder weniger auch, ja ;-)

mfg Julian

[JXR]

Hallo,

Die Anforderungen:

• eine bestimmte Anzahl an Bildern soll angezeigt werden (im Stil einer Matrix)
• wenn das Browserfenster kleiner gezogen wird soll sich die Matrix anpassen, d.h. die Bilder rutschen untereinander. Die Matrix wird schmäler und länger.

Machen das Bilder in HTML nicht so oder so? Sofern man das nicht unterbindet.

Soweit so schlecht: Die "Bilder-Divs" liegen rein visuell nicht mehr in der umrahmenden Div.

Drunter ein clearendes Element! Dann könnte es hinhauen.

mfg Julian