Dag,

Ik heb in CSS mijn list gekleurd maar ik wil graag enkel de bolletjes kleuren. Verder wil graag gebruik maken van submenu met een rondje dat hol is van binnen (een ring dus).

Zoiets als dit:

• list 1
  • sublist 1
• list 2

Ik wil alleen de rondjes en ringetjes kleuren. Verder moet de tekst zwart blijven. Iemand enig idee hoe dit gaat?

Groet,

Joost

De tekst in een <span> zetten. de li geef je dan de kleur voor de bolletjes en de span de kleur voor de tekst

Om een ringetje/open rondje te gebruiken, gebruik je de volgende CSS:

li {
list-style-type: circle;
}

Bas, even goed lezen, ben had de oplossing.

Ben geeft volgens mij geen oplossing voor een open rondje...? Had inderdaad niet op de datum van de laatste post gelet, als je dat bedoelt?

Wat gebeurt er als je de UL een kleur meegeeft en de LI een andere kleur?
(niet getest, maar kwam in me op)

@ Bas, klopt ik gaf geen oplossing voor het 2e rondje
@ Vincent dat heeft geen nut omdat alles in een Ul in een li hoort te staan. Het bolletje is onderdeel van de li

Origineel gepost door Ben Greeve

@ Vincent dat heeft geen nut omdat alles in een Ul in een li hoort te staan. Het bolletje is onderdeel van de li

Weet ik, aar soms reageert html weleens onlogisch ;)
In oudere browsers werkte het namelijk wel, nu helaas niet meer.

Is het dan niet slimmer om met een kleine achtergrondafbeelding te werken? Dan weet je zeker dat het in alle browsers werkt.

kun je niet het best gewoon via een plaatje doen. je gebruikt gewoon een achtergrond image voor de list en maakt hiervoor een plaatje van de benodigde circels.

Dat is precies wat ik zei.

oowh sorry dat had ik niet gezien.

Kan, maar waarom zou hij dat willen als hij enkel een bolletje bij zijn list wil?

Een extra span in het li is de enige correcte oplossing naar mijn mening.

Ben Greeve heeft naar mijn mening de beste oplossing gegeven. Om maar even het een en ander voor de kauwen:

HTML:

Code:

<ul>
<li><span>Item 1</span></li>
<li><span>Item 1</span></li>
<li><span>Item 1</span></li>
</ul>

CSS:

Code:

li { color: #00FFFF; }
li span { color: #FF0000; }