Listen mit Bildern

[Zeromancer]

Hallo,

ich hatte mal einen Codeschnipsel, den nag hier mal postete. Ich find's aber nicht mehr und kriege es auch nicht ganz passend selbst hin.

Problem:

Habe bisher eine Tabelle mit vier/fünf Spalten, die Bilder (verlinkt) nebst Beschreibungen (auch verlinkt) enthält (thumbnails). Obere Zeile enthält Bild, untere enthält Text (meist nur ein Wort).

In dem von mir gesuchten Beispiel wurde das mit der Hilfe einer Liste realisiert, so dass sich diese automatisch nach Platzangebot selbst auf die nächste Zeile verteilte.

Nun lasse ich die einzelnen <li> mittels float:left nebeneinander stehen. Sobald ich aber ein <br> in den einzelnen Listenpunkt bringe, um den Text zu setzen, bricht mir das Konstrukt zusammen.

Hat jemand 'ne Idee, wie man's besser macht? Bietet sich die Angabe von festen Beiten für das einzelne <li>-Element an? Hat jemand schon mal so etwas realisiert?

Mit freundlichen Grüßen

André

[Zeromancer]

Hallo,

und danke, bin fündig geworden.

Mit freundlichen Grüßen

André

[Matthias Jütte]

Hallo!

Dann poste doch noch kurz die Lösung, interessiert mich und vielleicht auch andere, die den Thread mal im Archiv finden.

Gruß

Matthias

[Zeromancer]

Hallo,

hier mal die Grundstruktur:

CSS
---

#content img {width:100px; height:75px; border:1px solid black; display:block;}
#content li {float:left; margin:1em; list-style-type:none;}
#content ul {display:inline; text-align:center; margin:auto;}

HTML
----

<div id="content">

<ul>
<li><a href="seite.html">Text<img src="" alt=" /></a></li>
<li><a href="seite.html">Text<img src="" alt="" /></a></li>
<li><a href="seite.html">Text<img src="" alt="" /></a></li>
<li><a href="seite.html">Text<img src="" alt="" /></a></li>
<li><a href="seite.html">Text<img src="" alt="" /></a></li>
<li><a href="seite.html">Text<img src="" alt="" /></a></li>
<li><a href="seite.html">Text<img src="" alt="" /></a></li>
<li><a href="seite.html">Text<img src="" alt="" /></a></li>
<li><a href="seite.html">Text<img src="" alt="" /></a></li>
<li><a href="seite.html">Text<img src="" alt="" /></a></li>
<li><a href="seite.html">Text<img src="" alt="" /></a></li>
<li><a href="seite.html">Text<img src="" alt="" /></a></li>

</ul>
</div>

Das Beispiel wurde mal von 'nag' gebracht und hat beim IE 6.0 noch ein paar Macken. Kann aber auch am Aufbau meiner restlichen Seite liegen?! Muss ich erst noch schauen.

Mit freundlichen Grüßen

André

[Ingo Turski]

Hi,

wozu hier eine Liste, die weder als solche dargestellt wird, noch einen einer Liste ensprechenden Inhalt hat?
Du könntest die IMGs auch einfach ohne inline belassen und ohne Tags drumherum.

freundliche Grüße
Ingo

[at]

Hallo.

wozu hier eine Liste, die weder als solche dargestellt wird, noch einen einer Liste ensprechenden Inhalt hat?

Woher kennst du die Bilder?
MfG, at

[Ingo Turski]

Hi,

Woher kennst du die Bilder?

Wieso sollte ich die kennen? Die Problembeschreibung im Ausgangsposting
  "... Bilder (verlinkt) nebst Beschreibungen (auch verlinkt) enthält (thumbnails)."
ließ mich auf die Art der Bilder schließen, womit ich natürlich auch daneben liegen kann.

freundliche Grüße
Ingo

[Zeromancer]

Hallo,

Wieso sollte ich die kennen? Die Problembeschreibung im Ausgangsposting

Es geht um die Startseite für unsere Galerie-Seiten. Mehrere Veranstaltungen werden per Vorschau angezeigt und dann erst auf die eigentlichen Veranstaltungsseiten weitergeleitet (Vorschau?: http://www.bbl-online.com/bilder/index.shtml).

Mit freundlichen Grüßen

André

[at]

Hallo.

Mehrere Veranstaltungen werden per Vorschau angezeigt und dann erst auf die eigentlichen Veranstaltungsseiten weitergeleitet (Vorschau?: http://www.bbl-online.com/bilder/index.shtml).

Eine schöne Liste.
MfG, at

[Zeromancer]

Hallo at,

Eine schöne Liste.

Na da warten wir mal noch auf eine Antwort von Ingo. ;-)

Mit freundlichen Grüßen

André

[at]

Hallo.

Na da warten wir mal noch auf eine Antwort von Ingo. ;-)

Eigentlich habe ich zwar gar keine Lust, das Thema einmal mehr durchzukauen, aber ich konnte einfach nicht widerstehen.
MfG, at

