✔ Subnavi wird falsch angezeigt

[Denniz]

Hi Leute,

ich habe eine Navi die wie hier dargestellt aussehen soll.

Der Home Button ist eine Grafik und die Subnavi soll per CSS formatiert werden, allerdings sieht das ganze beim mir (FF3, IE6,7, Opera) so aus. link.

Wieso wird der Homebutton wiederholt und wieso legt sich der graue background nicht in die subnavi?
Ich bin mit meinen css künsten am Ende.

* {
	margin:0;
	padding:0;
}
html,body {
	width:100%;
	height:100%;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
}
/* - - - - - - - - - MAIN - - - - - - - - - */
ul#mainnavi {
	width:190px;
	list-style: none;
	display: block;
	overflow: hidden;
	background:#FFF;
}

ul#mainnavi li {
	list-style: none;
	width:190px;
	float: left;
	padding-bottom:1px;
}

ul#mainnavi a {
	float: left;
	padding: 24px 0 0 0;
	height: 0px ;
	outline:none;
	overflow: hidden;
	width: 190px;
}

ul#mainnavi li.home a {
	background: url(../_img/navi/home.gif) 0px 0px no-repeat;
}


/* - - - - - - - - - SUB - - - - - - - - - */

ul#sub {
	width:190px;
	display: block;
	overflow: hidden;
	float:left;
}

ul#sub li {
	list-style: none;
	width:190px;
	padding:0px;
	height:18px;
}

ul#sub a {
	padding: 0 0 0 28px;
	outline:none;
	width: 190px;
	height:18px;
	line-height:18px;
}


/* - - PSEUDO KLASSEN SUB- - - */

ul#sub li a:link, ul#sub li a:visited {
	color:#565f6b;
	text-decoration:none;
	background-color:#f0f0f0;
}

ul#sub li a:hover, ul#sub li a:active {
}

/* - - - - - - -ACTIVE STATUS - - - - - - - - - - - - */

ul#mainnavi li a#aktiv:link, 
ul#mainnavi li a#aktiv:visited, 
ul#mainnavi li a#aktiv:hover,
ul#mainnavi li a#aktiv:active {
	background-position: 0px -24px;
}

 

[Maik]

Moin,

der Selektor "ul#mainnavi li.home a" findet im (X)HTML-Dokument auch eine Übereinstimmung mit den Links im Submenü vor.

Ergo muß zum einen der Selektor "ul#sub a" spezifiziert, und zum anderen der Hintergrund für die Links dieser Menüebene deaktiviert werden:

ul#mainnavi ul#sub li a {
        padding: 0 0 0 28px;
        outline:none;
        width: 190px;
        height:18px;
        line-height:18px;
        background:none;
}

mfg Maik

 

[Denniz]

Hi,

danke, funktioniert sogar hier in dem typo3 Rahmen .