Zum Inhalt springen

Listennavigation mit Grafik dazwischen

Erstellt am 12. September 2006 · 1 Antwort · letzte Antwort am 12. September 2006

Tags: HTML & CSS, Frage

dino_dino ·

Hi Leute

ich habe ein XHTM Problem....

mein CSS

ul#nav_level_1{	
	padding:0px;
	margin:0px;
	height:21px;
	color:#FFF;	
	}

.nav_img{
	float:left;
	}
	
ul#nav_level_1 li{
	padding:0px;
	margin:0px;
	font-size:0.8em;
	list-style:none;
	display:inline;
	float:left;	
	font-weight:bold;
	height:21px;
	line-height:0.8em;
	}
	
#nav_level_1 a {
	color:#FFF;	
	background-color:#666666;
	padding:0px;
	margin:0px;
	float: left;
	height:16px;
	padding-top:5px;
	padding-left:8px;
	padding-right:8px;	
	text-decoration: none;
	}

#nav_level_1 a:hover {
	color:#FFFF00;
	background: #999999;
	text-decoration: none;	
	}

und das mein Code:

		<div id="nav_level_main">
			<img src="fileadmin/img/nav_start.gif" alt="" class="nav_img" />
			<ul id="nav_level_1">
				<li><a href="#">Home</a></li><img src="fileadmin/img/nav_breaker.gif" alt="" width="2" height="21" class="nav_img" />
				<li><a href="#">Spielplan</a></li><img src="fileadmin/img/nav_breaker.gif" alt="" width="2" height="21" class="nav_img" />
				<li><a href="#">Musiktheater</a></li><img src="fileadmin/img/nav_breaker.gif" alt="" width="2" height="21" class="nav_img" />
				<li><a href="#">Schauspiel</a></li><img src="fileadmin/img/nav_breaker.gif" alt="" width="2" height="21" class="nav_img" />
				<li><a href="#">Tanz</a></li><img src="fileadmin/img/nav_breaker.gif" alt="" width="2" height="21" class="nav_img" />
			</ul>
		</div>

das Problem sind die Grafiken...aber ich brauche die um eine Trennung zu erreichen....

Kann mir jemand einen Tip geben wie ich das Lösen kanne?

danke!

Lawrence ·

Hallo dino,
du kannst zwischen den Listenelementen keine Grafiken einbauen, denn innerhalb von <ul></ul> oder <ol></ol> dürfen direkt nur <li></li> Elemente enthalten sein, sonst gar nichts; die <li></li> Elemente können dann wieder andere Elemente enthalten.
Möglichkeiten wären:

  • Die Grafiken als Listenpunkte einzubinden
    Die Grafiken innerhalb der <li></li> Elemente einzubinden
    Die Trennung zwischen den Listenelementen durch Rahmen oder Abstände herzustellen

Herzliche Grüße
Lorenz Reichelt