li bullet stylen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ralph vander tang

ralph vander tang

19/08/2013 15:25:12
Quote Anchor link
hoi iedereen,
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)
PHP script in nieuw venster Selecteer het PHP script
1
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>
?>


deze li bedoel ik dan
 
PHP hulp

PHP hulp

20/12/2024 08:13:57
 
Chris PHP

Chris PHP

19/08/2013 15:32:51
Quote Anchor link
Ja hoor vrij makkelijk.

Je lijst doe je zo.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
li {
  color: blue; /* bullet kleur */
}
li span {
  color: black; /* tekst kleur */
}
 
Ralph vander tang

ralph vander tang

19/08/2013 15:34:35
Quote Anchor link
dat ik daar niet aan gedacht heb zal ik nu wel alles weer tussen spans moeten gaan zetten maar het is niet anders
 
Chris PHP

Chris PHP

19/08/2013 15:35:28
Quote Anchor link
Maar dit werkt niet.
<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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
li {
  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
 
Ralph vander tang

ralph vander tang

19/08/2013 15:36:49
Quote Anchor link
dit was mijn class waarmee ik wat geprobeerd heb
 
Chris PHP

Chris PHP

19/08/2013 15:37:43
Quote Anchor link
@Ralf,

Aaaah ok ;-) dat heb ik over het hoofd gezien, ik gebruik zelf korte en gerichte namen. Mijn fout.
 
Ralph vander tang

ralph vander tang

19/08/2013 15:37:56
Quote Anchor link
ik heb nu een image gebruikt was sneller
 
Chris PHP

Chris PHP

19/08/2013 15:40:45
Quote Anchor link
Sneller? Je bedoeld ipv typen? want nu moet je een extra afbeelding laden (ook al zal deze klein zijn). Als het kan met CSS waarom voor een afbeelding gaan?

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
 
Lendl Verschoor

Lendl Verschoor

19/08/2013 15:59:18
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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 */
}


Online voorbeeld linky
 
Jeroen VD

Jeroen VD

19/08/2013 18:52:13
Quote Anchor link
lendl, chris zijn manier is beter. je gaat nu met css dingen creeren die er niet zijn, en bovendien, echt niet nodig zijn, veels te moeilijk doen. je kunt semantisch prima het span tag gebruiken, en het zal in elke browser werken semantisch namelijk ook een stuk beter
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.