CSS-Menü

[orangebud]

Hallo miteinander,

ich möchte ein Menü wie folgt zusammenstellen:

[Anfangsbild][Leiste][Endbild]

Die Leiste per UL habe ich bereits erfolgreich umgesetzt, jedoch weiss ich nicht wie ich das Anfangs- und Endbild bündig an die Liste anfüge.

1. Versuch

<img src="bild_anfang" /><ul>...</ul><img src="bild_ende">

der 2. Versuch folgt nun per Div:

<div id="menue">
    
    <div id="menue_l"><img src="media/img/menue/menue_l.png" /></div>
    <div id="menue_m">
            
        <ul id="navi">
                
            <li>Start</li>
            <li>Thema 1</li>
            <li>Thema 2</li>

        </ul>
                                
    </div>
    <div id="menue_r"><img src="media/img/menue/menue_r.png" /></div>
                            
</div>

Hat jemand ne Idee??

[onemorenerd]

Die zusätzlichen DIVs bringen schon mal gar nichts. Weg damit.

Bündig heißt ohne Abstand? Dann sollten die UL und die Bilder weder padding noch margin haben. Eventuell musst du die Bilder dafür mit display:block versehen. Normalerweise sind Bilder nämlich inline Elemente, werden also in einer Textzeile gerendet und dadurch entsteht ein Weißraum unter dem Bild (der Raum für die Unterlängen von Text).

Alternativ könntest du die Bilder auch als background-image setzen. Dann brauchst du natürlich doch ein DIV um die UL oder eine besondere Auszeichnung des ersten und/oder letzten LI.

[orangebud]

Besondere Auszeichnung klingt gut... folgende Ausgangssituation:

HTML:

<div id="menue">
                        
    <ul id="navi">

        <li><a href="">Start</a></li>
        <li><a href="">Service</a></li>
        <li><a href="">Reservierung</a></li>
                                        
    </ul>
                                                
</div>

und das dazugehörige CSS:

#navi { 

    float:right;
    list-style:none;
    height:41px;
    background-image: url(../media/img/menue/menue_m.png); 

}
			  
#navi li { 

    display:inline; 

}

#navi li a { 

    color:#FFFFFF; 
    padding:0 20px 0 20px; 

}

...wie soll ich den ersten sowie den letzten LI auszeichnen... was gibts da für Möglichkeiten?

[onemorenerd]

<li class="first">
<li class="last">

Wenn du es so machst, brauchst du das DIV drumherum nicht.