Runde Ecken

Um die Rundungen oben zu erzeugen, habe ich in einem Bildbearbeitungsprogramm ersteinmal die Ecken erstellt: und . Es sind gif-Grafiken mit nur zwei Farben: Hintergrundfarbe der Seite und Transparenz. Das hat den Vorteil, dass je für eine Reiterseite nur eine Ecke gebraucht wird, egal, welche Farbe der Reiter hat. Ein Nachteil besteht in der leichten Treppchenbildung der Rundungen.

Das Menue besteht aus einer Liste mit links "floatenden" Listenpunkten ohne Bullet:

Auszug aus dem CSS:

li {
list-style-type:none;
float:left;
width:auto;
}

Die linke Ecke ist als Hintergrundgrafik der Links integriert:

Auszug aus dem CSS:

#navi a, #navi a:link, #navi a:visited {
background:#00f url(recke_links.gif) top left no-repeat;
color:#fff;
padding:0 0 0 16px;
text-decoration:none;
}
#navi a:hover, #navi a:focus, #navi a:active {
background:#ff0 url(recke_links.gif) top left no-repeat;
color:#000;
padding:0 0 0 16px;
text-decoration:none;
}

Hier ist auch das padding zu beachten, damit die Grafik voll zu sehen ist. Den Unterstrich der Links brauchen wir hier nicht.

Die rechte Ecke wird mit einen span hier mit der Klasse "r" eingebunden:

.r {
background:#0000ff url(recke_rechts.gif) top right no-repeat;
color:#000000;
padding:0 10px 0 0;
}

Im html-code muss für den Internet Explorer festes Leerzeichen in den span-Bereich.
Der html-code lautet bis hier:

<ul id="navi">
<li><a href="#" class="reiter">Hyperlink<span class="r">&nbsp;</span></a></li>
<li class="reithier">Hier<span class="rhier">&nbsp;</span></li>
<li><a href="#" class="reiter">Anderer Link</span></a></li>
<li><a href="#" class="reiter">Link</span></a></li>
</ul>

Für den Reiter "Hier" brauchen wir zwei zusätzliche span-Bereiche, (im html-code oben sind sie schon zu sehen):

Auszug aus dem CSS:

.rhier {
background:#0f0 url(recke_rechts.gif) top right no-repeat;
color:#000;
padding:0 10px 0 0;
}
.reithier {
background:#0f0 url(recke_links.gif) top left no-repeat;
color:#000;
padding:0 0 0 16px;
}

So jetzt steht das Menue. Noch ein paar Feinheiten hinzu und es kann losgehen. Etwas muss man mit dem padding und margin noch oben und unten aufpassen.

Das komplette CSS für alle die nochmal hineinschauen wollen.

Wieder zurück zu den CSSperimenten