- Hinweise zu den Tutorials:
- Bitte aus dem kopierten Quelltext:
<p class="bitte_loeschen">.....</p>und die Gestaltungsanweisungen dazu entfernen.
Grafische Navi 2
Der etwas kompliziertere Fall eines grafischen Menüs habe ich schon erklärt.
Hier folgt nun der etwas einfachere Fall, wo der Linktext ganz normal dasteht und die Grafik nur den Hintergrund bildet.
Hier findest du die navi_grafisch2_anfang.htm zum Quelltext rauskopieren.
Die benötigte Grafik kannst du dir hier holen: navi_grafisch2_grafik.htm
So schaut die Grafik aus:
Die Größe der Grafik beträgt 140 x 80px.
Der obere Teil der Grafik beinhaltet den Normalzustand der Links und darunter befindet sich der Hover-Zustand, der später einfach durch Veränderung der background-position ins Bild geschoben wird.
Im Browser bietet sich euch dieses Bild:
Der Quelltext:
<div id="container"><ul id="navi"><li id="navi01"><strong>Startseite</strong></li><li id="navi02"><a href="#">Galerie</a></li><li id="navi03"><a href="#">Kontakt</a></li></ul></div>
Der Link der aktuellen Seite ist gegen strong ausgetauscht worden, um den Deppenlink zu vermeiden.
Bitte CSS ergänzen:
lifloat:left;width:140px;}
a,strong {display:block;width:100%;height:40px;}
li floatet und bekommt durch die Breite vorsorglich HasLayout..
a und strong werden zum Blockelement erklärt und haben durch die Angabe von Höhe und Breite auch schon HasLayout.
Wer floatet muss auch clearen!
Deshalb fügen wir ein hardcodiertes Clear hinzu und formatieren entsprechend.
Bitte den Quelltext ergänzen:
</ul><hr class="clear" /></div>
Das CSS dazu:
.clearclear:both;height:0;width:0;visibility:hidden;border:0;}
Jetzt binden wir die Grafik ein und gestalten die Links.
Bitte CSS ergänzen:
a {background:url(grafischesmenue2.png) no-repeat 0 0;color:#3e7c07;font-weight:bold;text-decoration:none;}
a:hover,a:focus,a:active,strong {background:url(grafischesmenue2.png) no-repeat 0 -40px;color:#d90000;}
Stand im Browser:
Naja, das schaut aber nicht so toll aus. Da fehlen noch ein paar zusätzliche Anweisungen.
Bitte CSS ergänzen:
litext-align:center;}
a,strongline-height:2.5;}
Stand im Browser:
So soll es sein. Die Schrift läßt sich auch um vier Stufen vergrößern ohne das der Text aus dem Container läuft
Leider schaut es im IE 6 / IE 7 nicht ganz so gut aus.
Trotz gegenteiliger Formatierung hat der IE Platz für die hr reserviert und bei Textvergrößerung um zwei Stufen kommt der untere Teil der Grafik ins Bild.
Bitte den Conditional Comment ergänzen:
<!--[if lte IE 8]><style type="text/css">* html .clear { display:none; }*+html .clear { display:none; }* html #container {height:40px;overflow:hidden;}*+html #container {height:40px;overflow:hidden;}</style><![endif]-->
Da der IE 6 / IE7 die Floats fälschlicherweise automatisch einschließt, wenn das umgebende Element (div#container!) HasLayout hat, können wir die Klasse .clear per Cond. Comment auf display:none; setzen.
Die anderen Anweisungen sorgen dafür, das der untere Teil der Grafik bei Textvergrößerung nicht ins Bild kommt.
- Kategorien:
- Navigationen, XHTML/CSS
- Tags:
- grafisches Menü, Hintergrundbilder, menü, navi
- Kommentare:
- Kommentare verfolgen oder Kommentar abgeben
Sehr schön beschrieben, das wird sicher einigen helfen.
Danke.
dieses wunderbare tutorial hilft mir in zukunft sehr weiter-
tx! -fuer die muehe….
gruss
[...] reicht auch CSS, am Besten mit einer HG-Grafik. [url=faq=15]Hier[/faq] einmal mit Text im Bild und hier einmal mit Bild und normalem Linktext. Ist zwar horizontal, aber vertikal ist ja viel einfacher. [...]
[...] [...]
[...] [...]
[...] [...]