KILL IE6

Menu mit runden Ecken

Ein sehr einfaches Schritt für Schritt Beispiel für Navigationen mit abgerundeten Ecken.

Alle Beispiele validieren XHTML 1.0, sind CSS2 konform und tableless.
Getestet auf: MAC: Safari, Opera, Firefox, und PC: IE 6/7, Firefox

1. Bilder erstellen

Diese vier Bilder braucht es zum erstellen der Navigation.

2. HTML erstellen

div mit einer id="navi" erstellen. In diesen <div id="navi"> kommt die gesamte Navigation.
Darinn befindet sich die Liste mit den Links.
ACHTUNG: Der Link befindet sich zusätzlich in einem span-Tag. Dieser ist für das rechte Hintergrundbild, das im Css definiert wird reserviert.
Da wir eine horizontale Navigation erstellen, werden wir float einsetzen.
Nach der Liste sezten wir einen <div class="clr"></div> und heben das Float wieder auf.

<div  id="navi">
<ul>
<li><a href="*"><span>monorom</span></a></li>
<li><a href="*"><span>etoy.CORPORATION</span></a></li>
<li class="current"><a href="*"><span>CSS</span></a></li>
<li><a href="*"><span>Netzwirt</span></a></li>
</ul>
<div  class="clr"></div>
</div> /* end Navigation */

3. CSS erstellen

Als erstes wird die Liste definiert. Hier werden die Ränder auf 0px Abstand gesetzt. Die Liste hat einen float, weil sonst die linie der ul nicht richtig sitzt. Die Listen (li) haben ebenfalls einen float:left damit diese horizontal dargestellt werden.

#navi ul {
   float: left;
   list-style-type: none;
   margin:0;
   padding: 0;
   }

#navi li {
   float: left;
   padding: 0;
   margin: 0;
   }

Der Link (a-tag) hat das grosse Hintergrundbild und die Abstände gegen oben, unten und links für die Schrift.
Der span im a-tag hat das kleine rechte Hintergrundbild und die Breitenangabe des Hintergrundbildes. Hier ist der Abstand (padding) zum rechten Rand definiert.

#navi a {
   display:block; /* important for IE */
   text-decoration: none;
   color:#564b47;
   padding: 7px 0 4px 15px;
   margin: 0 2px 0 0 ;
   background: url(images/norm.jpg) no-repeat left top;
   border-bottom:1px solid #564b47;
   }

#navi a span{
   padding: 7px 15px 4px 0;
   margin: 0;
   background: url(images/norm-rechts.jpg) no-repeat right top;
   }

#navi a:hover, #navi li.current a {
   color:#ffffff;
   background-image: url(images/aktiv.jpg);
   }

#navi a:hover span, #navi li.current a span {
   background-image: url(images/aktiv-rechts.jpg);
   }
   

Zuletzt kommt der clear, damit wird das float wieder aufgehoben. Das ist wichtg weil float vererbt wird, float und clear gehören immer zusammen.

.clr{ clear:left; }

4. Menu ansehen

5. Download Menu