Alex: Horizontale Navigation im Registerkarten-Stil

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

  1.         #mainnav ul li.aktiv {  
                    background-color: green;  
                    border-bottom: 1px solid green;  
                    margin: 0 0 -1px 0;  
            }
    

    Allen einen schönen Tag!

    danger

    1. Sorry, hab deine margins überschrieben, also so geht es:

              #mainnav ul li.aktiv {  
                      background-color: green;  
                      border-bottom: 1px solid green;  
                      margin-bottom: -1px;  
              }
      

      alles Liebe

      danger

  2. Om nah hoo pez nyeetz, Alex!

    <html>

    <head>
    <!doctype html>

      
    ~~~css
    .active {border-bottom: 1px solid green;  
             margin-bottom: -1px;}  
    
    ~~~wenn ich dich richtig verstehe.  
      
    Matthias
    
    -- 
    1/z ist kein Blatt Papier.  
    ![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  
    
    
    1. Hallo,

      da bin ich gerade mal 10 min. nicht am Computer und gleich 3 hilfreiche Antworten.

      Habe es mit dem negativen margin-bottom umgesetzt und es funktioniert wie gewünscht.

      Vielen Dank Matthias, Martin und Danger :)

      Freundliche Grüße
      Alex

      P.S.
      @Martin: Das mit dem inline für die li-Elemente werde ich mir auch nochmal anschauen, vlt. spare ich mir so das "clear-DIV". Vielen Dank für die Anregung.

      @Matthias: Danke für den Hinweis mit dem Doctype. Hatte schnell ein Beispiel basteln wollen und jetzt wo mit HTML5 die Doctype-Deklaration so einfach geworden ist, meinte ich wohl das aus dem Kopf machen zu können.

      1. Om nah hoo pez nyeetz, Alex!

        da bin ich gerade mal 10 min. nicht am Computer und gleich 3 hilfreiche Antworten.

        und wenn du dich jetzt noch bei diesem Forum anmeldest, kannst du hilfreichen Antworten auch für alle sichtbar als hilfreich auszeichnen. Bald sind dann die schicken für alle zu sehen. Derzeit nur in der Entwickleransicht (Benutzer-Einstellungen --> Expertenoptionen --> zweite HTML-Variante)

        Matthias

        --
        1/z ist kein Blatt Papier.

        1. und wenn du dich jetzt noch bei diesem Forum anmeldest, kannst du hilfreichen Antworten auch für alle sichtbar als hilfreich auszeichnen.

          Das werde ich nachholen, sobald ich Zuhause bin und mein Passwort ausgebudelt habe.

  3. Moin,

    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.

    ich hätte stattdessen die li-Elemente in ihrem ul-Container "inline" gesetzt, aber wenn dir float lieber ist, okay.

    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.
    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.

    Idee 1 (ungetestet): Mach das li-Element des aktiven Eintrags ein paar px höher als die anderen (z.B. indem du dessen padding-bottom vergrößerst) und ziehe es gleichzeitig mit einem negativen margin-bottom gleicher Größe nach unten.
    Dann sollte es nach meinem Verständnis den unteren Rahmen des umgebenden ul- oder nav-Elements überdecken.

    Idee 2: Realisiere den Rahmen nicht mit border-bottom, sondern mit einem unten ausgerichteten Hintergrundbild im ul und den nicht-aktiven li-Elementen, und einem abweichenden Hintergrundbild im aktiven li.

    So long,
     Martin

    --
    Eine Neandertaler-Sippe sitzt in ihrer kalten Höhle. Seufzt der Stammesälteste: "Hoffentlich erfindet bald jemand das Feuer!"
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(