Webtips

Stileer een hr

De manier om een horizontale lijn op een pagina te plaatsen is tegenwoordig om een border om een element te plaatsen. De reden hiervoor is dat het hr-element in browsers op verschillende manieren weergegeven worden. Via css kunnen we zo’n lijn een kleur geven, en dat werkt in Mozilla maar niet in bijvoorbeeld Opera. Sommige browsers vinden het een ‘block’ element, andere weer zien het element als ‘inline’ of ‘inline-block’. Een helder artikel over het stileren van een hr-element is hier te vinden:
http://www.sovavsiti.cz/css/hr.html

Box model hacks

Er zijn een aantal methodes om de bekende ‘box model hack’ in te voeren, u weet wel de truc om Internet Explorer valse waarden te voeren, en toch de juiste door te geven aan browsers die wel hun best doen.
De eerste waar we op in gaan is de
Escaped character methode
De naam is wat het doet: een \ (escape) zorgt ervoor dat IE over de regel heenkijkt en pas weer bij de volgende selector begint te lezen. Andere browsers hebben geen last van de \ en interpreteren gewoon de laatste regel:

p {
        width: 200px;
        margin-left: 20px;
}
* html p {
        width: 200px;
        \width: 220px;
        w\idth: 200px;
}

De tweede methode is Alternate Box Model Hack. Dit is een vereenvoudiging van de eerste methode die er op neer komt dat de laatste regel gewoon wordt weggelaten. Werkt ook.

p {
        width: 200px;
        margin-left: 20px;
}
* html p {
        width: 220px;
        w\idth: 200px;
}

Dan is er een manier die wat minder net is (maar geen hacks nodig heeft): ‘Div’ities’, die inhoudt dat we in één div de breedte en hoogte aangeven, en in een andere padding (‘bladvulling’ zou ik moeten schrijven, maar begrijpt u het dan?) en marge. Als volgt:

#div1 { float: left; width: 300px; }
.innerdiv { padding: 10px; }

Het bepalen van marge en padding kan natuurlijk direct op een element (bijvoorbeeld een paragraaf) dat in die div zit, zonder een aparte div te maken:

#div { float: left; width: 300px; }
p { padding: 10px; }

Check van HTTP headers

In sommige gevallen wil je weten wat er wordt meegezonden in de HTTP header. De onderstaande site biedt een functie om dit te doen.
http://www.delorie.com/web/headers.html

IE 7

Nee zover zijn we nog niet, en moeten we met zijn allen hacks gebruiken om onze pagina’s er ook in helaas de meest gebruikte browser goed uit te laten zien. In afwachting van de eeuwige wijsheid van de Redmondse prinsen is Dean Edwards alvast begonnen om Internet Explorer te verbeteren, door de browser de standaarden beter te laten respecteren.
http://dean.edwards.name/IE7/

Erven van eigenschappen

In mijn vorige post schreef ik ‘erven van eigenschappen’ alsof het vanzelfsprekend is. Dat is het niet, en geloof me ik heb genoeg stijlpagina’s gezien waarvan de auteur(s) niet op de hoogte waren van deze basis van css. Dat ‘cascading’ staat er niet voor niets.
Het verschil tussen div p en div>p maakt de kracht van het erven duidelijk. Het eerste is te lezen als ‘elke paragraaf die deel uitmaakt van een div’, dus elke afstammeling van een div. De tweede is gerichter en spreekt ‘de paragraaf die meteen volgt op een div-selector’ aan. Het ‘kind’ van de div. Deze manier om het gedrag van kinderen te bepalen - Child selectors - wordt niet ondersteund door IE/Win!!!
Een uitstekende cursus over selectors is te vinden op: http://css.maxdesign.com.au/selectutorial/
Nog meer uitleg op http://nemesis1.f2o.org/aarchive?id=3
Andersom kan ook, om uitleg te krijgen van een complexe declaratie of om het verschil tussen twee alternatieve notaties (a.class:hover of a:hover.class) te zien: http://gallery.theopalgroup.com/selectoracle/

Een div centreren

Het is vrij eenvoudig om een div te centreren. De opzet bestaat eigenlijk uit twee stappen. De eerste is het aangeven dat zowel de linker- als de rechtermarge van de div ‘automatisch’ moeten worden bepaald, door margin: 0 auto; te declareren. Als het niet al te snuggere jongetje uit de klas begrijpt IE dit niet. Om deze browser een handje te helpen zetten we de volgende stap door text-align: center; aan de body toe te voegen. En klaar is onze gecentreerde div.

body {
text-align: center;
min-width: 600px;
}
#wrapper {
margin:0 auto;
width:600px;
text-align: left;
}

Door te schrijven dat de tekst in de body gecentreerd moet worden, geldt dit vanzelfsprekend - door het erven van eigenschappen - ook voor de tekst in de div. Door het toevoegen van text-align:left aan het doosje wordt dit verholpen.
De vraag is nu waarom de body een min-width aan zijn broek krijgt. Dit heeft te maken met gedrag in Mozilla. Als we dit niet vermelden, steekt de helft van de gecentreerde div aan de linkerkant uit de pagina. Het opgeven van een minimale breedte is de oplossing.
Voor meer informatie over de auto-margin methode: http://www.andybudd.com/…/centering_a_div

Mail to beschermen

Ik vergeet het telkens te schrijven, elke keer wanneer ik een e-mailadres wil afschermen moet ik het weer opzoeken. Vanaf vandaag niet meer nodig, want hier is: http://automaticlabs.com/home/