background-image van een opsommingslijst paar pixels omlaag lukt niet

[damnsharp]

Ik weet dat je met "background-position:0px 5px;" een plaatje van een bullet voor een lijst wat omlaag/naar rechts krijgt. Maar om de een of andere reden lukt het bij een website waarmee ik bezig ben niet.

Bij pagina Agenda als voorbeeld heb ik in de CSS neergezet:

#post-30 ul {list-style: url(../images/roze.png); background-position: 0px 5px; font-size: 1.2em; list-style-position: inside; padding-bottom: 16px; }

Wat ik ook aanpas aan de background-position, het helpt niet.

Mijn demo website url: http://www.albuswebdesign.nl/demo/agenda/

Bedankt weer voor het meedenken, elke keer leer ik wat bij dankzij Helpmij.nl

 

[csshunter]

Hoi damnsharp,
Het roze rondje zit er op deze manier in als plaatsvervanger voor de normale zwarte disc-bullet, en komt daarmee op de plek van die bullet zonder dat er wat aan te veranderen is (wellicht in 1 of 2 browsers toch, maar dat is dan niet cross-browser).

Wil je de bg-positie kunnen beïnvloeden, dan moet je een {list-style: none;} gebruiken in de <ul>, en dan het background-img aan de <li>'s ophangen.
En verder:

• Om alles goed lijnend aan de linkerkant te krijgen: de margin-left en padding-left van de <ul> op 0 zetten, en de margin-left van de <li>'s ook.
• Met de padding-left van de <li>'s kan dan de afstand van de tekst tot het bolleke geregeld worden.
• En met de background-position kan de plek van de stip zelf aangepast worden.

Met vriendelijke groet,
CSShunter

 

[damnsharp]

Hoi csshunter, op jouw antwoord was ik nooit gekomen (inmiddels goed boek over CSS gehaald). Ik ga dat proberen maar gaat vast lukken door de uitleg :thumb: