Horizontale Navigation mit <li> trotzdem mehrzeilig?

[c_r]

Hallöle,

bräuchte als CSS-Anfänger mal Hilfe: Ich möchte eine horizontale Seitennavigation erstellen. Allerdings soll ÜBER jedem Menüeintrag ein Bild angezeigt werden, also etwa so:
(Bild1)   (Bild2)   (Bild3)
Navpunkt1 Navpunkt2 Navpunkt3

Tatsächlich siehts mit meiner ungeordneten Liste dann aber so aus:

(Bild1)
Navigation1
              (Bild2)
              Navigation2
                            (Bild3)
                            Navigation3

Wie müssten CSS-Einträge für <ul> und <li> gestaltet werden, damit ich dieses Problem umgehe? Es muss doch irgendwie möglich sein, "mehrzeilige" list items nebeneinander auf gleicher "Starthöhe" anfangen zu lassen...

Freue mich auf Eure Hilfe!
Der Controller

[Ashura]

Hallo c_r.

bräuchte als CSS-Anfänger mal Hilfe: Ich möchte eine horizontale Seitennavigation erstellen. Allerdings soll ÜBER jedem Menüeintrag ein Bild angezeigt werden, also etwa so:

Vermitteln diese Bilder einen inhaltlichen Zweck oder dienen sie nur dem Layout?

Tatsächlich siehts mit meiner ungeordneten Liste dann aber so aus:

[…]

Wie sieht das CSS dazu aus?

Es muss doch irgendwie möglich sein, "mehrzeilige" list items nebeneinander auf gleicher "Starthöhe" anfangen zu lassen...

Normalerweise genügen hierfür display:inline oder float.

Einen schönen Dienstag noch.

Gruß, Ashura

[c_r]

Hallo Ashura

Vermitteln diese Bilder einen inhaltlichen Zweck oder dienen sie nur dem Layout?

naja, sie dienen nur dem Layout. Layoutänderung kommt aber nicht in Frage (stammt nicht von mir).

Wie sieht das CSS dazu aus?

Ich hab etwas rumgeprickelt und die folgende Lösung scheint zu funktionieren:

...hier der (vereinfachte) HTML-Teil:

<ul>
  <li>
      <a href="wort.html"> <!-- erster Menüeintrag -->
         <img src="images/wort.jpg">
         <br />
         wort
      </a>
   </li>
   <li>
      ... <!-- zweiter Menüeintrag -->
   </li>
</ul>

...und hier meine neue und verbesserte CSS-Lösung:

li {
   position: relative;
   top: 10px;
   float: left;
   margin-right: 30px;
   display: inline;
   }

Damit scheint's zu klappen. Bitte kommentiert das mal - ist das brauchbares CSS?

Gruß
Der Controller

[Ashura]

Hallo c_r.

Vermitteln diese Bilder einen inhaltlichen Zweck oder dienen sie nur dem Layout?
naja, sie dienen nur dem Layout. Layoutänderung kommt aber nicht in Frage (stammt nicht von mir).

Dann haben die Grafiken nichts im Layout zu suchen.

Setze die jeweilige Grafik als Hintergrund für das jeweilige li-Element und verschiebe den Text mit Hilfe von padding-top. Des IEs wegen wird hier wohl für jedes li-Element eine ID erforderlich sein, ansonsten könntest du den Nachbarselektor nutzen.

Einen schönen Dienstag noch.

Gruß, Ashura

[Ashura]

Hallo Ingrid.

Dann haben die Grafiken nichts im Layout zu suchen.

So ein Unsinn: sie haben natürlich in der Struktur (HTML) nichts zu suchen.

Einen schönen Dienstag noch.

Gruß, Ashura