[HTML+CSS] Listenzeichen vertikal zentrieren

Boron

Commander
Registriert
Sep. 2001
Beiträge
2.785
Hallo zusammen,

ich habe in einer HTML Datei in einer Liste das normale Listenzeichen (den schwarzen ausgefüllten Kreis) durch ein eigenes kleines Bild mit Hilfe von CSS ersetzt:
HTML:
<ul style="list-style-image:url(pics/bullet.png)">
	<li>Hochvogel &uuml;ber den B&auml;umenheimer Weg</li>
	<li>Zugspitze: Durch das H&ouml;llental</li>
</ul>
Allerdings, sobald ich im Browser die Darstellunbgsgröße ändere, sehe ich, dass das Bildchen im Firefox irgendwie am jeweiligen unteren Zeilenrand klebt.
Im Internet Explorer bleibt das Bild stur in der oberen Zeilenhälfte.

Ich habe versucht mit vertical-align:middle das Ding vertikal zu zentrieren, aber die Browser ignorieren das.
Kann man Bildchen überhaupt vertikal zentrieren und wie geht das?
 

Anhänge

  • hochvogel.png
    hochvogel.png
    1,2 KB · Aufrufe: 328
Hallo,

dies ist leider imho nicht möglich. Jedoch könntest du zum Beispiel mit "list-style-type: none;" das Listenzeichen komplett ausblenden und der Liste mit dem Attribut "background" ein entsprechend ausgerichtetes Hintergrundsbild zuweisen und dabei mit "padding-left" dafür sorgen, dass das Hintergrundsbild nicht in den Listentext hinein gerät. ;)

MfG mh1001
 
ja, bei CSS gibt es viele Kleinigkeiten die einen einfach tierisch nerven können, dazu gehört dein Beispiel auch.
 
Danke:). Hat geholfen.

Lösung:
HTML:
<html>
<head>
	<title>Page title</title>
	<style>
		ul { list-style-type: none;}
		
		li {
			background: url(pics/bullet.png); /* png ist 10x7 px */
			background-repeat: no-repeat;
			background-position: left center;
			padding-left: 18px;
		}
	</style>
</head>
<body>
	<ul>
		<li>Hochvogel &uuml;ber den B&auml;umenheimer Weg</li>
		<li>Zugspitze: Durch das H&ouml;llental</li>
	</ul>

</body>
</html>
Der rote Pfeil ist so immer in der Zeile vertikal zentriert, so lange die der Listeneintrag einzeilig bleibt. Hier ein kleiner Screenshot aus Firefox (IE macht es genau so):
 

Anhänge

  • hochvogel.png
    hochvogel.png
    378 Bytes · Aufrufe: 324
Wenn das ganze auch über mehrere Zeilen hinweg klappen soll kannst du zur Positionierung auch die Einheit "em" verwenden. Diese verhält sich relativ zur Schriftgröße. ;)

MfG mh1001
 
Zuletzt bearbeitet:
Die Einheit em ist hier nicht so praktisch. Der mit padding-left festgelegt Abstand ist im Beispiel der Abstand zwischen dem linken Rand des roten Pfeils und dem linken Rand des ersten Buchstabens (als dem 'H' oder dem 'Z').
Da sich aber beim Ändern der Darstellungsgröße im Browser die Größe des roten Pfeils nicht ändert (ist ja ein Bild), ist es nicht notwendig den eben erklärten Abstand "schriftgößenabhängig" zu ändern. Der kann ruhig absolut in Pixeln angegeben werden.

So sieht es aber aus, wenn der Text mal mehrzeilig wird. Aber da der Pfeil als Hintergrundbild eingefügt ist, sehe ich keine Möglichkeit ihn in der ersten Zeile vertikal zentriert festzusetzen.
 

Anhänge

  • hochvogel.png
    hochvogel.png
    739 Bytes · Aufrufe: 299
Nein, so war dies nicht gemeint. Das ganze war viel mehr so gemeint: ;)

Code:
	li {
			background: url(pics/bullet.png); /* png ist 10x7 px */
			background-repeat: no-repeat;
			background-position: left 0.5em;
			padding-left: 18px;
	   }
Der Wert muss natürlich noch entsprechend des Pfeils angepasst werden. ;)

MfG mh1001
 

Ähnliche Themen

Antworten
7
Aufrufe
3.693
Mister Blue Sky
M
Zurück
Oben