<h1>404 - Pagina niet gevonden</h1>
 
<p>De pagina die u probeerde te bezoeken bestaat niet of heeft nooit bestaan. Waarschijnlijk hebt u de URL verkeerd ingevoerd of u hebt op een dode link geklikt. U kan nu gewoon terug gaan naar de <a href="http://csslabs.be">home pagina</a>.</p>
 
<p class="bg">404</p>

In het voorbeeld kan je zien dat de css niet in een apart bestand staat, maar gewoon tussen de head tags. Dit doen we omdat we zeker willen zijn dat die 404 pagina wel voor de volle 100% werkt. De HTML van de pagina zit heel eenvoudig in elkaar, daarom bespreken we alleen de CSS code.

* {
margin:0;
padding:0;
}
body {
padding:40px;
}
h1 {
font:normal 17px Arial, Helvetica, sans-serif;
color:#bf1b05;
padding-bottom:3px;
}
p {
font:12px/20px Arial, Helvetica, sans-serif;
color:#424242;
width:340px;
}
a {
color:#2273b2;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}

Deze blok code hierboven is eigenlijk heel eenvoudig. Hij zorgt er gewoon voor dat alles netjes op zijn plaats staat en er goed uitziet. Hieronder begint het echte werk.

p.bg {
font:400px Georgia, "Times New Roman", Times, serif;
color:#f4f4f4;
position:absolute;
z-index:-5;
top:0;
left:0;
margin-top:-140px;
}

De eerste twee regels zorgen gewoon voor de opmaak. Position absolute zorgt er voor dat we de tekst gemakkelijk kunnen positioneren. Z-index geven we een negatieve waarde zodat de tekst onder alles staat. Met top nul en left nul zorgen we ervoor dat de tekst links boven komt te staan. Ten slotte gebruiken we margin-top om er voor te zorgen dat de tekst staat zoals we willen. Dit is gewoon even zoeken. Je moet enkele waarden proberen tot het goed staat.

<link rel="stylesheet" href="inc/print.css" type="text/css" media="print">

Als je de bovenstaande code tussen de head tags van je pagina plaatst, kan je het bestand print.css gebruiken als print stylesheet. Zoals je ziet doen we dat op dezelfde manier zoals we een gewone stylesheet invoegen. Het verschil zit hem in het attribuut media. Deze geven we de waarde print.

Nu zullen we in de CSS enkele waarden instellen.

body {
margin:0;
padding:0;
background-image:none;
background-color:#FFF;
color:#000;
}

Eerst zetten we de marges en padding op nul. Daarna halen we de eventuele achtergrond afbeeldingen weg. De achtergrond kleur maken we wit en de tekst zwart. Deze stappen zorgden ervoor dat alles door iedereen uitgeprint kan worden.

Nu moeten we nog een stukken weghalen, stukken die niet afgedrukt moeten worden. In het voorbeeld zullen we de sidebar, de afbeeldingen en de footer weghalen.

#sidebar, #footer, img {
display:none;
}

Alles in één bestand

Het is ook mogelijk om je printvriendelijke CSS in je bestaande stylesheet te zetten. Zo hoef je dus geen tweede stylesheet aan te maken. Om dit voor elkaar te krijgen kun je onderstaande code gebruiken.

@media print{
/* Hier komt je CSS voor het printen */
}
 
/* Hier zet je gewone CSS code */

Zelf kan je natuurlijk nog veel verder gaan. Probeer eens iets en laat het ons zien.

De layout is niet het enige dat veranderd is. Enkele artikels heb ik volledige opnieuw geschreven of aangepast. Het artikel Werken met z-index is bijvoorbeeld herschreven, de Css tooltips heb ik verbeterd…

1. De html

Bij dit voorbeeld nemen we een div genaamd ‘menu’ met daarin 2 links. Alles staat ook nog eens in een unordered list. De rest zie je hieronder.

