Abstand von Listenelementen

[renezulu]

Hallo,
ich will eine Adressliste mit Passfoto und Personenbeschreibung erstellen. Das Foto links und der Text rechts dazu angeordnet. Wenn nun der Text länger als das Foto ist, fliesst der Text unter dem Bild weiter. Was muss ich tun, damit der Text in einer Spalte rechts vom Foto bleibt und trotzdem der Abstand zum folgenden Listenelement bleibt. Ich versuchte den Text per CSS nach rechts einzurücken, aber dann ist der Abstand zum folgenden Listenelement unterschiedlich.
Oder gibt es einen besseren Weg so etwas aufzubauen?

Vielen Dank für Eure Hilfe.

Auszug aus dem CSS:

Code: Alles auswählen

.liste li {
   clear: both;
   font: 1em/1.5em  Arial, Verdana, Tahoma, sans-serif;
   padding: 15px 0 20px 0;
   border-top: 1px dotted #ccc;
   list-style-type: none;
}

.links {
   float: left;
   margin: 0 15px 20px 0;
}

.linksliste {
   margin: 10px 0 20px 200px;
}


Auszug aus der HTML-Datei:

Code: Alles auswählen

<ul class="liste">
   <li>
      <img src="../bilder/foto1.jpg" alt="foto1" width="180" height="220" class="links" />
      <h5 class="linksliste">Anton Muster</h5>
      <p class="linksliste">Muster Straße 1 <br />
      Musterstadt 1<br />
      33 Jahre  <br />
      Beruf: Testberuf<br /><br />
      <strong>Interesssen: </strong>Hobby, Hobby, Hobby, Hobby,</p>
   </li>
   <li>
      <img src="../bilder/foto2.jpg" alt="foto2" width="180" height="220" class="links" />
      <h5 class="linksliste">Bert Muster</h5>
      <p class="linksliste">Muster Straße 2 <br />
      Musterstadt 2<br />
      33 Jahre  <br />
      Beruf: Testberuf<br /><br />
      <strong>Interesssen: </strong>Hobby, Hobby, Hobby, Hobby,Hobby, Hobby, Hobby, Hobby,Hobby, Hobby, Hobby, Hobby,Hobby, Hobby, Hobby, Hobby <br />
      <strong>Meinung: </strong>Blablabla, Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla </p>
   </li>
   <li>
      <img src="../bilder/foto2.jpg" alt="foto2" width="180" height="220" class="links" />
      <h5 class="linksliste">Bert Muster</h5>
      <p class="linksliste">Muster Straße 2 <br />
      Musterstadt 2<br />
      33 Jahre  <br />
      Beruf: Testberuf<br /><br />
      <strong>Interesssen: </strong>Hobby, Hobby, Hobby, Hobby,Hobby, Hobby, Hobby, Hobby,Hobby, Hobby, Hobby, Hobby</p>
   </li>


Grüße.

[Daniel]

moin
versuch doch mal die folgenden display eigenschaften auf die list elemente anzuwenden:
The display declaration

[renezulu]

Hallo Daniel,
Danke für Deine Antwort. Ich versuchte die display-Eigenschaft list-item einzufügen. Das brachte keine Änderung, oder ich hab es falsch eingesetzt:
1. Versuch beim CSS:

Code: Alles auswählen

.liste li {
   display: list-item;
   clear: both;
   font: 1em/1.5em  Arial, Verdana, Tahoma, sans-serif;
   padding: 15px 0 20px 0;
   border-top: 1px dotted #ccc;
   list-style-type: none;
}


2. Versuch beim HTML-Doc:

Code: Alles auswählen

<ul class="liste" style="display: block;">
   <li  style="display: list-item;">
      <img src="../bilder/foto1.jpg" alt="foto1" width="180" height="220" class="links" />
      <h5 class="linksliste">Anton Muster</h5>
      <p class="linksliste">Muster Straße 1 <br />
      Musterstadt 1<br />
      33 Jahre  <br />
      Beruf: Testberuf<br /><br />
      <strong>Interesssen: </strong>Hobby, Hobby, Hobby, Hobby,</p>
   </li>
   <li style="display: list-item;">
      <img src="../bilder/foto2.jpg" alt="foto2" width="180" height="220" class="links" />
      <h5 class="linksliste">Bert Muster</h5>
      <p class="linksliste">Muster Straße 2 <br />
      Musterstadt 2<br />
      33 Jahre  <br />
      Beruf: Testberuf<br /><br />
      <strong>Interesssen: </strong>Hobby, Hobby, Hobby, Hobby,Hobby, Hobby, Hobby, Hobby,Hobby, Hobby, Hobby, Hobby,Hobby, Hobby, Hobby, Hobby <br />
      <strong>Meinung: </strong>Blablabla, Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla </p>
   </li>
   <li  style="display: list-item;">
      <img src="../bilder/foto2.jpg" alt="foto2" width="180" height="220" class="links" />
      <h5 class="linksliste">Bert Muster</h5>
      <p class="linksliste">Muster Straße 2 <br />
      Musterstadt 2<br />
      33 Jahre  <br />
      Beruf: Testberuf<br /><br />
      <strong>Interesssen: </strong>Hobby, Hobby, Hobby, Hobby,Hobby, Hobby, Hobby, Hobby,Hobby, Hobby, Hobby, Hobby</p>
   </li>


Nach längerem probieren bin ich auf overflow:hidden; gekommen, was ich in das css zu .list li schrieb – das brachte mir die gewünschte Änderung.

Dank und Grüße