Bilder als Liste

[Nedsch]

Hello,

Schritt für Schritt zu meiner ersten hompage. In einer Frage vorher hatte ich schon gelernt, Bilder unereinander zum scrollen am besten als Liste anlegen. Es sind hauptsächlich Querformat-Fotos mit der gleichen Breite untereinander. Mit einer Bildunterschrift. Aber an einer Stelle habe ich 2 Hochformat-Fotos. Diese möchte ich nebeneinander stellen. Ich dachte ich nehme dafür einen eigenen Div-Container als Listeneintrag.

Hat auch so weit geklappt. Allerdings ist der Abstand Bildunterschrift zu Bild nicht identisch. Wie lege ich das am schlausten und einfachsten an? Wie kriege ich einen definierten Abstand? Soll ich die Bildunterschrift als eigenen Listeneintrag machen?

  <li><div><img src="images/beauty_kelly_01.jpg" alt="Beauty" width="418" height="630" class="bilder_links" /><img src="images/beauty_kelly_02.jpg" alt="Beauty" width="418" height="630" class="bilder_rechts" /></div>
    Fotos: Kelly Ealy</li>
  <li><img src="images/pool.jpg" width="850" height="569" alt="Pool" />Foto: Claudia Summ</li>

#content ul li {
    list-style-type: none;
    line-height: 25px;
    margin-bottom: 70px;
}
.bilder_links {
    float: left;
}
.bilder_rechts {
    float: right;
}

 

[Quiss42]

AW: Bilder als Liste

Setze das letzte Bild auch in ein <div>, dann werden alle gleich behandelt. Wenn das umgebende Element keine feste Breite hat, rutscht die Bildunterschrift aber zwischen die floatenden Bilder, wenn man das Browserfenster breiter zieht. Ein <div style="clear: both"> um die Bildunterschrift verhindert das.

 

[Nedsch]

AW: Bilder als Liste

Setze das letzte Bild auch in ein <div>, dann werden alle gleich behandelt.

Danke schon mal. Dieser Gedanke ist mir auch gekommen. Dachte nur, das wird etwas "unsauber". Wie würde ein Profi dieses ja doch relativ simple Layout wohl anlegen?

 

[Myhar]

AW: Bilder als Liste

Ein Profi versucht, immer das semantisch korrekte Element für seine Aufgabe zu verwenden. In deinem Fall würde ich überlegen, ob nicht vielleicht ein Zeilenumbruch (konkret ein <br/>) auch genügen würde.
Damit will ich aber nicht sagen, dass die Lösung mit einem <div> falsch ist, es ist lediglich eine andere Herangehensweise (und wenn es mit einem <br/> funktioniert, hat man auch gleich wieder etwas im Quellcode eingespart :-D )

L. G.

Edit:
Man kann das ganze natürlich auch so sehen: Jedes Bild ist ein eigenes Element in einer Aufzählung, sprich es verdient auch sein eigenes <li> Element. Jedoch ist dann die Frage, ob die Bezeichnung des Autors nicht vielleicht in einer übergeordneten Liste stehen soll, da es ja eine Aufzählung der Fotos von einem Fotografen ist. Das würde semantisch wohl dem hier entsprechen:

<ul>
  <li>Fotograf1
     <ul>
        <li>Bild 1</li>
        <li>Bild 2</li>
     </ul>
  </li>
  <li>Fotograf2
     <ul>
        <li>Bild 1</li>
        <li>Bild 2</li>
     </ul>
  </li> <!-- etc. -->
</ul>

Das ist aber nur ein Beispiel um zu zeigen, wie man das umsetzen kann. Um die von dir gewünschte Darstellung (Bilder über Text) zu erreichen, wären wohl noch zusätzliche Elemente nötig. Auch kann es sein, dass das vielleicht nicht 100%ig die Struktur ist, welche du abbilden willst. Das ist ein schnell aus dem Kopf hingeschriebenes Beispiel.

L. G.