CSS Validate

[Vecodo]

Goedendag mensen,

Zoals jullie weten ben ik bezig met een nieuwe website te ontwikkelen. Tijdens dit proces let ik heel erg op Semetrische opbouw. validate CSS. Cross-browser compatibialtie. en dergelijke.

Op het moment dat ik mijn CSS geen valideren kreeg ik het volgende :

code:

Regel : 15 (Level : 1) U heeft geen achtergrondkleur opgegeven : html 
Regel : 23 (Level : 1) U heeft geen kleur voor uw achtergrondkleur opgegeven : #Main_Container 
Regel : 33 (Level : 2) Herdefinitie van margin-top : #Header_Container 
Regel : 42 (Level : 2) Herdefinitie van margin-top : #Header_Container ul 
Regel : 46 (Level : 2) Herdefinitie van margin-left : #Header_Container ul 
Regel : 46 (Level : 2) Herdefinitie van margin-right : #Header_Container ul 
Regel : 46 (Level : 2) Herdefinitie van margin-bottom : #Header_Container ul 
Regel : 46 (Level : 2) Herdefinitie van margin-top : #Header_Container ul 
Regel : 63 (Level : 1) U heeft geen achtergrondkleur opgegeven : #Header_Container li a 
Regel : 76 (Level : 1) U heeft geen achtergrondkleur opgegeven : #Header_Container li a:hover 
Regel : 136 (Level : 1) U heeft geen achtergrondkleur opgegeven : #Locator li a:hover 
Regel : 144 (Level : 1) U heeft geen kleur voor uw achtergrondkleur opgegeven : #Content_Container 
Regel : 152 (Level : 1) U heeft geen kleur voor uw achtergrondkleur opgegeven : #Content_Main 
Regel : 160 (Level : 1) U heeft geen kleur voor uw achtergrondkleur opgegeven : #Content_Extra 
Regel : 185 (Level : 1) U heeft geen achtergrondkleur opgegeven : A:hover 
Regel : 190 (Level : 1) U heeft geen achtergrondkleur opgegeven : A:link 
Regel : 195 (Level : 1) U heeft geen achtergrondkleur opgegeven : A:active 
Regel : 200 (Level : 1) U heeft geen achtergrondkleur opgegeven : A:visited 
Regel : 206 (Level : 1) U heeft geen achtergrondkleur opgegeven : h1 
Regel : 212 (Level : 1) U heeft geen achtergrondkleur opgegeven : h2

Hoe is dit op te lossen, want sommige Divs/Containers/Headings wil je gewoon geen background meegeven.
op het moment dat jij een : Background:; inzet pakt hij die ook niet.
Iemand nog slimme tips ?

[JHS]

Volgens mij kan je die waarschuwingen gewoon negeren, het zijn tenslotte waarschuwingen en geen fouten. Ik vermoed dat dit meer te maken heeft met toegankelijkheid dan de feitelijke CSS spec... Overigens het is semantische opbouw, valide dan wel valid en cross-browser compatibiliteit dan wel compatibility .

[Vecodo]

JHS schreef op dinsdag 13 december 2005 @ 09:38:
Volgens mij kan je die waarschuwingen gewoon negeren, het zijn tenslotte waarschuwingen en geen fouten. Ik vermoed dat dit meer te maken heeft met toegankelijkheid dan de feitelijke CSS spec... Overigens het is semantische opbouw, valide dan wel valid en cross-browser compatibiliteit dan wel compatibility .

