Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 24.09.2007, 16:17
name name ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.09.2007
Beiträge: 6
name befindet sich auf einem aufstrebenden Ast
Standard 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>
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!
Mit Zitat antworten
Sponsored Links