[Erledigt] <li>-Text auf top setzen bei list-style-image

Arne Drews · 30.07.2010, 14:58

Hallo,

Per CSS formatiere ich ein <ul>-Listenelement.
Ich setze z.B. eine Grafik als Aufzählungspunkt ein per:

Code:

#servicelist { list-style-image:url(die_grafik.jpg); }

Raus kommt dabei wie erwartet die Liste mit der Grafik vor jedem einzelnen Eintrag (siehe Bild 1)!
Wie kann ich aber nun den Text höher ziehen, damit er ziemlich mittig von der Grafik ist (wie in Bild 2)?

Für das Ergebnis in Bild 2 habe ich folgendes gemacht:

Code:

#servicelist { list-style-type:none; }
#servicelist LI { background:url(die_grafik.jpg) no-repeat; padding-left:25px; }

Funktioniert auch alles bestens, aber mich interessiert, warum das per list-style-image nicht funktioniert oder was ich nicht bedenke?!

Falls jemand'n Tipp hat, wär ich dankbar.
gruß Arne

fab · 30.07.2010, 15:06

Was sind denn für UL und LI die jeweiligen Werte für padding und margin? Da würde ich als erstes ansetzen, das Bild in list-style-image lässt sich selber ja nicht positionieren wie etwa ein background-image.

Arne Drews · 30.07.2010, 15:11

Hi fab,

margin und padding habe ich global auf 0 gesetzt, an LI habe ich nichts verändert:

Code:

UL { margin:0; padding:0; }

Zitat:

das Bild in list-style-image lässt sich selber ja nicht positionieren wie etwa ein background-image

Genau. Daher habe ich das auch erstmal mit background gelöst.
Mich interessiert nur, was für eine Lösung es für die Standard-Variante gibt, weil mir die besser gefällt...

EDIT: Achso... margin:0 bzw. padding:0 für LI bringt nichts. Da hatte ich bereits alles durchgetestet...
Sorry, hätte ich gleich sagen können.

fab · 30.07.2010, 16:42

Zitat:

Zitat von Arne Drews

EDIT: Achso... margin:0 bzw. padding:0 für LI bringt nichts. Da hatte ich bereits alles durchgetestet...
Sorry, hätte ich gleich sagen können.

Naja, man könnte mit negativem margin-top für LI arbeiten aber das wäre mmN wieder ein dirty hack. Irgendwoher muss der freie Platz ja eigentlich kommen, was ist mit dem "Überschirft"-Element, hat das evtl. line-height auf einen höheren Wert gesetzt? Der komplette Source der Liste wäre da schon interessant um es nachvollziehen zu können.

tr0y · 31.07.2010, 16:10

welche dimensionen hat denn die bulletgrafik ?

Arne Drews · 01.08.2010, 14:53

Danke für Mühen. Bin leider unterwegs dies WE. Ich würde Euch morgen mehr Infos geben.

Danke und Gruß.

Arne Drews · 02.08.2010, 07:44

Also der Aufbau der Liste sieht folgendermaßen aus:

Code:

<ul id="listing">
  <li>Überschrift<br /><em>Text Text Text...</em></li>
...
</ul>

Das Style dazu (Grundform):

Code:

#listing { list-style-image:url(die_grafik.jpg); }
#listing LI { font-weight:bold; }
#listing LI EM { font-weight:normal; }

Wie gesagt, z.Zt. habe ich das über background-image gelöst.
Mich würde allerdings dennoch interessieren, wo die Lücke herkommt.

Die bulletgrafik ist 25x25 Pixel.

Mit line-height und vertical-align, etc. hatte ich auch schon rumprobiert. Änderte nichts an dem Abstand oben.

Danke.

EDIT
@fab: negative Werte für margin und padding halte ich auch für etwas dirty, nutze ich nicht sehr gerne...

ChrisB · 02.08.2010, 12:40

Zitat:

Zitat von Arne Drews

Also der Aufbau der Liste sieht folgendermaßen aus:

Code:

<ul id="listing">
  <li>Überschrift<br /><em>Text Text Text...</em></li>
...
</ul>

Abgesehen davon, dass zunächst festzustellen wäre, ob diese „Überschrift“ kein Hx-Element rechtfertigt - hast du das ganze mal online, so dass man sich das mit Firebug o.ä. mal genauer ansehen kann?

Manko10 · 02.08.2010, 12:47

Hi,

list-style-image ist eine ziemlich lausige CSS-Eigenschaft. Wenn du eine Bulletgrafik von 25x25px hast, dann mache lieber dies:

Code:

ul {
    list-style-type: none;
}
li {
    background: transparent url("/path/to/my/image.png") no-repeat left center;
    display: block;
    padding-left: 30px;
    min-height: 25px;
}

Arne Drews · 02.08.2010, 13:18

Hi ChrisB
(Link entfernt!)
Wenn Du per Firebug mal drüberschauen würdest, wär nett.
Mir fällt nichts besonderes auf beim Firebug, aber ich nutze den auch nicht so oft.
Vielleicht gibts 'n Werkzeug, das ich nicht kenne, Du oder andere Kollegen hier aber eventuell?!

Hi Manko
So habe ich das z.Zt. auch gelöst (außer min-height, das war nicht nötig, da die LIs alle mehrzeilig sind und die Hintergründe gleichfarbig sind).
Hätte nur gern gewußt, ob es ne Möglichkeit gibt, die "lausige" CSS-Eigenschaft hier trotzdem sinnvoll einzusetzen.
Trotzdem Danke für Dein Statement, dem ich entnehmen kann, daß list-style-image nicht sehr "ausgereift" zu sein scheint?!

@ALL
Wie im Eingangsthread beschrieben, habe ich das ganze bereits als Background-Lösung (ähnlich Beitrag #9 von Manko10) umgesetzt.
Da es hier nur rein um mein Interesse an einer Lösung mit der list-style-image-Variante geht, werde ich den Thread erstmal als Erledigt markieren.

Trotzdem bin ich weiteren Hinweisen gegenüber offen und dankbar!
gruß Arne

EDIT:
ICH HABE GELOGEN!!! Die Bullet-Grafik ist 17x17!

Dürfte aber unerheblich für die Problematik sein, denke ich...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
php-Ausgabe des Artikeldatums bei Mouse-over über Bild	McBorney	PHP Tipps 2010	3	26.04.2010 13:40
Verschachtelte Auswahlfenster	RichieG	PHP Tipps 2010	3	10.03.2010 07:58
[Erledigt] CSS Problem, Links ausrichten	monk	HTML, Usability und Barrierefreiheit	7	09.03.2010 20:33
variable mit onclick an php	drombusch	PHP Tipps 2009	8	30.08.2009 14:45
Text Ersetzen an anderer Stelle	phpde	Off-Topic Diskussionen	6	03.08.2009 20:12
CSS Layout mit 4 Buttons nebeneinander!!	Rambo02	HTML, Usability und Barrierefreiheit	7	27.07.2009 15:33
JavaScript/PHP: qooxdoo 0.7.1 - Teil 1 : Eine Einführung	Zergling-new	Tutorials	6	25.01.2008 10:41
CSS - Bild im div container überlappt andere container	Buschdieb	HTML, Usability und Barrierefreiheit	13	19.07.2007 23:17
Bilder Klasse	snatch-ic	Beitragsarchiv	1	13.06.2007 11:45
CSS - Design (clear - Problem)		HTML, Usability und Barrierefreiheit	7	21.12.2005 14:55
[Erledigt] Link		PHP Tipps 2005-2	10	20.07.2005 21:28
[Erledigt] durch Klick auf Text anderen Text einblenden		HTML, Usability und Barrierefreiheit	3	03.07.2005 14:41
[Erledigt] DIV´s wollen nicht wie ich das will :-)		HTML, Usability und Barrierefreiheit	22	28.03.2005 18:36
Problem mit Wasserzeichen auf Bildern	pixelcut	PHP-Fortgeschrittene	16	14.12.2004 02:36

30.07.2010, 14:58
Arne Drews Erfahrener Benutzer Registriert seit: 22.04.2009 Beiträge: 3.486 PHP-Kenntnisse: Anfänger	[Erledigt] <li>-Text auf top setzen bei list-style-image Hallo, Per CSS formatiere ich ein <ul>-Listenelement. Ich setze z.B. eine Grafik als Aufzählungspunkt ein per: Code: #servicelist { list-style-image:url(die_grafik.jpg); } Raus kommt dabei wie erwartet die Liste mit der Grafik vor jedem einzelnen Eintrag (siehe Bild 1)! Wie kann ich aber nun den Text höher ziehen, damit er ziemlich mittig von der Grafik ist (wie in Bild 2)? Für das Ergebnis in Bild 2 habe ich folgendes gemacht: Code: #servicelist { list-style-type:none; } #servicelist LI { background:url(die_grafik.jpg) no-repeat; padding-left:25px; } Funktioniert auch alles bestens, aber mich interessiert, warum das per list-style-image nicht funktioniert oder was ich nicht bedenke?! Falls jemand'n Tipp hat, wär ich dankbar. gruß Arne Miniaturansicht angehängter Grafiken __________________ Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt. Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind. Albert Einstein


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