Offtopic : -----------------------------------------------
Ja Taal is nooit mijn Beste kant geweest .
Maar ik waardeer het als mensen mij verbeteren .
-------------------------------------------------------------
Als ik een container 100% meegeef.
Dan zal hij in IE altijd een streepje laten zien en in Firefox zal hij niks laten zien
( mits je dus geen body { height:100%; mee heb gegeven )

In deze Container heb ik 2 Divs staan. deze 2 divs hebben allebei een heigth mee gekregen van 100% ( zodat ze mee zouden rekken met de content. )

in IE gaat dit gewoon goed, maar in FireFox weer totaal niet, en ben op dit moment echt de wegkwijt.
Iemand de goede tip die me in de richting kan duwen ?

CSS

code:

#Content_Container {
    width:750px;
    height:100%;
    background-color:#FFFFFF;
    margin:0 auto;
    position:relative;
    margin-top:5px;
    margin-bottom:5px;
    }

#Content_Main {
    width:500px;
    height:100%;
    background-color:#FFFFFF;
    float:left;
    border-right:1px solid #569C43;
    }

#Content_Extra {
    width:249px;
    height:100%;
    background-color:#FFFFFF;
    float:right;
    text-indent:5px;
    }

#Footer {
    width:750px;
    height:20px;
    margin:0 auto;
    position:relative;
    text-align:center;
    line-height:18px;
    border-top:1px solid #569C43;
    border-bottom:1px solid #569C43;
    margin-bottom:5px;
    }

HTML

code:

    <div id="Content_Container">
        <div id="Content_Main"><h1>Home</h1></div>
        <div id="Content_Extra">Nieuws<br>Nieuws<br>Nieuws<br></div>
    </div>
    <div id="Footer">Copyright</div>

Online voorbeeld te bekijken op :
http://www.arrow-design.nl/Evolution/index.html

[ Voor 8% gewijzigd door Vecodo op 13-12-2005 09:45 ]

[Andre-85]

Je kan background-color: inherit gebruiken denk ik. Dan erft het child element de background color van het parent element.

[sjaakaq]

Overigens kun je #FFFFFF ook vervangen door #fff Of gewoon "white" zelfs, maar ik weet niet wat beter is.

[RM-rf]

het grootste gedeelte van de waarschuwingen betreft het opgeven van een kleur én een achtergrondkleur (dat je dan één van beiden vergeet) ....
volgens de WAI-guidelines (die bij css-validatie eigenlijk voornamelijk gechecked worden) moet je, als je een kleur opgeeft, ook een achtergrondkleur opgeven (en andersom) ...

de reden is dat je anders compleet afhankelijk bent van de default instellingen van gebruikers, en dat kan fout gaan (bv als je een witte achtergrondkleur opgeeft, maar de gebruiker heeft als default een inverse kleurbeeld, dus witte tekst op een donkere achtergrond, die zou dan geen tekst meer zien op je pagina).

je kunt om de 'waarschuwing' van de validator te ontlopen wel gewoon background-color: transparent opgeven (inherit niet, die mag wel bij kleur, maar achtergrondkleuren kunnen niet 'overerven')

Die oplossing haalt overigens enkel de validator-waarschuwing weg, maar lost niet het probleem op dat bij mensen met speciale eigen 'default' instellingen, zulke code tot een wprobleem kan leiden.

[Vecodo]

RM-rf schreef op dinsdag 13 december 2005 @ 10:30:
het grootste gedeelte van de waarschuwingen betreft het opgeven van een kleur én een achtergrondkleur (dat je dan één van beiden vergeet) ....
volgens de WAI-guidelines (die bij css-validatie eigenlijk voornamelijk gechecked worden) moet je, als je een kleur opgeeft, ook een achtergrondkleur opgeven (en andersom) ...

de reden is dat je anders compleet afhankelijk bent van de default instellingen van gebruikers, en dat kan fout gaan (bv als je een witte achtergrondkleur opgeeft, maar de gebruiker heeft als default een inverse kleurbeeld, dus witte tekst op een donkere achtergrond, die zou dan geen tekst meer zien op je pagina).

je kunt om de 'waarschuwing' van de validator te ontlopen wel gewoon background-color: transparent opgeven (inherit niet, die mag wel bij kleur, maar achtergrondkleuren kunnen niet 'overerven')

