CSS: Horizontale Unsorted List mit Image-Buttons

unsorted list horizontal

Ziel: eine normale unsorted list horizontal anordnen, in diesem Fall mit Image-Buttons

Manchmal wirkt CSS wie schwarze Magie auf mich. Dabei muss man nur etwas Logik einsetzen, um das gewünschte Resultat zu bekommen.

Heute sehen wir uns an, wie man mit CSS eine Unsorted List (<ul>) nicht vertikal, sondern horizontal anzeigt. Diese Technik nutze ich aktuell in meiner Sidebar für die Bilder-Buttons im „Social“ Widget (was übrigens auch nur ein Textwidget ist, mit etwas schwarzer Magie kann man so einiges schön anzeigen). Wir werden außerdem Image-Buttons einfügen, damit die Bilder als Hyperlinks funktionieren. Los geht’s:

Schritt 1: Unsorted List horizontal anordnen

Wir fangen mit einer einfachen Liste an:

<ul id="MyUL">
	<li>Element 1</li>
	<li>Element 2</li>
	<li>Element 3</li>
	<li>Element 4</li>
	<li>Element 5</li>
</ul>

Wie man sieht, hat das <ul>-Tag eine ID, damit es in CSS einfach direkt angesprochen werden kann. Horizontal angeordnet wird diese Liste nun mit folgendem CSS-Code:

#MyUL li {
	float: left;
}
unsorted list mit bulletins horizontal angeordnet

Die UL wird durch float:left; schon horizontal angezeigt, jedoch sieht das noch nicht sehr schön aus…

Erklärung: float: left; ordnet die <li> Elemente horizontal an.

Schritt 2: Bilder Hinzufügen

In meinem Fall sollen 5 kleine 32x32px Icons als Buttons angezeigt werden. Man könnte diese nun einfach mit HTML als Bild einbinden, aber da wir schon bei der CSS-Magie sind:

<ul id="MyUL">
	<li><div id="e1">Element 1</div></li>
	<li><div id="e2">Element 2</div></li>
	<li><div id="e3">Element 3</div></li>
	<li><div id="e4">Element 4</div></li>
	<li><div id="e5">Element 5</div></li>
</ul>

In den li-Tags sind nun div-Elemente mit verschiedenen IDs e1 … e5 vorhanden, damit diese individuell manipuliert werden können. Diese divs werden nun über die CSS-Eigenschaft background mit einem Bild versehen. Dabei wenden wir auch gleich einen kleinen Trick an, um das ganze effizient zu gestalten: Es wird nur 1 Bild für alle Icons geladen. Das entsprechende Icon wird mit einem Offset angegeben:

#MyUL {
	list-style-type: none;
}
#MyUL li div {
	height: 32px;
	width: 32px;
}

#e1 {
	background: url(link/to/image.png) repeat scroll 0 0 transparent;
}
#e2 {
	background: url(link/to/image.png) repeat scroll -32px 0 transparent;
}
#e3 {
	background: url(link/to/image.png) repeat scroll -64px 0 transparent;
}
#e4 {
	background: url(link/to/image.png) repeat scroll -96px 0 transparent;
}
#e5 {
	background: url(link/to/image.png) repeat scroll -128px 0 transparent;
}
unsorted list horizontal ohne bulletins mit bildern

Die Liste wird horizontal angezeigt, Bilder werden über die CSS-Eigenschaft background (effizient) eingefügt. Die Bulletins sind unsichtbar.

Erklärung: Durch das scroll -32px 0 erreichen wir, dass das Bild für e2 nun 32px nach links verschoben wird. Da wir 5 Icons á 32x32px in dem Bild haben, und nur eine Fläche von 32x32px auf unserer Webseite von diesem Bild anzeigen lassen (width und height für #MyUL li div jeweils 32px), wird nur das entsprechende Icon angezeigt. Vorteil hierbei: Es muss nur 1 Bild vom Browser geladen werden, das reduziert die Seitenladezeit. Nachteil: Die Bilder werden durch CSS hinzugefügt, das heißt, das CSS muss erst geparst werden, damit es auf der Seite angezeigt wird. Bei normalen Nutzern ist das unproblematisch, aber Suchmaschinen werden diese Bilder nicht registrieren. Daher: keinen wichtigen Content durch CSS-Background-Bilder einbinden! Das image.png enthält in diesem Fall Icons mit 32x32px, ohne Abstand.
Außerdem wurden die Bulletins der ul durch list-style-type: none; entfernt.

Schritt 3: Abstand und Links einfügen

Natürlich sieht die Liste noch etwas gequetscht aus, daher fügen wir mit CSS einfach einen Außenabstand ein und fügen Link-Elemente hinzu:

<ul id="MyUL">
	<li><div id="e1"><a href="#">Element 1</a></div></li>
	<li><div id="e2"><a href="#">Element 2</a></div></li>
	<li><div id="e3"><a href="#">Element 3</a></div></li>
	<li><div id="e4"><a href="#">Element 4</a></div></li>
	<li><div id="e5"><a href="#">Element 5</a></div></li>
</ul>

Css für die Abstände:

#MyUL li {
	float: left;
	margin: 4px;
}

Erklärung: Selbsterklärend. margin: 4px; um die li-Elemente und a-Tags ergeben folgendes:

horizontale unsorted list mit Bildern und Textlinks

Die li-Elemente haben nun einen Abstand von je 4px zueinander, also 8px whitespace zwischen den Bildern.

