CSS Kleur #ffffff is donker grijs in mijn element

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Danny Spinhuis

Danny Spinhuis

24/01/2012 15:49:27
Quote Anchor link
Beste leden,

ik ben nog iets vreemds tegen het lijf gelopen met mijn css code.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
.sluiten {
    background-color: #000;
    position: absolute;
    border-top: solid 1px #fff;
    z-index: 1001;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    width: 200px;
height: 10px
    left: 0px;
    bottom: 0px;
}


De tekstkleur hoort wit (color: #ffffff;) te zijn, maar is bij mij donkergrijs in het element. How come?
 
PHP hulp

PHP hulp

29/03/2024 02:31:09
 
Wouter J

Wouter J

24/01/2012 16:06:23
Quote Anchor link
Het wordt hier gewoon wit. Weet je zeker dat je nergens anders de kleur op grijs hebt gezet? Of heeft .sluiten misschien ook nog een id die je met donkergrijs stijlt? Kun je misschien een online voorbeeld geven?
 
Danny Spinhuis

Danny Spinhuis

24/01/2012 16:53:40
Quote Anchor link
hmmm ik heb echt aandachtig gekeken maar ik kan niets vinden van een donker grijze kleur.
Ik kan helaas geen voorbeeld laten zien aangezien ik hier op werk op een lokale server werk.
 
TJVB tvb

TJVB tvb

24/01/2012 16:55:29
Quote Anchor link
Kun je de html met css niet ergens publiek neerzetten dat we eens meekijken.
Of selecteer met bijvoorbeeld firebug het element wat wit moet zijn en er grijs uitziet. Dan zie je waar het welke eigenschappen van krijgt.
 
Danny Spinhuis

Danny Spinhuis

25/01/2012 09:37:09
Quote Anchor link
Inderdaad, bleek dat er een CSS klasse gebruikt werd met het volgende:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
a {
color: #444;
text-decoration: none;
}


Bedankt weer!
 
Erik Kraijenoord

Erik Kraijenoord

25/01/2012 12:19:13
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
.sluiten {
    background-color: #000;
    position: absolute;
    border-top: solid 1px #fff;
    z-index: 1001;
    text-align: center;
    color: #fff !important;
    font-weight: bold;
    width: 200px;
height: 10px
    left: 0px;
    bottom: 0px;
}


Nu pakt hij deze class font kleur wel, !important houd volgens mij in dat hij de aangewezen style MOET gebruiken voor hij naar andere zoekt. :)
Gewijzigd op 25/01/2012 12:29:40 door Erik Kraijenoord
 
Danny Spinhuis

Danny Spinhuis

25/01/2012 13:40:54
Quote Anchor link
Dat wist ik nog niet, super! bedankt voor de tip :)
 
Wouter J

Wouter J

25/01/2012 13:52:39
Quote Anchor link
Maar !important is eigenlijk maar een beetje een niet zo heel erg mooie methode. Als je goed gebruikt maakt van de CSS selectors, dus met tag selecteren; class selecteren; id selecteren dan voorkom je dit soort problemen.

Ik vind dit probleem eigenlijk wel vreemd. In CSS gaan styles die je op class zet namelijk voor de styles die je op een tag zet. Voorbeeldje:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<body>
  <div id="box" class="container someDiv"></div>
</body>

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
16
17
18
19
20
21
22
23
24
25
26
div
{
  width: 100px;
  height: 100px;
  background: red; /* div wordt rood */
}
.container
{
  background: blue; /* div wordt blauw, want een class gaat boven een tag */
}
.someDiv
{
  background: orange; /* div wordt oranje, want als het niveau gelijk is maakt de volgorde uit */
}
.someDiv.container
{
  background: purple; /* div wordt paars, want hoe gespecificeerder hoe meer voorrang */
}
#box
{
  background: green; /* div wordt groen, want een id gaat boven een class */
}
body > #box
{
  background: yellow; /* div wordt geel, want een gespecificeerde selector gaat boven een niet gespecificeerde selector */
}
 
Danny Spinhuis

Danny Spinhuis

25/01/2012 13:59:47
Quote Anchor link
Juist duidelijk. Ik werk hier met meerdere mensen aan en iemand heeft ooit een keer een CSS gebruikt uit een externe php bestand die ik over het hoofd zag. Bedankt voor je uitleg
 



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.