[Ingo Turski]

Hi,

Eine schöne Liste.

Na da warten wir mal noch auf eine Antwort von Ingo. ;-)

nunja, Dein erstes Beispiel mit den Mozilla-Screenshots könnte ich mir noch als Liste vorstellen, aber diese Thumbnail-Präsentation eher nicht - wobei ich durchaus auch andere Sichtweisen nicht als falsch ansehen würde. Für mich ist eine Liste dann gerechtfertigt, wenn diese auch ohne CSS-Formatierung - also untereinander mit den Listenpunkten - noch eine sinnvolle Darstellung ergibt. In diesem Fall würde ich aufgrund der zugeordneten Beschreibungen eher eine Definitionsliste sehen.

Aber mal ein Beispiel, wie Bilder alleine ganz simpel - hintereinander im Quelltext ohne umschließende Tags - wie gewünscht angezeigt werden können: http://www.1ngo.de/foto/dionysos.html.
Die Anzeige von Bildern (auch noch unterschiedlicher Größe) mit Text würde ich heute vermutlich nicht mehr so wie in http://www.td-rot-weiss-duesseldorf.de/sportbereich/std-paare.html zu lösen versuchen (auch wenn's klappt - sind mir einfach zuviele divs drin).

freundliche Grüße
Ingo

[Zeromancer]

Hallo Ingo,

Aber mal ein Beispiel, wie Bilder alleine ganz simpel - hintereinander im Quelltext ohne umschließende Tags - wie gewünscht angezeigt werden können: http://www.1ngo.de/foto/dionysos.html.
Die Anzeige von Bildern (auch noch unterschiedlicher Größe) mit Text würde ich heute vermutlich nicht mehr so wie in http://www.td-rot-weiss-duesseldorf.de/sportbereich/std-paare.html zu lösen versuchen (auch wenn's klappt - sind mir einfach zuviele divs drin).

Ich habe mir die Seiten mal in meine Bookmarks gelegt. Ich hoffe, dass sie nächste Woche noch da sind... ;-)

Danke und

mit freundlichen Grüßen

André

[Ingo Turski]

Hi,

Ich habe mir die Seiten mal in meine Bookmarks gelegt. Ich hoffe, dass sie nächste Woche noch da sind... ;-)

nanu ... was hast Du denn für Probleme mit Deinen Bookmarks? ;-)

freundliche Grüße
Ingo

[Zeromancer]

Hallo Ingo,

wozu hier eine Liste, die weder als solche dargestellt wird, noch einen einer Liste ensprechenden Inhalt hat?
Du könntest die IMGs auch einfach ohne inline belassen und ohne Tags drumherum.

Kann dir noch nicht ganz folgen. Mit der Liste habe ich ein flexibles Werkzeug, um entsprechend des vorhandenen Platzangebotes eine Struktur anzubieten und eine gewisse Art von Symmetrie zu erreichen. Die Nutzung einer Tabelle scheidet aus, da ich dort eine Spaltenanzahl vorgeben muss und diese sich nicht 'umbricht'.

Geht es eleganter? Gedacht hatte ich an einen alten Entwurf meiner Seiten (http://www.andre-zotzmann.de/sites/www/browser/browser_mozilla.shtml) Bin für jede Anregung dankbar.

Mit freundlichen Grüßen

André

[Matthias Jütte]

Hallo André!

Na du könntest doch genauso wie einen <li>-Tag <span> verwenden. Und wenn du statt dem <img>-Tag diesem <span>-Tag eine feste Breite gibst sollten auch die <span>-Tags bei display:inline automatisch umbrechen.

Gruß

Matthias

[Zeromancer]

Hallo Matthias,

Na du könntest doch genauso wie einen <li>-Tag <span> verwenden. Und wenn du statt dem <img>-Tag diesem <span>-Tag eine feste Breite gibst sollten auch die <span>-Tags bei display:inline automatisch umbrechen.

Eine Idee, die ich mal ausprobieren werde. Danke.

Mit freundlichen Grüßen

André

[MudGuard]

Hi,

Na du könntest doch genauso wie einen <li>-Tag <span> verwenden. Und wenn du statt dem <img>-Tag diesem <span>-Tag eine feste Breite gibst sollten auch die <span>-Tags bei display:inline automatisch umbrechen.

Nein, das kann nicht funktionieren. Wenn display auf inline gesetzt ist (und es sich nicht um ein replaced-Element handelt), müssen width/height ignoriert werden, man kann dann also keine feste Breite mehr vorgeben.

cu,
Andreas

[nag]

Hallo,

kannst du mir den link zu diesem Thread im Archiv geben, wo ich das verzapft habe? ;)

mfg NAG

[Zeromancer]

Hallo,

kannst du mir den link zu diesem Thread im Archiv geben, wo ich das verzapft habe? ;)

ich suche grad noch. Ein erster Hinweis findet sich unter http://forum.de.selfhtml.org/archiv/2004/3/76856/#m443146

Mit freundlichen Grüßen

André