li bullet stylen
is het mogelijk om de li bullets een kleur te geven zonder dat de tekst mee veranded en zonder dat daar eebn image bij noodzakelijk is
Mvg ralph
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<?php
<ul>
<li class = "margin-left-24px-square">
Na melding voorziet Figlo het verzoek binnen 5 werkdagen van een impact analyse. Afhankelijk van de impact bepaalt Figlo eventueel in overleg met Clint de planningsconsequenties
</li>
</ul>
?>
<ul>
<li class = "margin-left-24px-square">
Na melding voorziet Figlo het verzoek binnen 5 werkdagen van een impact analyse. Afhankelijk van de impact bepaalt Figlo eventueel in overleg met Clint de planningsconsequenties
</li>
</ul>
?>
deze li bedoel ik dan
Je lijst doe je zo.
Code (php)
1
2
3
4
5
2
3
4
5
<ul>
<li><span>voorbeeld 1</span></li>
<li><span>voorbeeld 2</span></li>
<li><span>voorbeeld 3</span></li>
</ul>
<li><span>voorbeeld 1</span></li>
<li><span>voorbeeld 2</span></li>
<li><span>voorbeeld 3</span></li>
</ul>
En zo je css
Code (php)
1
2
3
4
5
6
2
3
4
5
6
li {
color: blue; /* bullet kleur */
}
li span {
color: black; /* tekst kleur */
}
color: blue; /* bullet kleur */
}
li span {
color: black; /* tekst kleur */
}
<li class = "margin-left-24px-square">
Dan zou je het zo moeten doen
<li style = "margin-left:24px; list-style:square;">
Echter raad ik je aan geen inline css te gebruiken maar gewoon in je css.
Dus dan krijg je dat zo.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
li {
color: blue; /* bullet kleur */
margin-left: 24px;
list-style: square;
}
li span {
color: black; /* tekst kleur */
}
color: blue; /* bullet kleur */
margin-left: 24px;
list-style: square;
}
li span {
color: black; /* tekst kleur */
}
Gewijzigd op 19/08/2013 15:36:24 door Chris PHP
Aaaah ok ;-) dat heb ik over het hoofd gezien, ik gebruik zelf korte en gerichte namen. Mijn fout.
Als je het nu anders zou willen moet je weer een nieuwe afbeelding maken. Het is natuurlijk aan jezelf wat je wil, ik geef alleen een tip aangezien je om een CSS oplossing vroeg zonder een afbeelding.
Gewijzigd op 19/08/2013 15:50:36 door Chris PHP
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul {
list-style: none;
padding:0;
margin:0;
}
li {
padding-left: 1em;
text-indent: -.7em;
}
li:before {
content: " ";
color: red; /* or whatever color you prefer */
}
list-style: none;
padding:0;
margin:0;
}
li {
padding-left: 1em;
text-indent: -.7em;
}
li:before {
content: " ";
color: red; /* or whatever color you prefer */
}
Online voorbeeld linky
