 |
|
|
Themen-Optionen |
06.01.2006, 18:49
|
Nach oben #1 |
|
CSS-Spinner
Registriert seit: 27.08.2005
Ort: Kissing
Beiträge: 46
|
[CSS] CSS-Hover ohne Nachladen
In diesem Tutorial werde ich versuchen jedem, der sich zumindest ein wenig mit (x)HTML und CSS auskennt zu erklären wie man Menüpunkte oder auch beliebige Links ein Bild mit Hovereffekt (auch Mouseover genannt) ausstattet. Dazu brauche ich nicht mehr als:
Die Zutaten
1. Vorbereitung Eine gültige xHTML-Datei sieht so aus: HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CSS Hover Beispieldokument 1</title> </head> <body> </body> </html> Wir betrachten uns als erstes den <head> näher und binden eine CSS-Datei ein. Wie das funktioniert kann man auf selfhtml.org nachlesen. Ich habe mich entschieden die Datei einem @import-Befehl einzubinden, da dies hilft, dass dieDarstellung in längst veralteten Browsern trotzdem noch einigermaßen gut aussieht, da diese Browser diesen Code noch nicht unterstützen. HTML-Code:
... <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CSS Hover Beispieldokument 1</title> <style type="text/css" media="screen" > <– @import url("beispiel_css_1.css"); –> </style> </head> ... HTML-Code:
... <ul> <li><a href="#">Start</a></li> <li><a href="#">Über Mich</a></li> <li><a href="#">Projekte</a></li> </ul> ... 2. Die Bilder Dieser Punkt spielt eine entscheidende Rolle und man sollte genau überlegen, Wo man Was einsetzt. Im Normalfall weiß man nicht vorher, wie lange der Text eines Menüpunktes wird, besonders wenn man realisiert, dass jeder Endnutzer die Schriftgröße in seinem Browser anders sieht und eventuell sogarumgestellt hat. Auch kann ich aus eigender Erfahrung sagen, dass viele Designer gerne eine bestimmte Schrift im Menü haben wollen und bekannterweise ist das ohne Bild nicht ganz einfach zu realisieren. Deshalb habe ich mich für dieses Tutorial entschieden, den Buttontext einfach direkt in meiner Bildbearbeitungssoftware auf den Button aufzubringen. Jetzt wirds interessant. Um auf einen Preloader verzichten zu können, sorgen wir dafür, dass das Image, dass am Anfang geladen wird einfach gleich alle Stati (Mehrzahl von Status, schon klar?  ) enthält, die wir später brauchen.So wird aus  und  zum Beispiel:  (Ich habe diese letzte Grafik natürlich auch für alle anderen Menüpunkte erstellt.) 3. Erweiterung des HTML-Codes Damit das Bild auch wirklich anstatt und nicht gleichzeitig mit dem Menütext angezeigt wird, gibt es einige Austauschmethoden, von denen ich eine besonders bevorzuge, die von Dave Shea. Um diese jedoch anwenden zu können muss ich den Code der HTML-Datei erneut anpassen und um ein paar <span>s erweitern. HTML-Code:
<li><a href="#">Start</a></li> HTML-Code:
<li id="start"><a href="#" title="Startseite"><span><!--Start --></span>Start</a></li> Die Liste habe ich ebenfalls mit einer ID versehen, um sie später besser per CSS ansprechen zu können. Das Ergebnis kann man hier sehen: HTML-Beispieldatei 3. Damit sind an der HTML keine weiteren Änderungen mehr notwendig und wir können uns der CSS-Datei widmen. 4. Die CSS Um jetzt die Listenpunkte <li> zu den gewünschten Buttons zu machen, brauchen wir ein wenig CSS. Beginnen wir damit, die Liste zu formatieren. Code:
ul#menu{
margin:2em;
padding:0; /*Innenabstände brauchen wir fürs erste nicht */
font-size:100%;
line-height:100%; /*Diese Angaben verhindern eine unschöne Darstellung im IE*/
position:relative;}
ul#menu li, ul#menu li a{
/*dieser Styleblock gilt sowohl für Listenpunkte als auch für deren Links */
height:30px;
width:150px;
position:relative;
display:block;
overflow:hidden;
list-style-type:none;
list-style-position:outside;}
ul#menu li a span{
height:30px;
width:150px;
position:absolute;
display:block; }
Jetzt fehlen nur noch die Bilder, für die wir pro Listenpunkt jeweils diesen Code verwenden (natürlich) jeweils angepasst im Bezug auf die IDs Code:
li#start a span,
li#start a:link span,
li#start a:visited span{
background:scroll #0db8ff url(images/start.gif) 0px 0px no-repeat; }
Code:
li#start a:focus span,
li#start a:hover span,
li#start a:active span{
background:scroll #0db8ff url(images/start.gif) 0px -30px no-repeat; }
Fertig! Das fertige Menü kann man im Beispiel 6 betrachten, schuldig ist diesmal zur CSS-Beispieldatei 4. Das ganze lässt sich natürlich noch ausbauen und etwas verfeinern und schon hat man eine kleine Seite fertig, Beispiel 7 lässt da keinen Zweifel (das Beispiel ist für Firefox und Opera ausgelegt, andere Browser können unter Umständen Probleme mit der Darstellung haben). Fragen, Anregungen und Ergänzungen könnt Ihr im HTML-/CSS-Forum stellen bzw. anbringen. Wenns uch gefallen und geholfen hat, wäre es schön zu erfahren wo und wie. (Mit Link, wenn verfügbar). Grüße, pichfl // edit by Jann Hendrik: Ich habe die verlinkten Beispieldateien (nach Absprache mit dem Autor) auf diesen Server gelegt und die links entspr. angepasst. Geändert von Jann Hendrik (27.03.2008 um 11:23 Uhr). |
|
   
|
