[css] afstand tussen bullet en tekst

[Verwijderd]

Weet iemand
hoe ik de afstand tussen een list item en de bijbehorende tekst kan aanpassen?

bv.

1.------item1
2.------item2

moet dit worden:

1.--item1
2.--item2

[- zijn spaties]

Ik moet gebruik maken van de [ol] en • tags

[ Voor 13% gewijzigd door Verwijderd op 26-04-2004 18:01 ]

[Blaise]

Padding van de <li> aanpassen met CSS

[ Voor 25% gewijzigd door Blaise op 26-04-2004 18:05 ]

[Verwijderd]

Padding werkt niet:
als ik negative waarden invul voor 'padding-left' dan gebeurd er niets.

padding: -50px
1.------item1

padding:0px
1.------item1

padding: +50px
1.--------------------item1

[Verwijderd]

nm

[ Voor 96% gewijzigd door Verwijderd op 26-04-2004 18:16 ]

[sjoerdb2]

zo?

code:

<ul>
<li><span style='margin-left: -10px;'>bla</span>
</ul>

[ Voor 80% gewijzigd door sjoerdb2 op 26-04-2004 18:21 ]

[bakakaizoku]

sjoerdb schreef op 26 april 2004 @ 18:20:
zo?

code:

<ul>
<li><span style='margin-left: -10px;'>bla</span>
</ul>

die zet volgens mij het item inclusief de bullet 10 pixels opzij

[Verwijderd]

Ja!!super!

jammer dat je dit blijkbaar niet in de li-tag geregeld kan worden.
De html is namelijk dynamisch en komt uit een database,
maar met een beetje search & replace kom ik er wel uit.

tnx sJoerdb!

[edit] hij zet de bullet 10px opzij als je hem direct in de li-tag zet

[ Voor 16% gewijzigd door Verwijderd op 26-04-2004 18:29 ]

[sjoerdb2]

Verwijderd schreef op 26 april 2004 @ 18:29:
Ja!!super!

jammer dat je dit blijkbaar niet in de li-tag geregeld kan worden.
De html is namelijk dynamisch en komt uit een database,
maar met een beetje search & replace kom ik er wel uit.

tnx sJoerdb!

[edit] hij zet de bullet 10px opzij als je hem direct in de li-tag zet

Ik vond via vriend google ook nog deze: http://archivist.incutio.com/viewlist/css-discuss/31205

Heb ik even mee gespeeld, maar daar kun je ook geen negatieve waarde opgeven.

[T-MOB]

Ik vrees dat je er met een "standaard" LI niet uit gaat komen, dat worden redelijk snel browserspeciefieke oplossingen. Om het w3c te quoten:

The marker box is outside the principal block box. Note. CSS1 did not specify the precise location of the marker box and for reasons of compatibility, CSS2 remains equally ambiguous. For more precise control of marker boxes, please use markers.

Je zult dus met markers moeten gaan werken... http://www.w3.org/TR/REC-CSS2/generate.html#q11 kan je daarbij helpen. Ik kreeg zou gauw ff geen voorbeeld aan het werk.

[T-MOB]

Toch wat werkend CSS gemaakt. De "ul>li" en "body>ul" zijn omdat IE er niets van snapt, die geeft een gewone lijst weer. Voor moz en opera kun je de boel instellen:

code:

body>ul
 {
 padding: 0;
 }
ul>li {
list-style-type: none;
}
li:before {
  display: inline;
  margin-right: 2px; /* stel hier afstand tussen bullet en text in */
  content: '*'; /* stel hier de bullit in (of een plaatje middels url(plaatje.png))*/
  }

edit: (voor een OL moet je dan in je CSS met een counter werken....)

[ Voor 15% gewijzigd door T-MOB op 26-04-2004 20:33 ]

[rewind.]

kijk hier is naar:

http://css.maxdesign.com.au/listutorial/index.htm

[ Voor 8% gewijzigd door rewind. op 26-04-2004 23:30 ]

[Savantas]

@Stoney187
Dit heeft een nadeel: met background images krijg je bij printen geen afdruk van de bullits.

edit:

Ik zie dat ze bij de voorbeelden bij print gewoon een normale bullit laten zien
Ja, zo kan ik het ook

[ Voor 39% gewijzigd door Savantas op 28-04-2004 09:47 ]