nicht angemeldet
Galerie
Hallo zusammen,
ich möchte mit HTML/CSS eine Bildergalerie erstellen. Die Bilder müssen aber zusätzlich einen Quellvermerk enthalten. Diesen möchte ich als Bildunterschrift angeben. Also habe ich mir prinzipiell die Inhalt der Seite wie folgt zusammen gestellt:
<div class="ThumbContainer">
<img class="ThumbImage" src="..." />
<div class="ThumbCopyright">(Foto: ...)</div>
</div>
<div class="ThumbContainer">
<img class="ThumbImage" src="..." />
<div class="ThumbCopyright">(Foto: ...)</div>
</div>
...
Die Klasse ThumbContainer hat im Moment den Stil "float:left;", was prinzipiell funktioniert. Wenn man sich das Ergebnis unter http://www.feuerwehr-holtsee.de/Bilder/RoterHahn3.php einmal anschaut, dann stellt man fest, dass es ein Problem gibt, wenn die Bilder und damit die Container-Divs nicht alle gleich hoch sind. (Das Fenster mal so aufziehen, dass oben vier Bilder gerade eben mal zu sehen sind. Es wird noch schlimmer, wenn noch mehr Bilder unterschiedliche Höhe haben.
Am liebsten hätte ich diese Container als Inline-Elemente (style="display: inline;"). Das bekomme ich aber nicht hin: Nach jedem Bild erfolgt ein Umbruch. Und ein starres Layout mit drei oder vier Bildern pro Zeile in einer Tabelle begeistert mich auch nicht.
Hat jemand eine Idee, wie ich es anders machen kann (oder den Hinweis: "Was du willst, geht nicht.")
Claus
-
Hallo :)
Ich betrachte die Seite im Firefox.
Ich denke, das Problem sind die Bildunterschriften.
Wenn die Seite so verkleinert ist, dass die Unterschrift länger ist als
das Bild, dann schiebt die den Nachbarcontainer zur Seite.
Die Unterschriften müssen umgebrochen werden.Ausserdem fällt mir auf, das bei Ansicht im MSIE
die Bilder nicht umgebrochen werden, dort sind stets 5 Bilder pro Zeile zu sehen,
egal wie man zoomt.Solange keine andere Lösung gefunden ist, würde ich
hochkant stehende Bilder einfach in eine eigene Zeile
und/oder ans Ende der Galerie setzen.mfg
cygnus--
Die Sache mit der Angel und dem ><o(((°> hat in der Wüste einen Haken ...-
Hallo :)
Es wäre wohl auch wichtig zu erwähnen,
dass die Bilder beim Zoomen nur im MSIE vergrößert und verkleinert werden,
im Firefox aber stets die gleiche Größe behalten.mfg
cygnus
---
Hallo,
Es wäre wohl auch wichtig zu erwähnen,
dass die Bilder beim Zoomen nur im MSIE vergrößert und verkleinert werden,
im Firefox aber stets die gleiche Größe behalten.Der aktuelle Firefox 3.0 vergrössert standardmässig beim Zoomen
(Ansicht -> Zoom -> Vergrössern/Verkleinern oder Ctrl-Taste drücken
[.de: STRG] und gleichzeitig am Mausrad drehen) Text _und_ Bilder.
(So wie es auch der MS IE 7.0 beim Zoomen mit dem Mausrad tut.
Und Opera schon [fast] seit Menschengedenken. ;-)In Firefox 3.0 kann man allerdings auch einstellen:
Ansicht -> Zoom -> Nur Text zoomen.
Dann bleiben die Bilder unverändert.mfg Thomas
-
-
Hallo :)
Ich betrachte die Seite im Firefox.
Ich denke, das Problem sind die Bildunterschriften.
Wenn die Seite so verkleinert ist, dass die Unterschrift länger ist als
das Bild, dann schiebt die den Nachbarcontainer zur Seite.
Die Unterschriften müssen umgebrochen werden.Ausserdem fällt mir auf, das bei Ansicht im MSIE
die Bilder nicht umgebrochen werden, dort sind stets 5 Bilder pro Zeile zu sehen,
egal wie man zoomt.Solange keine andere Lösung gefunden ist, würde ich
hochkant stehende Bilder einfach in eine eigene Zeile
und/oder ans Ende der Galerie setzen.mfg
cygnusHallo cygnus,
ich meinte nicht das Ändern der Schriftgröße, sondern das Vergrößern bzw. Verkleinern des Browserfensters durch Ziehen am rechten Rand. Zieht man es, so, dass das vierte Bild gerade eben angezeigt wird, dann wird das letzte Bild neben das "hochkante" Fenster platziert. Ich hätte es aber gerne am Anfang einer neuen Zeile. Noch viel schlimmer würde es aussehen, wenn die Bilder unterschiedlich hoch wären. Da reicht schon ein Pixel.Es funktioniert, wenn die Container-Divs und die Bildunterschriften nicht da sind, da dann inline-Elemente vorhanden sind, die selbständig umbrechen und sich die Zeilenhöhe nach dem maximalen Element richtet.
Claus
-
Hallo :)
Jetzt habe ich das verstanden.
Ich weiss nicht, ob das möglich ist, da hilft Dir hoffentlich ein Fachmann hier im Forum weiter.Ich habe so eine Pixelkante mal umgangen mit style="clear: both"
Das ist dann aber eine "dauerhafte" Lösung.mfg
cygnus--
Die Sache mit der Angel und dem ><o(((°> hat in der Wüste einen Haken ...
-
-
-
Hi,
<div class="ThumbContainer">
<img class="ThumbImage" src="..." />
<div class="ThumbCopyright">(Foto: ...)</div>
</div>
<div class="ThumbContainer">
<img class="ThumbImage" src="..." />
<div class="ThumbCopyright">(Foto: ...)</div>
</div>
...Du kannst übrigens auf die Klassen verzichten, wenn Du Nachkommen-Selektoren verwendest und nicht nur DIVs benutzt.
dass es ein Problem gibt, wenn die Bilder und damit die Container-Divs nicht alle gleich hoch sind.
Dazu gibt es zwei Lösungen:
1. die Thumbnails alle in der gleichen Größe oder zumindest Höhe erstellen. Aus einem Hochkanntbild kannst Du auch einen Querformat-Ausschnitt verwenden.
2. Zusätzliche Container zum Auffüllen fehlender Höhen verwenden.freundliche Grüße
Ingo-
Hallo Ingo,
<div class="ThumbContainer">
<img class="ThumbImage" src="..." />
<div class="ThumbCopyright">(Foto: ...)</div>
</div>
<div class="ThumbContainer">
<img class="ThumbImage" src="..." />
<div class="ThumbCopyright">(Foto: ...)</div>
</div>
...
Du kannst übrigens auf die Klassen verzichten, wenn Du Nachkommen-Selektoren verwendest und nicht nur DIVs benutzt.Stimmt, gute Idee. Mache ich aber erst, wenn ich das Problem gelöst habe, da es ja - wie du bemerkt hast - Randbedingungen gibt.
dass es ein Problem gibt, wenn die Bilder und damit die Container-Divs nicht alle gleich hoch sind.
Dazu gibt es zwei Lösungen:- die Thumbnails alle in der gleichen Größe oder zumindest Höhe erstellen. Aus einem Hochkanntbild kannst Du auch einen Querformat-Ausschnitt verwenden.
Möchte ich nicht so gerne. Der Nutzer soll gerne das gesamte Bild sehen und kleiner möchte ich das Hochkantbild eigentlich auch nicht machen.
- Zusätzliche Container zum Auffüllen fehlender Höhen verwenden.
Das klingt gut. Hast du mal einen Tipp oder ein Beispiel, wie man es konkret machen kann?
Claus
-
Hi,
- Zusätzliche Container zum Auffüllen fehlender Höhen verwenden.
Das klingt gut. Hast du mal einen Tipp oder ein Beispiel, wie man es konkret machen kann?
http://td-duesseldorf-rot-weiss.de/sportbereich/bsw-archiv.html z.B. - aufwendig und nicht ganz schön, aber funktioniert.
freundliche Grüße
Ingo-
- Zusätzliche Container zum Auffüllen fehlender Höhen verwenden.
Das klingt gut. Hast du mal einen Tipp oder ein Beispiel, wie man es konkret machen kann?
http://td-duesseldorf-rot-weiss.de/sportbereich/bsw-archiv.html z.B. - aufwendig und nicht ganz schön, aber funktioniert.Hallo Ingo,
danke für den Tipp. In der Tat recht aufwändig und nicht gerade Platz sparend, wenn Bilder auch hochkant sein können, aber die meisten nicht sind.Hast du die Galerie "zu Fuß" aufgebaut oder machst du es zur Laufzeit via PHP?
Übrigens: Ich bin mit dem Firefox 3.0 ohne Javascript unterwegs. Dann sehe ich unter den Bildern in der Mitte den Eintrag "aktuellen Standard" mit einem Link zu news030526.html. Ich schätze mal, so ist das von dir nicht gewollt.
Claus
-
Hi,
Hast du die Galerie "zu Fuß" aufgebaut oder machst du es zur Laufzeit via PHP?
manuell - sind auch nur gelegentliche Änderungen zu machen.
Übrigens: Ich bin mit dem Firefox 3.0 ohne Javascript unterwegs. Dann sehe ich unter den Bildern in der Mitte den Eintrag "aktuellen Standard" mit einem Link zu news030526.html. Ich schätze mal, so ist das von dir nicht gewollt.
nö - und ich wüßte auch nicht, wie das passieren könnte, denn dieser Text steht zum einen am Anfang des Quelltextes und ist zum anderen über display:none; visibility:hidden; ausgeblendet.
Kann es sein, dass Du im User-CSS der Klasse "Layout" Eigenschaften zuweist?freundliche Grüße
Ingo-
Übrigens: Ich bin mit dem Firefox 3.0 ohne Javascript unterwegs. Dann sehe ich unter den Bildern in der Mitte den Eintrag "aktuellen Standard" mit einem Link zu news030526.html. Ich schätze mal, so ist das von dir nicht gewollt.
nö - und ich wüßte auch nicht, wie das passieren könnte, denn dieser Text steht zum einen am Anfang des Quelltextes und ist zum anderen über display:none; visibility:hidden; ausgeblendet.
Kann es sein, dass Du im User-CSS der Klasse "Layout" Eigenschaften zuweist?Eigentlich nicht. ABER... Ich war mal im abgesicherten Modus ohne JS auf der Seite. Dann sehe ich das nicht. Scheint irgendein Addon zu sein, dass dieses "Problem" verursacht.
Claus
-
Hi,
Ich war mal im abgesicherten Modus ohne JS auf der Seite. Dann sehe ich das nicht. Scheint irgendein Addon zu sein, dass dieses "Problem" verursacht.
muss aber ein dummes sein, wenn es pauschal die Klasse "Layout" formatiert...
freundliche Grüße
Ingo-
Hi,
Ich war mal im abgesicherten Modus ohne JS auf der Seite. Dann sehe ich das nicht. Scheint irgendein Addon zu sein, dass dieses "Problem" verursacht.
muss aber ein dummes sein, wenn es pauschal die Klasse "Layout" formatiert...Naja, NoScript. Es gibt m.E. drei Erweiterungen für den FF, die ich als Must-Have bezeichnen würde: MR Tech Toolkit (aka Local Install), Update Notifier und NoScript.
Keine Ahnung warum sie es so machen, aber es hat bestimmt einen Grund.
Grüße
Claus
-
-
-
-