Alex: Horizontale Navigation im Registerkarten-Stil

Beitrag lesen

SELF-Forum

Horizontale Navigation im Registerkarten-Stil

Alex
– Informationen zu den Bewertungsregeln

Hallo,

ich würde eine Navigation gerne in einer Art Registerkarten-Stil umsetzen.

Hierfür verwende ich derzeit eine Liste, deren Listenpunkte ich für die horizontale Ausrichtung floaten lasse.

Eigentlich klappt das soweit ganz gut. "Eigentlich" den jetzt hapert es daran, dass ich gerne einen Rahmen unterhalb der Navigation über die volle Breite der Seite hätte, dieser jedoch an dem aktiven Listenpunkt unterbrochen werden soll.

Leider kann ich derzeit die Seite nicht online stellen, deshalb hier der vollständige Quelltext (die gewählten Farben sollen nur der Abgrenzung der einzelnen Elemente dienen):

<html>  
<head>  
	<!doctype html>  
  
	<style type="text/css">  
	* {  
		margin: 0;  
		padding: 0;  
	}  
	  
	body {  
		background-color: green;  
	}  
	  
  
	#mainnav {  
		margin: 0;  
		padding: 10px 10px 0 15%;  
		background-color: red;  
		border-bottom: 1px solid pink;  
		  
	}  
  
	  
	#mainnav ul li {  
		float: left;  
		margin: 0 5px;  
		padding: 5px;  
		background-color: yellow;  
		list-style-type: none;  
		border-top: 1px solid pink;  
		border-left: 1px solid pink;  
		border-right: 1px solid pink;  
		  
	}  
	  
	#mainnav ul li.aktiv {  
		background-color: green;  
		border-bottom: none;  
	}  
	  
	#mainnav div {  
		clear: both;  
	}  
	  
	#content {  
		min-width: 800px;  
		max-width: 80%;  
		margin: auto;  
		border: 1px solid black;  
		background-color: white;  
	}  
	  
	h1 {  
		min-width: 800px;  
		max-width: 80%;  
		margin: 15px auto;  
	}  
</style>  
	  
	  
	  
</head>  
<body>  
  
	<nav id="mainnav">  
		<ul>  
			<li><a href="#">Startseite</a></li>  
			<li class="aktiv">da bin ich</li>  
			<li><a href="#">hier nicht</a></li>  
			<li><a href="#">hier auch nicht</a></li>  
		</ul>  
		<div></div><!-- Hilfscontainer, um float aufzuheben -->  
	</nav>  
	  
	<h1>Ganz tolle Überschrift</h1>  
	  
	<div id="content">  
		<p>Hier steht dann ganz viel Text ...</p>  
	</div>  
</body>  
</html>

Problem:
Gebe ich nur den Listenpunkten einen unteren Rahmen, mit Ausnahme des aktiven, geht der Rahmen nicht über die volle Breite. Gebe ich den nav-Element oder einem folgenden Hilfs-div einen unteren bzw. oberen Rahmen, so weiß ich nicht, wie ich den Rahmen beim aktiven Element gelöscht kriege.

Ich hoffe, ich habe das Problem einigermaßen verständlich ausgedrückt und ihr könnt mir helfen, wie ich den Rahmen bei dem aktiven Listenpunkt wegbekommen/verdecken kann.(?)

Freundliche Grüße
Alex

Beitrag melden
–
Informationen zu den Bewertungsregeln