<div class="menu">
<ul>
	<li class="home"><a href="http://csslabs.be">home</a></li>
	<li class="contact"><a href="http://csslabs.be/contact/">contact</a></li>
</ul>
</div>

2. De css

.menu ul {
list-style:none;
padding:0;
margin:0;
}
 
.menu ul li {
float:left;
}
 
.menu ul li a {
text-indent:-9000px;
display:block;
width:82px;
height:27px;
margin-right:1px; /* kleine ruimte tussen buttons */
}

Het stukje code van ‘menu ul’ spreekt voor zich. Float:left zorgt ervoor dat het menu horizontaal is. Als je dit weglaat staat alles gewoon onder elkaar. Text-indent:-9000px laat de tekst verdwijnen, ergens heel ver weg.

Nu zullen we de afbeeldingen als achtergrond instellen. De button en de hover-button zitten samen in één afbeelding. Dit ziet er dus als volgt uit.

.menu ul li.home a {
background:url(images/home.gif);
}
.menu ul li.home a:hover {
background-position:bottom;
}
.menu ul li.contact a {
background:url(images/contact.gif);
}
.menu ul li.contact a:hover {
background-position:bottom;
}

We stellen telkens de achtergrondafbeelding in. Dan zorgen we ervoor, als je over de link gaat, dat de achtergrondafbeelding veranderd van plaats. Dus de onderkant van het plaatje, met de hover button, wordt zichtbaar.

Nu heb je een image hover menu zonder javascript.

1. De html

<a class="tooltip" href="#"><span>blog voor en door webmasters</span>csslabs</a>

2. De css

a.tooltip {
position:relative;
}

Dit stukje code is heel belangrijk. Het zorgt ervoor dat de tooltip op de juiste plaats komt, bij de link dus.

a:hover.tooltip {
padding:0;
z-index:10;
}

Als je wil dat het werkt in IE6, moet padding er staan. Padding mag ook een andere waarde hebben in plaats van 0. Z-index zorgt ervoor dat de tooltip boven alles komt te staan.

a span{
display:none;
}

Hiermee wordt de tooltip verborgen wanneer het nodig is.

a:hover span {
position:absolute;
display:block;
top:20px;
left:15px;
width:110px;
z-index:10;
/* pure opmaak vanaf hier */
background:#FFFFDF;
border:1px solid #FCF05C;
color:#333333;
padding:2px 3px;
font:11px tahoma, Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
}

Eerst wordt de tooltip (span) absoluut gepositioneerd. Zo kunnen we hem goed plaatsen met top en left. Display block zorgt er voor dat de tooltip weer zichtbaar wordt en z-index zorgt er opnieuw voor dat de tooltip boven alles komt te staan. De opmaak is belangrijk om je tooltip duidelijk leesbaar te maken.

Klaar, en dit allemaal zonder javascript!

Je kan z-index op twee verschillende manieren gebruiken. We zullen beginnen met de eerste manier waarbij bijvoorbeeld een div absoluut gepositioneerd word.

Z-index - absoluut gepositioneerd

We veronderstellen dat we twee div elementen hebben en we willen ze op elkaar krijgen. We noemen ze layer1 en layer2.

.layer1 {
position:absolute;
height:100px;
width:200px;
}

.layer2 {
position:absolute;
z-index:1;
height:200px;
width:100px;
}

Layer1 heeft z-index 0 (standaard waarde), en layer2 z-index 1. Dus layer2 ligt nu boven op layer1.

Een extra tip
Als je een element absoluut gepositioneerd hebt staat die altijd in de linker bovenhoek van de pagina. Als je dit wil voorkomen moet je hem in een aparte div zetten die relatief gepositioneerd is. Dan zal hij zeker binnen die div blijven.

Z-index - relatief gepositioneerd

