Problem(e) mit CSS Bildergalerie

[Daniel S.]

Hallo Leute,

bin gerade dabei eine Bildergalerie in meine Homepage einzubauen.

Die Seite ist unter http://www.hh-system.com/danielstrigl/mabu/summer.html zu finden.

Ich möchte jetzt mehrere Zeilen mit Bildern, jeweils 3 in einer Reihe darstellen, leider ist das Resultat nicht wie gewünscht!

Erstens werden nur zwei Bilder nebeneinander dargestellt und nicht drei.
Als nächstes wird das Hintergrundbild nicht bis über die ganze Höhe dargestellt.
Weiters sollten dir drei Bilder auch zentriert dargestellt werden.

Vielleicht kann jemand von euch ja mal einen Blick auf den Source-Code werfen!

Im voaus bereits schon mal DANKE!

MFG Daniel.

[Detlef G.]

Hallo Daniel

Erstens werden nur zwei Bilder nebeneinander dargestellt und nicht drei.

Dann wird wohl der Platz nicht ganz reichen, um 3 Bilder nebeneinander
darzustellen.

Als nächstes wird das Hintergrundbild nicht bis über die ganze Höhe dargestellt.

Dadurch, dass die Bilder gefloatet sind, werden sie aus dem Elementfluss
genommen. Du müsstest innerhalb von #summerGallery nach den Bildern ein
clearendes Element einfügen. (clear (Fortsetzung bei Textumfluss))

Weiters sollten dir drei Bilder auch zentriert dargestellt werden.

  
ul.gallery {  
  margin: 0 auto; /* standardkonforme horizontale Zentrierung */  
  padding: 0;  
  border: 1px dashed black;  
}  

Das dürfte nichts nützen. Wo soll der margin gelassen werden, wenn .gallery
die gesamte Breite ausfüllt.

Wenn die Bilder keine Beschriftung bekommen, düfte es am einfachsten so
gehen:

  
ul.gallery {  
  padding: 0;  
  border: 1px dashed black;  
  text-align:center;  
}  
ul.gallery li {  
  list-style: none;  
  display:inline;  
}  
ul.gallery img {  
  margin: 5px;  
  padding: 0;  
  border: 1px dashed black;  
}  

Auf Wiederlesen
Detlef

[Daniel S.]

Hallo Detlef,

zuerst mal danke für deine rasche Hilfe!

Hab jetzt deinen Vorschlag mal in meinem CSS-File übernommen und ein wenig angepasst. Jetzt schauts so aus wie ich mir das vorgstellt habe, nur im IE gibts noch ein Problem!

Im IE beginnen die drei Tabellen weiter rechts als im FF, d.h. im FF haben jetzt alle drei Bilder nebeneinander Platz, im IE hingegen nicht!

Den Effekt sieht man recht gut durch den Rahmen der Tabellen, der im IE weiter rechts vom Navigationsmenü beginnt als im FF!

MFG Daniel.

[Detlef G.]

Hallo Daniel

Im IE beginnen die drei Tabellen weiter rechts als im FF, d.h. im FF haben jetzt alle drei Bilder nebeneinander Platz, im IE hingegen nicht!

Hast du dem Browser gesagt, welchen margin ul.gallery haben soll?

Wenn du bestimmte Werte für margin oder/und padding willst, dann musst du
diese IMMER selbst definieren. Du kannst dich NIE darauf verlassen, dass
alle Browser zufällig die von dir Gewünschten in ihrem Defaultstylesheet
verwenden.

Auf Wiederlesen
Detlef

[Daniel S.]

Danke, jetzt funktionierts ;-)