Felix Riesterer: Unsortierte Liste anordnen

Beitrag lesen

Liebe(r) Bratkartoffl,

Du meintest sicherlich keine "undefinierte" Liste, denn soetwas gibt es nicht. Außerdem willst Du sicherlich wissen, wie man Dein Markup mit den Mitteln von CSS anders aussehen lässt - daher habe ich den Themenbereich auf CSS gesetzt.

<ul>

<li>Name<br>VName</li>
<li><img src="/images/logo.png" alt="logo"></li>
<li>Bezeichnung</li>
</ul>

  
Warum glaubst Du, dass dieses Markup für Deinen Zweck ideal ist?  
  
Offenbar handelt es sich um einen Datensatz zu einer Person, bestehend aus Vorname, Nachname und passendem Bild, welches für sich eine Bildunterschrift bekommt.  
  
Mein Vorschlag zum Markup wäre dieser hier:  
  
~~~html
<dl>  
    <dt><strong>Name</strong> VName</dt>  
    <dd><img ... /> Bildunterschrift</dd>  
</dl>

Mit dem obigen Code (der auch nicht viel besser als Deiner ist) stellst Du auf Code-Ebene zumindest einen Zusammenhang zwischen Name+VName und dem Bild her. Außerdem hat der Code den Vorteil, dass er auch ohne CSS vom Layout her schon ein Bisschen sinnvoll aussieht.

Jetzt kann man die Breite des <dl>-Elements (das hier wie auch Deine <ul> als Container wirkt) ausreichend weit machen, dass Bild und Vor- bzw. Nachname nebeneinander genügend Platz haben.

Wenn man das <strong>-Element mit display:block versieht, rutscht der Vorname in eine neue Zeile.

Wenn man das <dt>-Element links floatet und das <dd>-Element ausreichend schmal macht, dann sollten beide Elemente schön nebeneinander zu liegen kommen. Eventuell braucht das <dd>-Element noch  mit display:block - ich habe gerade keine Ahnung wie das im default stylesheet definiert ist.

Wie schon vorher das <strong>-Element kannst Du dem Bild auch display:block verpassen, mit margin:0 auto ist es dann schön mittig über seiner Bildunterschrift platziert. Diese Bildunterschrift bekommt man auch zentriert, wenn man dem <dd>-Element ein text-align:center gibt.

Liebe Grüße,

Felix Riesterer.

--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)