Nu zullen we twee div elementen stapelen door één van de twee relatief te positioneren. Om te beginnen zetten we gewoon twee div’s onder elkaar. Layer2 wordt relatief gepositioneerd en we geven hem als z-index waarde 1.

<div class="layer1"></div>
<div class="layer2"></div>

.layer1 {
width:100px;
height:100px;
}
 
.layer2 {
width:100px;
height:100px;
position:relative;
z-index:1;
}

Als je dit geprobeerd hebt zie je dat ze nog altijd onder elkaar staan. Dit komt omdat we layer2 nog moeten vertellen waar hij moet staan. We zullen hem boven layer1 zetten d.m.v. een negatieve top waarde. We trekken hem dus als het ware naar boven.

.layer2 {
width:100px;
height:100px;
position:relative;
top:-50px;
}

We zien dus dat je met z-index veel kan bereiken. Als je werkt met relatief gepositioneerde elementen kan je een element plaatsen ten opzichte van zijn oorspronkelijke plaats. Met absoluut gepositioneerde elementen kan je ze plaatsen ten opzichte van de pagina of een div (die relatief gepositioneerd is).

Nu je je favicon gemaakt hebt, moet je het ook nog gebruiken. Dit doe je door de volgende code toe te voegen tussen de head tags van je webpagina.

<link rel="shortcut icon" href="favicon.ico" />

Zo kan je bijvoorbeeld een extra stylesheet maken voor IE, of een ‘uw browser wordt niet ondersteund’ berichtje laten weergeven.

De code

De code zit eigenlijk heel eenvoudig in elkaar. Ik zal een voorbeeld geven en dan alle stukjes code uitleggen. Je zult ook zien dat het stuk if IE telkens terug komt.

<!--[if IE 6]>
Dit wordt alleen weergegeven in Internet Explorer 6
<![endif]-->

Het begint met <!– en eindigd met –>, dat is de structuur van stuk commentaar in je html code. Een normale browser zal dit dus negeren, wat ook de bedoeling is natuurlijk. In het voorbeeld zie je ook een voorwaarde: if IE 6 = als Internet Explorer 6. Die voorwaarde kan je aanpassen. In het voorbeeld hieronder wordt het stukje tekst alleen maar weergegeven in Internet Explorer 7.

<!--[if IE 7]>
Wordt alleen weergegeven door IE 7
<![endif]-->

Maar er zijn nog mogelijkheden. Je kan bijvoorbeeld een stukje tekst laten weergeven in browsers die ouder zijn dan IE6, of browsers vanaf IE5. In de volgende voorbeelden zal je zien dat je de voorwaarde nog uitgebreid kan worden.

<!--[if lt IE 7]>
Wordt alleen weergegeven door versies lager dan IE7
<![endif]-->

<!--[if gt IE 6]>
Wordt alleen weergegeven door versies hoger dan IE6
<![endif]-->

<!--[if lte IE 6]>
Wordt alleen weergegeven door versies lager dan IE6 en IE6
<![endif]-->

<!--[if gte IE 5]>
Wordt alleen weergegeven door versies hoger dan IE5 en IE5
<![endif]-->

Even alles op een rijtje:
lt = lager dan
gt = hoger dan
lte = lager dan of gelijk aan
gte = hoger dan of gelijk aan

Wat als je nu wil dat er iets wordt weergegeven in alle browsers uitgezonderd IE. Heel simpel, dan gebruik je gewoon het volgende stukje code.

<!--[if !IE]><!-->
U bent verstandig, u surft niet met Internet Explorer.
<!--<![endif]-->

Nu is er nog één mogelijkheid. Je kan iets laten weergeven door een specifieke IE-browser en door alle niet-IE browsers. Zo dus.

<!--[if IE 7]><!-->
U gebruikt een niet-IE browser of IE7
<!--<![endif]-->

Een laatste tip

Als je de conditional comments gebruikt om een aparte stylesheet in te laden is er één regel. Eerst je gebruikelijke stylesheet inladen (niet met @-import), en dan pas je aparte stylesheet voor IE.

