[CSS] Custom bullet list 2 regels

[DNA_Saint]

Ik heb een list met eigen bullets.
Maar hoe align je ze nou als je tekst over 2 regels gaat?
want nu komt de bullet dan midden van de 2 regels...en dus niet zoals alle andere bij de 1e regel.
ik heb al verticle align, background position enzo gekloot...maar kom er maar niet uit.

Cascading Stylesheet:

.list ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        }

.list li {
        background-image: url(../images/general/bullet.gif);
        background-repeat: no-repeat;
        background-position: 1em;
        padding-left: 2em;
        list-style-type: none;
        }

[BtM909]

Cascading Stylesheet:

list-style-position: inside | outside;

Deze al geprobeerd?

[Verwijderd]

Ik begrijp het niet helemaal volgens mij.

Je wil dat die custom bullet gewoon op de eerste regel blijft?

code:

list-style-image: url(../images/general/bullet.gif);

Dat zou moeten werken d8 ik

[Verwijderd]

BtM909 schreef op woensdag 24 januari 2007 @ 10:01:

Cascading Stylesheet:

list-style-position: inside | outside;

Deze al geprobeerd?

Dit is om de bullet iets naar rechts te zetten. (binnen de tekst).
bv:

[ Voor 15% gewijzigd door Verwijderd op 24-01-2007 10:06 ]

[BtM909]

Verwijderd schreef op woensdag 24 januari 2007 @ 10:02:
[...]

Dit is om de bullet iets naar rechts te zetten. (binnen de tekst).

Dat snap ik

Maar ik zie nu dat TS z'n bullet als background image zet, dat is natuurlijk weer niet de bedoeling

[DNA_Saint]

Kijk...met de lijst die ik nu heb is alles uitgelijnd voor een zin van maar 1 regel.
Alles is mooi uitgelijnd etc.

maar wanneer ik nu een lange zin heb, die 2 regels in beslag neemt...dan gaat de bullet in het midden van de 2 regels zitten. Het zit nog steeds mooi aan het begin van de tekst. de x-waarde zegmaar, blijft goed. maar de y-waarde moet eigenlijk meer naar boven, om uitgelijnt te staan aan de 1e regel.

[ Voor 26% gewijzigd door DNA_Saint op 24-01-2007 10:07 ]

[Verwijderd]

Ze de post van _Graphix, je moet daar geen background voor gebruiken.

Als je dat toch wil moet je even naar background-attachment kijken.

ak:
background-position: left top;
background-attachment: fixed;

[edit] Ow wacht dat was dacht ik om de background mee te laten scrollen.

[ Voor 69% gewijzigd door Verwijderd op 24-01-2007 10:16 ]

[BtM909]

DNA_Saint schreef op woensdag 24 januari 2007 @ 10:06:
Kijk...met de lijst die ik nu heb is alles uitgelijnd voor een zin van maar 1 regel.
Alles is mooi uitgelijnd etc.

maar wanneer ik nu een lange zin heb, die 2 regels in beslag neemt...dan gaat de bullet in het midden van de 2 regels zitten. Het zit nog steeds mooi aan het begin van de tekst. de x-waarde zegmaar, blijft goed. maar de y-waarde moet eigenlijk meer naar boven, om uitgelijnt te staan aan de 1e regel.

Je moet dan ook geen background image gebruiken, maar daadwerkelijk een bullet point image. Kijk eens wat Verwijderd in "[CSS] Custom bullet list 2 regels" beschrijft.

[DNA_Saint]

aah ok, want had ergens gelezen dat je juist background image moest gebruiken enzo..
http://css.maxdesign.com.au/listutorial/master.htm

maar zal ff proberen

[Verwijderd]

BtM909 schreef op woensdag 24 januari 2007 @ 10:10:
[...]

Je moet dan ook geen background image gebruiken, maar daadwerkelijk een bullet point image. Kijk eens wat Verwijderd in "[CSS] Custom bullet list 2 regels" beschrijft.

Mijn ervaring met bullet images is dat ze onmogelijk cross-browser correct te positioneren zijn. Background images zijn betrouwbaar en flexibeler.

DNA_Saint, ik denk dat je ook een y-coordinaat moet opgeven voor je positionering:

Cascading Stylesheet:

.list li {
        background-image: url(../images/general/bullet.gif);
        background-repeat: no-repeat;
        background-position: 1em 0;
        padding-left: 2em;
        list-style-type: none;
        }

[crisp]

Verwijderd schreef op woensdag 24 januari 2007 @ 12:12:
[...]

Mijn ervaring met bullet images is dat ze onmogelijk cross-browser correct te positioneren zijn. Background images zijn betrouwbaar en flexibeler.

Dat kan ik beamen