nicht angemeldet
Bildergalerien an Bildschirmbreite ausrichten
Hallo zusammen
Ich würde gern eine Bildergalerie (20-30 Bilder) so einrichten, dass sie immer die maximale Bildschirmbreite ausnutzt, d.h. wenn ein Besucher nur 800x600 hat, dann sieht man halt nur 3 Bilder nebeneinander, dafür aber insgesamt z.B. 8 Reihen. Wenn jemand 1200x800 hat dann sieht er 5 Bilder nebeneinander und dafür nur 6 Reihen. Ich weiß nicht wie ich es anders beschreiben soll was ich meine - einfach dass sich die Galeriebreite dynamisch an die Bildschirmbreite anpasst. Darüber hinaus nützt es mir allerdings nichts, wenn ich die einzelnen Bilder im Quellcode nur einfach untereinander schreibe - dann "kleben" sie nämlich auch aneinander. Ich hätte gern, dass sie immer einen gewissen Abstand zueinander haben - also ähnlich wie man das in einer Tabelle mit "cellspacing" und "cellpadding" regeln kann.
Vielen Dank schon mal für eure Hilfe!
-
Versuch es mit http://de.selfhtml.org/html/referenz/elemente.htm#div@title=divs und http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float
Mfg kawinga
--
ie:% fl:| br:^ va:} ls:& fo:| rl:( n4:( ss:| de:] js:| ch:? sh:( mo:| zu:)-
Lieber Robert,
Versuch es mit http://de.selfhtml.org/html/referenz/elemente.htm#div@title=divs und http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float
das muss nicht sein. Wenn die <img>-Elemente alle in einem gemeinsamen Elternelement stehen, dann reicht bereits ein simples margin oder auch von mir aus padding, um gehörigen Abstand zwischen die Bilder zu bekommen. Ein <div> ist da absolut unnötig! Erst wenn Du gruppieren willst (siehe mein zweites Code-Beispiel in meinem Antwort-Thread), dann hat ein <div> wirklich einen Sinn.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Felix
das muss nicht sein. Wenn die <img>-Elemente alle in einem gemeinsamen Elternelement stehen, dann reicht bereits ein simples margin oder auch von mir aus padding, um gehörigen Abstand zwischen die Bilder zu bekommen. Ein <div> ist da absolut unnötig! Erst wenn Du gruppieren willst (siehe mein zweites Code-Beispiel in meinem Antwort-Thread), dann hat ein <div> wirklich einen Sinn.
Du hast natürlich (wie üblich ;)) vollkommen recht. Aber meistens benötigt man eine "Bildunterschrift" oder ähnliches, deshalb habe ich den Denkanstoss mit
floatgegeben.Mfg kawinga
--
ie:% fl:| br:^ va:} ls:& fo:| rl:( n4:( ss:| de:] js:| ch:? sh:( mo:| zu:)
-
-
-
Liebe(r) annabolika,
wie sieht denn Dein Quellcode momentan aus?
Du hast im Themenbereich "HTML/XHTML" gepostet und in dem gibt es keine Lösung für Dein Problem, da HTML bzw. XHTML nichts mit dem Aussehen Deiner Seite zu tun hat. (X)HTML ist nur für die inhaltliche Struktur Deiner Seite zuständig - sonst nichts.
Eine Lösung für Dein Problem gibt es aber mit CSS. Hast Du davon schon gehört? Du erwähnst es nämlich nicht...
Beispiel (als Trockenübung):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>Galerie-Test</title> <style type="text/css">/* CSS-Code für nebeneinanderliegende Bilder */ .bildergalerie img { margin: 0px 10px 10px 0px; /* Abstände eines Bildes im Uhrzeigersinn */ }</style> </head> <body> <h1>Galerie-Test</h1> <p class="bildergalerie"> <img src="" alt="erstes Bild" /> <img src="" alt="zweites Bild" /> ... <img src="" alt="letztes Bild" /> </p> </body> </html>Ich gehe bei meinen Bildergalerien noch einen Schritt weiter und ermögliche eine Bildunterschrift, indem ich für jedes Bild einen eigenen Textabsatz verwende, in dem zuerst das Bild und dann seine Bildunterschrift stehen (als einfacher Textinhalt im Absatz). Das könnte dann so aussehen: Beispiel-Galerie. Dazu braucht es einen leicht anderen Code. Code-Beispiel für die Beispiel-Galerie (vereinfacht):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>Galerie-Test</title> <style type="text/css">.bildergalerie p { float: left; width: 200px; /* Breite für einen Kasten */ margin: 3px; /* Außenabstand eines Kastens */ border: 1px solid green; /* zum Testen einen grünen Rand */ } .bildergalerie img { display: block; /* mittig im Kasten ausrichten */ margin: 0px auto 5px; padding: 0px; }</style> </head> <body> <h1>Galerie-Test</h1> <div class="bildergalerie"> <p><img src="" alt="erstes Bild" /> Ein Bild...</p> <p><img src="" alt="zweites Bild" /> Noch ein Bild...</p> ... <p><img src="" alt="letztes Bild" /> Das letzte Bild.</p> </div> </body> </html>Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Tachchen!
<div class="bildergalerie">
<p><img src="" alt="erstes Bild" /> Ein Bild...</p>
<p><img src="" alt="zweites Bild" /> Noch ein Bild...</p>
...
<p><img src="" alt="letztes Bild" /> Das letzte Bild.</p>
</div>Für meinen Geschmack ist das eine glasklare Liste.
Und wenn man die Beziehung zwischen Bild und (beschreibendem!) Text
erkennbar machen würde, wäre das sicher auch kein Fehler.Gruß
Die schwarze Piste
-
Liebe schwarze Piste,
Für meinen Geschmack ist das eine glasklare Liste.
ja, der Gedanke dränst sich auf, wenn man sich den Code so anschaut.
Und wenn man die Beziehung zwischen Bild und (beschreibendem!) Text
erkennbar machen würde, wäre das sicher auch kein Fehler.Denkst Du an eine Definitionsliste? Wie in meinem Gästebuch?
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Tachchen!
Denkst Du an eine Definitionsliste?
Ich glaube, mein Semantikgewissen, ertrüge sowohl die Definitionsliste
als auch eine zweizeilige Tabelle. Erstere dürfte flexibler in der
Gestaltung sein, letztere anzeigesicherer in alten Browsern und evtl.
flexibler im Umgang mit unterschiedlich großen Bildern.Gruß
Die schwarze Piste
-
-
-
Hi,
Du hast im Themenbereich "HTML/XHTML" gepostet und in dem gibt es keine Lösung für Dein Problem, da HTML bzw. XHTML nichts mit dem Aussehen Deiner Seite zu tun hat.
das stimmt so nicht!
Natürlich sollte das Aussehen über CSS festgelegt werden, es ist aber dennoch möglich,das gewünschte Ergebnis ausschließlich über HTML zu erreichen. Z.B. die Bilder in ein <div align="center"> packen oder vielleicht auch die Bilder über die Attribute hspace und vspace auf Abstand halten (noch nicht ausprobiert). Und zur Not geht es sogar in Strict mit (geschützten) Leerzeichen. ;-)freundliche Grüße
Ingo
-