HowTo: flächendeckende Links in Listen
Im folgenden Post verliere ich ein paar Zeilen CSS, die erläutern wie man einen Link innerhalb eines Listenelements dazu bewegt, auf der kompletten Fläche anklickbar zu sein. Ich gebe zu, dies ist nicht sonderlich schwer, da ich aber in den letzten Wochen mehrfach mit dieser Frage konfrontiert worden bin, möchte ich es einfach für die Nachwelt hinterlassen. „Wenn man etwas mehr als dreimal macht, sollte man es scripten“, in diesem Sinne lege ich mal das Post hier ab ;-)
Die Ausgangsituation beinhaltet eine Liste, die verschiedene Links mit sich trägt. Diese Methode hat sich für Navigationen spätestens mit WordPress durchgesetzt. Ein weiterer Nebeneffekt ist, dass Suchmaschinen diese Art von Architektur ganz gern annehmen (bitte keine SEO-Debatte, ich bin keiner!).
Hier also die Navigation [(X)HTML]
[sourcecode language='HTML']
[/sourcecode]
Theoretisch befindet sich die Navigation in einem DIV-Container. Der Liste kann wahlweise noch eine Klasse oder ein Idenfitier mitgegeben, ich werde es im Beispiel allerdings so belassen. Der Liste wird das Aufzählungszeichen entnommen und die Listenpunkte werden ausgerichtet.
[sourcecode language='CSS']
ul {
list-style-type: none;
}
ul li {
float: left;
width: 100px;
height: 40px;
}
[/sourcecode]
Bis zu diesem Punkt kommen alle ohne Hilfe. Der Knackpunkt ist den Link dazu zu bewegen, die komplette Fläche zu nutzen und nicht nur den angezeigten Text. Dies ist banaler als mancher denken mag. Ein Anker (Link) ist ein naturgemäß als Inline initialisiert. Und genau hier liegt der Schlüssel zum Erfolg. Teilt man dem Link mit, dass er als Block angezeigt werden soll und nimm dir allen Platz, den du bekommen kannst, ist das Rätsel bereits gelöst.
[sourcecode language='css']
ul li a {
width: 100%;
height: 100%;
display: block;
background-color: #000;
color: #fff;
text-decoration: none;
}
ul li a:hover {
width: 100%;
height: 100%;
display: block;
background-color: pink;
}
[/sourcecode]
Eigentlich recht simpel. Heute morgen habe ich dieses Beispiel zur Veranschaulichung abgelegt. Wenn man es 1-2 Mal gemacht hat, vergisst man das auch nicht mehr. Ich denke auf die Deklarierung des :visited-Element brauche ich nicht eingehen oder?!
Geh mal auf :active, :focus und outline ein.
So – und jetzt machen wir noch Trennlinien zwischen die Elemente (aber nicht links und rechts am Rand) und positionieren den Text in der Mitte der “Buttons”… ;-)
@Martin: Überlege gerade, ob ich daraus einen Artikel mache
@Balu: Vollkommen richtig ;) ist mir beim Lesen auch aufgefallen *pfeif*
Genial, danke ;-))
Sers :) mir sind ein paar Dinge aufgefallen:
1. Im IE funktioniert dein Beispiel nicht weil du dein CSS aus versehen in den <Style Tag geschrieben hast.
2. width,height,display erübrigt sich im a:hover weil das sowieso vererbt wird. das einzige wäre background-color weil du eine andere farbe bei hover willst.
3. deine Prozent breiten höhe Lösung ist nicht besonders praktisch in der praxis, wie willst du jetzt vertikal und horizontal zentrieren? vertikale zentrierung ist eine schwachstelle des heutzutage gebräuchlichen css, in den meisten fällen müsste dies aber nun kommen sonst wärs ein fehler würde der kunde sagen. ausserdem gibst du dem li eine px höhe aber dem a prozente, mischen ist generell nie gut. die breiten dimension beim ul li würd ich auch entfernen, aber denk dran das wenn du das tust musst du dem li im IE6 hasLayout geben zbsp. mit overflow hidden.
dem a würde ich erstmal ein rundum padding von 20px geben. dann schauts doch schon ganz nett aus und ist auch fürs erste zentriert :)
Das ist klasse, werde ich gleich mal ausprobieren. Danke für die Information!