|
|||
CSS Navigation mit "umschlossener" Grafik
Hallo,
ich möchte ein horizontales CSS Navigation mit einer Art "umschlossenen" Grafik erstellen. Das heißt, ich erstelle eine normale Liste. Vor und nach jedem Eintrag (<li> und </li>) möchte ich möchte ich dass eine bestimmte Grafik erscheint. Also dass es etwa so aussieht: (x)HOME(y) (x)KONTAKT(y) (x)USW.(y) Dabei symbolisieren (x) und (y) die zwei verschiedenen Grafiken. Ich habe versucht z.B. die Grafik (X) mit hilfe von <p class="before"> einzubetten, indem ich in CSS die Klasse "anfang" definiert habe, diesem feste Breite und Höhe samt ein Hintegrundbild gegeben habe. Das selbe für (Y). Das ganze sieht dann so aus: Code:
<ul id="menu"> <p class="before"></p><li>Home</li><p class="after"></p> <p class="before"></p><li>Menu</li><p class="after"></p> </ul> Code:
ul#menu { margin:0; padding:0; list-style:none; } ul#menu li { display:block; float:left; height:50px; } p.before { width:6px; height:50px; display:block; float:left; margin:0; padding:0; background:url(../images/button_left.gif); } p.after { width:8px; height:50px; display:block; float:left; margin:0; padding:0; background:url(../images/button_right.gif); } Da ich ein horizontales Menu haben möchte, ist das nicht so gut. Und ich möchte es auch nicht umschreiben zu Code:
<p class="before"></p><li>Home</li><li class="after"></li> <li class="before"></li><li>Menu</li><li class="after"></li> Vielleicht könnt ihr mir helfen oder wisst wie man es ganz ohne den <p>'s oder <span>'s machen kann? Habe es nämlich auch schon mit den pseudos :before und :after versucht, nur funktionieren die leider nicht für den IE... Vielen Dank schonmal! |
Sponsored Links |
|
|||
p-Elemente können keine direkten Nachfahren von ul sein. Dein Code ist fehlerhaft -- validieren!
Wenn es ein Menü werden soll, dann gibt es sicher Links. Du hast also li-Elemente und a-Elemente und kannst einem jeden eine Hintergrundgrafik verpassen. |
Sponsored Links |
|
|||
Hallo,
Danke für deine Hilfe! Leider klappt es immernoch nicht. Auch wenn ich es als <a>-links definiere verschiebt IE das Bild immernoch nach dem </li> nach unten in eine neue Zeile. (Auch wenn ich die <a>-tags innerhalb des <li>-tags einfüge!) Code:
<ul id="menu"> <a href="#" class="before"></a><li>Home</li><a href="#" class="after"></a> </ul> Code:
ul#menu, ul#menu ul { margin:0; padding:0; list-style:none; } ul#menu li { display:block; float:left; height:50px; } ul#menu a.before { width:6px; height:50px; display:block; float:left; margin:0; padding:0; background:url(../images/button_left.gif); } ul#menu a.after { width:8px; height:50px; display:block; float:left; margin:0; padding:0; background:url(../images/button_right.gif); } Woran kann das liegen? Danke nochmals, MfG, name Geändert von name (24.09.2007 um 20:53 Uhr) |
|
|||
Achso, vielen Dank!
Damit komme ich der Sache schon sehr sehr nah Nur ist mein Problem jetzt, dass ich in Wirklichkeit für das <li> bereits einen Hintergrund definiert habe (ich wollte es nur noch nicht erwähnen, da ich nicht wusste, dass es relevant sein könnte). Das Hintergrundbild wiederholt sich (also repeat-x), so dass es sich der Breite des Menu-textes (z.B. HOME) anpasst. Man kann ja leider keine zwei Hintergründe für z.B. ein <li> definieren. Würde mich wirklich sehr freuen, wenn man mir auch noch dabei helfen kann. Vielen Dank schonmal! MfG, name |
|
|||
Setz in deinen Link noch ein span -- um den Linktext herum, nicht daneben. Dann hast du genug Elemente.
Zitat:
|
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Navigation per CSS | dedi02 | CSS | 1 | 09.05.2009 05:37 |
Navigation mit CSS erstellen | Boof | CSS | 7 | 17.02.2009 16:23 |
Falsche Darstellung im Internet Explorer | rw1981 | CSS | 3 | 06.02.2009 13:51 |
Darstellungsproblem CSS Navigation im IE7 | pcklinik | CSS | 7 | 09.09.2007 18:25 |
Container mit 2 Container darin -> Hintergrund anzeigen | bendar | CSS | 4 | 05.04.2005 19:18 |