Definitionsliste mit nebeneinander-Elementen

[nelly_]

HI

Ich hab ne _horizontale_ Navigation gebastelt:

[code lang=html]
<ul>
   <li>Bilder

<ul>
         <li>Bild 1</li>
         <li>Bild 2</li>
      </ul>
   </li>

<li>Texte</li>
</ul>
[code lang=html]

Im Stylesheet sorge ich dafür, dass die Manüpunkte horizontal angeordnet sind, also wie ein Header-Menü-Balken.

Nun dachte ich mir, müsste das ganze doch auch theoretisch mit ner Definitionsliste möglich sein? Dann könnte ich mir nämlich die ganzen Listen sparen.

Leider funktioniert folgendes Beispiel nicexteht:

[code lang=html]
<dl>
   <dt>Home</td>
      <dd>Bild 1</dd>
      <dd>Bild 2</dd>
   <dt>Texte</dt>
</dl>
[/dl]

Leider bringt ein dt { float:left } überhauptnichts. Die einzelnen Definitionen bleiben weiterhin untereinander.

Hat jemand vielleicht eine gute idee?

[JürgenB]

Hallo nelly_,

Leider bringt ein dt { float:left } überhauptnichts. Die einzelnen Definitionen bleiben weiterhin untereinander.

schon mal versucht, die dd auch floaten zu lassen?

Gruß, Jürgen

[Robert Bienert]

Moin!

Im Stylesheet sorge ich dafür, dass die Manüpunkte horizontal angeordnet sind, also wie ein Header-Menü-Balken.

Leider funktioniert folgendes Beispiel nicexteht:

<dl>
   <dt>Home</td>
      <dd>Bild 1</dd>
      <dd>Bild 2</dd>
   <dt>Texte</dt>
</dl>

>   
> Hat jemand vielleicht eine gute idee?  
  
Hast du schon `display: inline;`{:.language-css} ausprobiert:  
  
~~~css
dt, dd {  
    display: inline;  
}

Schönen Sonntag,
Robert

[Detlef G.]

Hallo nelly

<ul>
   <li>Bilder

<ul>
         <li>Bild 1</li>
         <li>Bild 2</li>
      </ul>
   </li>

<li>Texte</li>
</ul>

  
Hier befindet sich die innere Liste innerhalb eines Listenpunktes. Wenn du diesen Listenpunkt floatest, dann bildet er einen Block, in dem die Nachfahrenelemente wieder beliebig angeordnet werden können.  
  

> ~~~html
  

> <dl>  
>    <dt>Home</td>  
>       <dd>Bild 1</dd>  
>       <dd>Bild 2</dd>  
>    <dt>Texte</dt>  
> </dl>  
> </dl>  
> 

Hier sind die dd-Elemente _keine_ Nachfahren von dt.

Leider bringt ein dt { float:left } überhauptnichts. Die einzelnen Definitionen bleiben weiterhin untereinander.

Damit wird dt gefloatet, was auf die dd-Elemente keinen Enfluss hat, wenn diese im normalen Fluss liegen. Lediglich der Inlineinhalt dieser fließt um das dt-Element. Wenn jetzt dd auch gefloatet würde, würden diese auch nebeneinander angezeigt werden, also alle Elemente in einer Reihe (solange der Platz reicht.

Auf Wiederlesen
Detlef