Schritt 4: Link-Tags begrenzen, Text unsichtbar machen

Wie zu sehen ist, sind die Link-Elemente immer noch größer als die 32×32 px der Icons. Außerdem stört die Schrift über den Icons.

#MyUL li div a {
	display: block;
	width: 100%;
	height: 100%;
	color: transparent;
	overflow: hidden;
}
unsorted list horizontal mit image-buttons

Die Bilder sind nun Anklickbar, da sich das Link-Element auf 100% Breite und Höhe erstreckt.

Erklärung: Das a-Tag, welches eigentlich ein inline Element ist, wird nun als Block-Element angezeigt. Warum ist das wichtig? Man könnte das ganze div als Link anklickbar machen, indem man das <div> einfach innerhalb des a-Tags positioniert. Allerdings ist das kein valides XHTML 1.0 Transitional! In einem inline-Element darf kein Block-Element (z.B. ein DIV) vorkommen. Platziert man nun aber das a-Tag innerhalb des <div>, würde nur der Text innerhalb des a-Tags anklickbar. Das ändern wir, indem das a-Tag als Block-Element gerendert wird, dadurch können Höhe und Breite auf 100% des Eltern-Elements gestreckt werden. Somit ist das komplette div-Element anklickbar, und wir haben valides HTML.

Außerdem wird overflow: hidden; gesetzt, damit Text, der über ein Bild hinausragt, nicht mehr anklickbar ist. Durch color: transparent; wird die Textfarbe transparent gerendert, es ist also kein Text mehr sichtbar.

Hier noch einmal die Problematik mit dem Textlink: Im folgenden Bild wird klar, warum das Element auf 100% x 100% ausgeweitet, und über das Bild herausragender Text abgeschnitten werden muss: Nur der Text im Element ist anklickbar!

Image Buttons FAIL

Das Problem: Nur der Text ist anklickbar. Füllt dieser das Element nicht ganz aus oder ragt darüber hinaus, führt dies zu ungewolltem Verhalten.

Schritt 5: Liste zentrieren (optional)

Etwas mit CSS zentrieren, das war für mich lange Zeit der HORROR! Aber mittlerweile ist es recht einfach, durch die eigenschaft margin: X auto;

#MyUL {
	list-style-type: none;
	width: 200px;
	height: 40px;
	margin: 10px auto;
}
ul mit CSS horizontal zentriert

Die unsorted list horizontal zentriert. Dies ist möglich, da der Browser die Breite kennt.

Erklärung: Durch margin: 10px auto; wird oben und unten ein Abstand von 10px gehalten, links und rechts wird der Abstand automatisch vom Browser berechnet. Der Browser zentriert das Element also für uns. Allerdings muss die Breite explizit angegeben werden, damit der Browser dies tun kann.
In meinem Fall habe ich 5x32px Breite, dazu kommt ein Abstand von 4px um jedes Element herum.
Macht insgesamt 5*32px + 10*4px = 200px Breite.

Das war’s. Gar nicht so viel CSS/Quelltext, um eine richtig schöne Button-Leiste anzuzeigen.
Hier noch einmal der komplette Code:

<style type="text/css">
<!--
	#MyUL {
		list-style-type: none;
		width: 200px;
		height: 40px;
		margin: 10px auto;
	}

	#MyUL li {
		float: left;
		margin: 4px;
	}

	#MyUL li div {
		height: 32px;
		width: 32px;
	}

	#MyUL li div a {
		display: block;
		width: 100%;
		height: 100%;
		color: transparent;
		overflow: hidden;
	}

	#e1 {
		background: url(link/to/image.png) repeat scroll 0 0 transparent;
	}
	#e2 {
		background: url(link/to/image.png) repeat scroll -32px 0 transparent;
	}
	#e3 {
		background: url(link/to/image.png) repeat scroll -64px 0 transparent;
	}
	#e4 {
		background: url(link/to/image.png) repeat scroll -96px 0 transparent;
	}
	#e5 {
		background: url(link/to/image.png) repeat scroll -128px 0 transparent;
	}
-->
</style>

<ul id="MyUL">
	<li><div id="e1"><a href="#">Element 1</a></div></li>
	<li><div id="e2"><a href="#">Element 2</a></div></li>
	<li><div id="e3"><a href="#">Element 3</a></div></li>
	<li><div id="e4"><a href="#">Element 4</a></div></li>
	<li><div id="e5"><a href="#">Element 5</a></div></li>
</ul>
UL horizontal mit Image-Buttons komplett

Fertig: So kann die UL aussehen, wenn sie horizontal angeordnet und mit Bildern als Buttons angezeigt wird.

Falls ihr Hilfe braucht oder noch Fragen / Ideen habt, hinterlasst einfach einen Kommentar.
MfG
Damon Dransfeld

Dieser Eintrag wurde veröffentlicht in Programmierung
Bookmarken: Permanent-Link Schreibe einen Kommentar oder hinterlasse einen Trackback: Trackback-URL.
Achtung: Wordpress interpretiert bestimmte Zeichenfolgen als Markup und verändert diese. Nutzt für Programmcode lieber Gist oder PasteBin-Services und verlinkt die Code-Schnipsel.

Post a Comment

Ihre E-Mail wird niemals veröffentlicht oder verteilt. Benötigte Felder sind mit * markiert

*
*

Du kannst diese HTML Tags und Attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>