30.07.2010, 15:06
fab Erfahrener Benutzer Registriert seit: 28.07.2010 Beiträge: 2.308 PHP-Kenntnisse: Fortgeschritten	Was sind denn für UL und LI die jeweiligen Werte für padding und margin? Da würde ich als erstes ansetzen, das Bild in list-style-image lässt sich selber ja nicht positionieren wie etwa ein background-image. __________________ PHP Blog + Library CSS Effects + Tools

31.07.2010, 16:10
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.865 PHP-Kenntnisse: Fortgeschritten	welche dimensionen hat denn die bulletgrafik ? __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr.

01.08.2010, 14:53
Arne Drews Erfahrener Benutzer Registriert seit: 22.04.2009 Beiträge: 3.486 PHP-Kenntnisse: Anfänger	Danke für Mühen. Bin leider unterwegs dies WE. Ich würde Euch morgen mehr Infos geben. Danke und Gruß. __________________ Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt. Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind. Albert Einstein

02.08.2010, 07:44
Arne Drews Erfahrener Benutzer Registriert seit: 22.04.2009 Beiträge: 3.486 PHP-Kenntnisse: Anfänger	Also der Aufbau der Liste sieht folgendermaßen aus: Code: <ul id="listing"> <li>Überschrift<br /><em>Text Text Text...</em></li> ... </ul> Das Style dazu (Grundform): Code: #listing { list-style-image:url(die_grafik.jpg); } #listing LI { font-weight:bold; } #listing LI EM { font-weight:normal; } Wie gesagt, z.Zt. habe ich das über background-image gelöst. Mich würde allerdings dennoch interessieren, wo die Lücke herkommt. Die bulletgrafik ist 25x25 Pixel. Mit line-height und vertical-align, etc. hatte ich auch schon rumprobiert. Änderte nichts an dem Abstand oben. Danke. EDIT *@fab:* negative Werte für margin und padding halte ich auch für etwas dirty, nutze ich nicht sehr gerne... __________________ Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt. Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind. Albert Einstein

02.08.2010, 12:47
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Hi, list-style-image ist eine ziemlich lausige CSS-Eigenschaft. Wenn du eine Bulletgrafik von 25x25px hast, dann mache lieber dies: Code: ul { list-style-type: none; } li { background: transparent url("/path/to/my/image.png") no-repeat left center; display: block; padding-left: 30px; min-height: 25px; } __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

02.08.2010, 13:18
Arne Drews Erfahrener Benutzer Registriert seit: 22.04.2009 Beiträge: 3.486 PHP-Kenntnisse: Anfänger	Hi ChrisB (Link entfernt!) Wenn Du per Firebug mal drüberschauen würdest, wär nett. Mir fällt nichts besonderes auf beim Firebug, aber ich nutze den auch nicht so oft. Vielleicht gibts 'n Werkzeug, das ich nicht kenne, Du oder andere Kollegen hier aber eventuell?! Hi Manko So habe ich das z.Zt. auch gelöst (außer min-height, das war nicht nötig, da die LIs alle mehrzeilig sind und die Hintergründe gleichfarbig sind). Hätte nur gern gewußt, ob es ne Möglichkeit gibt, die "lausige" CSS-Eigenschaft hier trotzdem sinnvoll einzusetzen. Trotzdem Danke für Dein Statement, dem ich entnehmen kann, daß list-style-image nicht sehr "ausgereift" zu sein scheint?! @ALL Wie im Eingangsthread beschrieben, habe ich das ganze bereits als Background-Lösung (ähnlich Beitrag #9 von Manko10) umgesetzt. Da es hier nur rein um mein Interesse an einer Lösung mit der list-style-image-Variante geht, werde ich den Thread erstmal als Erledigt markieren. Trotzdem bin ich weiteren Hinweisen gegenüber offen und dankbar! gruß Arne EDIT: ICH HABE GELOGEN!!! Die Bullet-Grafik ist 17x17! Dürfte aber unerheblich für die Problematik sein, denke ich... __________________ Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt. Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind. Albert Einstein Geändert von Arne Drews (03.08.2010 um 07:25 Uhr). Grund: Link entfernt