[CSS] list - de ruimte tussen bullet en tekst

[sjink]

Weet iemand hoe ik de ruimte in een list tussen de bullet en de tekst kan bepalen, wil hem dus kleiner maken dan dat die standaard is.

Heb al zaken geprobeerd als margin-left, padding-left, text-indent maar daar lukt het allemaal niet mee.

[Annie]

deze al eens doorgelezen? http://www.alistapart.com/articles/taminglists

[eXcyle]

http://css.maxdesign.com.au/listutorial/index.htm staat ook wel wat info over CSS en list

code:

 ul
{
padding: 10px;
margin: 10px;
}

[ Voor 45% gewijzigd door eXcyle op 13-05-2004 10:02 ]

[Verwijderd]

Dat kan niet

edit:

Althans, niet met de gewone bullet, met een background die dienst doet als bullet kun je het gewoon met padding-left doen. Of een een span in elk list-item zetten en die een negatieve margin-left geven.

[ Voor 88% gewijzigd door Verwijderd op 13-05-2004 10:03 ]

[sjink]

Verwijderd schreef op 13 mei 2004 @ 10:02:
Dat kan niet

edit:

Althans, niet met de gewone bullet, met een background die dienst doet als bullet kun je het gewoon met padding-left doen. Of een een span in elk list-item zetten en die een negatieve margin-left geven.

Ik was die background-'cheat' ook al tegen gekomen maar kon me eerlijk gezegd niet voorstellen dat er nog geen optie in CSS was om dit te bepalen.

[Willem]

line-height

[Verwijderd]

sjink schreef op 13 mei 2004 @ 10:07:
Ik was die background-'cheat' ook al tegen gekomen maar kon me eerlijk gezegd niet voorstellen dat er nog geen optie in CSS was om dit te bepalen.

Ja het kan dus wel iets netter, maar mooi is het nog steeds niet:

HTML:

<ul>
    <li><span>GoT</span></li>
</ul>

Cascading Stylesheet:

li span {
    margin-left: -5px;
}

[sjink]

Die line-height is toch de ruimte tussen de regels?

Denk dat ik die span ga gebruiken die werkt wel bingo tnx!

[sjink]

Ik heb bij nader inzien toch maar die background-cheat gebruikt omdat bij die span had ik het probleem dat wanneer een list-item uit meer dan 1 regel bestond dat de volgende regels toch weer verder insprongen.

[Verwijderd]

Werkt een beetje 'padding' niet hiervoor?

[Verwijderd]

Verwijderd schreef op 13 mei 2004 @ 10:30:
Werkt een beetje 'padding' niet hiervoor?

Alleen als je meer ruimte wilt, en de TS wil minder ruimte.

sjink schreef op 13 mei 2004 @ 10:29:
Ik heb bij nader inzien toch maar die background-cheat gebruikt omdat bij die span had ik het probleem dat wanneer een list-item uit meer dan 1 regel bestond dat de volgende regels toch weer verder insprongen.

Gebruik dan een <p> in plaats van een <span>, en dus ook li p en het werkt weer wel.

[ Voor 52% gewijzigd door Verwijderd op 13-05-2004 10:38 ]

[André]

En een nagatieve padding/margin op de LI werkt ook wel.

[Verwijderd]

André schreef op 13 mei 2004 @ 10:37:
En een nagatieve padding/margin op de LI werkt ook wel.

De bullet is onderdeel van de li zelf, hij staat er niet voor. Ga je met negatieve margins werken hebben die dus ook effect op de bullet. Oplossing is allen de tekst in de LI aanspreken door er een span of p in te zetten.

[Verwijderd]

Riff: SPAN/P gebruiken hiervoor is gewoon lelijk. Wat dat betreft is het oplossen met een klein plaatje niet zo heel erg, daarnaast werkt dat beter cross browser.

Andre, helaas dat werkt niet.

Mozilla heeft als het goed is binnenkort understeuning voor '::marker' (als ::-moz-marker) en dan zal het wel mogelijk zijn als ik me niet vergis, maar dat is dus toekomstmuziek voor "real world" problemen.

[André]

Verwijderd schreef op 13 mei 2004 @ 10:39:
[...]
De bullet is onderdeel van de li zelf, hij staat er niet voor. Ga je met negatieve margins werken hebben die dus ook effect op de bullet. Oplossing is allen de tekst in de LI aanspreken door er een span of p in te zetten.

Klopt, weet ik, alleen niet zo snel bij nagedacht.

[Verwijderd]

Verwijderd schreef op 13 mei 2004 @ 10:41:
Riff: SPAN/P gebruiken hiervoor is gewoon lelijk. Wat dat betreft is het oplossen met een klein plaatje niet zo heel erg, daarnaast werkt dat beter cross browser.

Mee eens zoals ik al zei, maar ik geef iig alle mogelijkheden aan. Oja, als je je markup schoon wilt houden kun je het natuurlijk ook met een stukje JS doen, maar dat misschien wel wat ver natuurlijk

JavaScript:

<script type="text/javascript">
window.onload = minderRuimte;

function minderRuimte() {
    if (document.getElementsByTagName) {
        lists = document.getElementsByTagName('UL'); i = lists.length;
        while (i--) {
            if (lists[i].className != 'ruimte') continue;
            lis = lists[i].getElementsByTagName('LI'); j = lis.length;
            while (j--) {
                pee = document.createElement('P');
                    pee.appendChild(document.createTextNode(lis[j].firstChild.nodeValue));
                lis[j].appendChild(pee);
                lis[j].removeChild(lis[j].firstChild);
            }
        }
    }
}
</script>