Die oplossing haalt overigens enkel de validator-waarschuwing weg, maar lost niet het probleem op dat bij mensen met speciale eigen 'default' instellingen, zulke code tot een wprobleem kan leiden.

Hmmms,
Als ik dus een background:transparent; mee geef aan een H1. dan waarschuwt de CSS validater mij hier nog steeds voor, op het moment dat ik : Inherit gebruik niet meer, en veranderd er niks aan de pagina...

Voorbeeldje :

code:

h2 {
    color:black;
    font-size:18px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background-color:transparent;
    }

Error = Regel : 222 (Level : 1) U heeft geen achtergrondkleur opgegeven : h2

[A_L]

Kijk ook even op de css-validator faq onder het vijfde kopje:

Why does the validator complain You have no background-color with your color?

If you don't specify color and background-color at the same level of specifity, your style sheet might clash with user style sheets. To avoid this, specify always both of them, see Section 9.1 "Color Contrast" in the W3C Note "CSS Techniques for Web Content Accessibility Guidelines 1.0" or the article CSS Color Issues by the CSS Pointers Group for a discussion.

Dit zit trouwens nog niet zo lang in de css-validator, een half jaartje ofzo.

[CH4OS]

Als je toch semantisch bekeken goede HTML wil hebben, kan je:

HTML:

<div id="Header_Container">
    <ul>
        <li><a href="http://www.arrow-design.nl/">Home</a></li>
        <li><a href="http://www.arrow-design.nl/">Over ons</a></li>
        <li><a href="http://www.arrow-design.nl/">Producten</a></li>
        <li><a href="http://www.arrow-design.nl/">Contact</a></li>
    </ul>  
</div>

ook kan veranderen in:

HTML:

<ul id="Header_Container">
<li><a href="http://www.arrow-design.nl/">Home</a></li>
<li><a href="http://www.arrow-design.nl/">Over ons</a></li>
<li><a href="http://www.arrow-design.nl/">Producten</a></li>
<li><a href="http://www.arrow-design.nl/">Contact</a></li></ul>

aangezien de CSS alleen van toepassing is op de unordered list (die je ook kan stylen en de layer (de div dus) eigenlijk niet nodig hebt... )

Zelfde geld overigens voor:

HTML:

<div id="Locator">      
    <ul>
        <li><a href="http://www.arrow-design.nl/">Home</a></li>
        <li><a href="#">Test</a></li>
    </ul>
</div>

kan dus ook met:

HTML:

<ul id="Locator">
    <li><a href="http://www.arrow-design.nl/">Home</a></li>
    <li><a href="#">Test</a></li>
</ul>

Tevens zou ik:

HTML:

<div id="Content_Main">
    <h1>Home</h1>
    Welkom op de website van Arrow Design.<br>
    Waar Design nooit stilstaat.<br><br>
            
    Arrow Design staat voor kwaliteit, Snelheid, Betrouwbaarheid.<br>
    Bent u op zoek naar een grafische vormgever? zoek niet verder.<br>

    Maar kijk rustig rond op onze bedrijfs website.
</div>

veranderen in:

HTML:

<div id="Content_Main">
    <h1>Home</h1>
    <p>Welkom op de website van Arrow Design.<br>
    Waar Design nooit stilstaat.</p>
            
    <p>Arrow Design staat voor kwaliteit, Snelheid, Betrouwbaarheid.<br>
    Bent u op zoek naar een grafische vormgever? zoek niet verder.</p>

    <p>Maar kijk rustig rond op onze bedrijfs website.</p>
</div>

Nu weten de zoekmachines beter, hoe de documentstructuur er uit ziet, omdat bijvoorbeeld de GoogleBot, niet kan zien hoe de pagina er uit ziet en zal het dus van de HTML-code moeten hebben...

Neem anders deze pagina van een devver van Parse even door, voor meer informatie over semantiek...

[ Voor 127% gewijzigd door CH4OS op 13-12-2005 11:59 ]