Gebruik dit alleen maar als het echt nodig is! Het is nog altijd beter als je een stylesheet hebt die in alle browsers zijn werk doet.

De eerste methode is de meest gekende. We nemen gewoon een inputveld met als type submit. Hieronder zie je de html.

De html

<input class="button" type="submit" value="submit" />

Het type van het input veld hebben we op submit gezet, klinkt logisch. Als value hebben we ook submit genomen, deze tekst komt op de button te staan. Als class nemen we button, zodat we alles kunnen opmaken in ons css bestand.

De css

input.button {
height:20px;
font:11px tahoma, arial;
cursor:pointer;
border:1px solid #F9F9F9;
background:#F4F4F4;
}

In de css stellen we de hoogte in, het lettertype en we zorgen er voor dat de cursor veranderd naar een handje als je er over gaat. Ook geven we de button een rand van 1 pixel en stellen we de achtergrond kleur in. Dit is maar een voorbeeld, zelf kan je nog veel verder gaan. Je kan bijvoorbeeld een achtergrond afbeelding instellen.

Nu is er ook nog een tweede manier. Deze wordt voornamelijk gebruikt om een afbeelding te gebruiken als button. In de html wordt het duidelijk.

De html

<input src="http://csslabs.be/wordpress/wp-admin/img/button.png" type="image" />

Zoals je ziet geven we hier al de url naar het plaatje mee, zo moeten we niet meer gaan werken in css.

Dit waren dus de methoden om je submit button te stylen. Probeer zelf wat creatief te zijn en laat ons zien wat je ervan gemaakt hebt.

1. Font

p {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
font-style:italic;
font-weight:bold;
line-height:18px;
}

Dit kan je beter zo doen. Let op, volgorde is belangrijk.

p {
font:italic bold 12px/18px Georgia, "Times New Roman", Times, serif;
}

2. Margin & padding

.container {
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
}

Dit wordt

.container {
margin:10px 20px 30px 40px;
}

De volgorde van de properties kan je gemakkelijk onthouden door middel van een klok. Je begint bovenaan en gaat met de wijzers mee. Zo gaat het ook met padding. Eerst top, dan right, dan bottom en tenslotte left. Deze regels gelden ook voor ‘padding’.

Als je de 3de (bottom) en 4de (left) waarde niet opgeeft, wordt er verondersteld dat de 3de waarde gelijk is aan de 1ste (top), en dat de 4de waarde gelijk is aan de 2de (right).

.sidebar {
margin-top:10px;
margin-right:20px;
margin-bottom:10px;
margin-left:20px;
}

Dit kan dus worden herschreven als

.sidebar {
margin:10px 20px;
}

Of dit

.sidebar {
margin-top:10px;
margin-right:20px;
margin-bottom:50px;
margin-left:20px;
}

Kan worden herschreven als

.sidebar {
margin:10px 20px 50px;
}

3. Background

body {
background-color:#FFF;
background-image:url(images/bg.png);
background-repeat:repeat-x;
background-position:top;
}

wordt

body {
background:#FFF url(images/bg.png) repeat-x top;
}

Als je één van de properties niet gebruikt laat je hem gewoon weg uit de shorthand propertie.

4. Border

.menu {
border-top-width:1px;
border-top-style:solid;
border-top-color:#000;
}

wordt

.menu {
border-top:1px solid #000;
}

dit kan dan weer worden veranderd naar

.menu {
border:1px solid #000;
}

5. List-style

.menu ul {
list-style-type:square;
list-style-position:inside;
list-style-image:url(images/list.png);
}

wordt

.menu ul {
list-style:square inside url(images/list.png);
}

6. Outline

.menu {
outline-color:#FFO;
outline-style:dotted;
outline-width:2px;
}

wordt

.menu {
outline:#FFO dotted 2px;
}