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>
CSS:
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);
}
Doch der IE (sowohl 6 als auch 7) möchte IMMER das was nach </li> kommt eine Zeile nach unten versetzten, ausser es ist selbst ein <li>.
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>
da dies wirklich unschön ist (obwohl es so auch mit dem IE funktioniert...)
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!