✔ CSS Registerkartenmenü Anzeigeproblem.

[waldjunge]

Hi,
ich habe ein Problem mit einem Registerkartenmenü und kann leider nirgends einen Lösungsansatz finden.
Die Darstellung funktioniert bisher so wie ich mir das vorstelle. Meine Registerkarten sind grau, die Aktive wird weiß und verliert die border-bottom.
Jetzt würde ich aber gerne die Registerkarten vom "Content" abgrenzen und eine Border darunter setzen. Ich habe in dem Bild im Anhang mit rot eingezeichnet wie ich das meine.
Mein erster Ansatz war, einfach dem div "nav" eine Border-bottom: 1px solid #C2C2C2; zu verpassen. Dann habe ich aber das Problem, dass auch unter der aktiven Registerkarte die Border ist und ich das Stück nicht ausblenden kann.
Gibt es hier überhaupt eine Lösung mit reinem css, oder wird hier javascript benötigt, um das zu realisieren?

Hier mein Code:

#tabnav{
	height:20px;
	margin: 0;
	padding-left: 10px;
}

#tabnav li{
	margin:0;
	padding: 0;
	display: inline;
	list-style-type:none;
}

#tabnav a:link, #tabnav a:visited{
	float:left;
	background: #f3f3f3;
	line-height: 14px;
	padding: 2px 10px 2px 10px;
	margin-right: 4px;
	border: 1px solid #ccc;
	text-decoration: none;
	color: #666;
}

#tabnav a:link, #tabnav a:visited.active{
	border-bottom: 1px solid #fff;
	background: #fff;
	color: #000;
}

#tabnav a:hover{
	background: #fff;
	border-bottom: 1px solid #fff;
}
#nav{
	margin-top: 10px;
	height: 20px;
}

<div id="nav">
	<ul id="tabnav">
		<li><a href="#"> Suche </a></li>
		<li><a href="#"> Linkverwaltung </a></li>
		<li><a href="#"> Globale Links </a></li>
		<li><a href="#"> Impressum </a></li>
	</ul>
</div>

Ich bin für jeden Vorschlag dankbar

Danke und Gruß,
Waldjunge

 

[Maik]

Hi,

für dein Vorhaben ist kein Javascript nötig

• http://css.maxdesign.com.au/listamatic/horizontal05.htm
• http://css.maxdesign.com.au/listamatic/horizontal08.htm
• http://css.maxdesign.com.au/listamatic/horizontal11.htm

mfg Maik

 

[waldjunge]

Klasse, genau sowas hab ich gemeint!
Vielen Dank!