Website Maken II
Introductie
In deel 1 van deze tutorial hebben we een indeling gemaakt van een HTML pagina, in dit deel gaan we ervoor zorgen dat het eruit komt te zien zoals we dat willen, door
middel van CSS (Cascading Style Sheets). De CSS code komt tussen de <style> tags, zoals we al in deel 1 hebben geleerd. Vanaf hier zal ik de tags als html weergeven, in plaats van <html> tag.
Ook hier ga ik beginnen met de html en de body, de head zal niet zichtbaar zijn op de pagina, dus deze hoeven we ook niet te
stijlen. In de praktijk wordt een body vaak op dezelfde manier benaderd als de html, maar omdat we hier willen dat de gehele pagina 960 pixels
breed is, kunnen we dit alvast definiëren in de body. Standaard zijn deze tags 100% breed en de hoogte is afhankelijk van de inhoud.
| Taal: CSS | |
1 23 45 6 | html { background-color:#ffffff;} body { width:960px; } |
| Parsetijd: 0.007 seconden | |
Voor het voorbeeld heb ik wederom de randen voor de div's erbij gehaald:
We willen dat de body in het midden is uitgelijnd, hiervoor gebruiken we het margin attribuut, deze kan op 3 manieren geschreven worden. Als
het 1 waarde heeft, geldt dit voor de bovenkant, links, rechts en de onderkant. Wanneer het 2 waarden heeft, geldt de eerste voor de bovenkant en onderkant. De tweede
waarde geldt voor de linkerkant en rechterkant. Met 4 waarden is de volgorde: boven, rechts, onder en links. Dit is te onthouden met trouble voor top, right,
bottom en left. Hier hebben we maar 2 waarden nodig, de bovenkant en onderkant krijgen een marge van 0 pixels, links en rechts krijgen de waarde auto om
het in het midden uit te lijnen:
| Taal: CSS | |
1 23 45 67 | html { background-color:#ffffff;} body { width:960px; margin:0px auto;} |
| Parsetijd: 0.007 seconden | |
Nu ziet onze pagina er zo uit:
De schrijfwijze, of syntax van CSS is als volgt: Eerst geven we het element op waar we de stijlen aan willen toewijzen, in dit geval beginnen we met
html. Dit wordt gevolgd door accolades { en } waartussen de stijlregels komen te staan. Eerst het attribuut background-
color gevolgd door een dubbele punt : en de gewenste waarde #ffffff. Elke regel wordt afgesloten met een puntkomma ; .
Hier heb ik de html een witte achtergrondkleur meegegeven, door middel van een hexadecimale waarde, er zijn ook kleuren die door middel van een woord
gedefiniëerd kunnen worden, maar wegens de beperkingen daarvan, zal ik hier ingaan op de hexadecimale waarden. Dit begint met een hekje, gevolgd door twee cijfers
voor rood, daarna twee cijfers voor groen, en twee cijfers voor blauw. Een overzichtje:
#ffffff: Wit#000000: Zwart#ff0000: Rood#00ff00: Groen#0000ff: Blauw#ffff00: Geel#ff00ff: Paars#00ffff: Cyaan
De invulling van de body
We beginnen maar eens met de randen die ik heb gebruikt in bovenstaande voorbeelden, zwarte randen van 1 pixel breed. Deze moet doorlopen, vandaar de
solid. Hier kunnen ook onder andere de waarden dotted of dashed gebruikt worden, voor respectievelijk een gestippelde of
gestreepte rand:
| Taal: CSS | |
1 23 45 | div { border-width:1px; border-style:solid; border-color:#000000;} |
| Parsetijd: 0.007 seconden | |
Met deze code worden alle div's in de pagina aangesproken. Niet elke div moet dezelfde stijl krijgen, dus hier komen de id
attributen van pas die we in de HTML code hebben gezien, te beginnen met de breedte en hoogte van de div's:
| Taal: CSS | |
1 23 45 67 89 1011 1213 1415 16 | div#header { width:960px; height:100px; }div#section { width:800px; height:500px; }div#aside { width:160px; height:500px; }div#footer { width:960px; height:50px; } |
| Parsetijd: 0.007 seconden | |
Nu zien we dat de breedte wel is aangepast, maar alles staat nog onder elkaar. De volgende stap is de positionering, we gebruiken een relatieve positie, hierbij wordt
dan de positie van het bovenliggende element, in dit geval body, gebruikt om de div's te positioneren, daarna kunnen we een top
en een left toewijzen, omdat we van de hoek linksboven uitgaan. Hier kunnen ook bottom of right gebruikt worden.
| Taal: CSS | |
1 23 45 67 89 1011 1213 1415 1617 1819 2021 2223 2425 2627 28 | div#header { width:960px; height:100px; position:relative; top:10px; left:0px;} div#section { width:800px; height:500px; position:relative; top:10px; left:0px; }div#aside { width:160px; height:500px; position:relative; top:10px; left:800px;} div#footer { width:960px; height:50px; position:relative; top:10px; left:0px; } |
| Parsetijd: 0.009 seconden | |
Hierbij vallen twee dingen op, ten eerste dat de div#section tegen de div#header aan staat, ondanks dat we een top:10px;
opgegeven hebben. Dit komt omdat de div#header ook al een top:10px; heeft, daarom zullen er bij de div#section nog 10 pixels bij
moeten. Bij de div#footer moeten er dan twee keer 10 pixels bij. Het tweede dat opvalt is dat de div#aside nog steeds onder de
div#section staat, hier hebben we te maken met hetzelfde probleem als het eerste punt, dus moeten we de div#aside een negatief getal toewijzen
ter grootte van de hoogte van div#section, minus de eerder opgegeven top:20px;. Hier moeten we echter de randdikte van de
div#section er weer bij optellen, dus komen we uit op top:-482px;. Als we dit doen komen we erachter dat de div#footer ook 482 pixels naar beneden is geplaatst, dit moeten we dan ook weer opvangen. Hierbij gebruiken we de top:30px; in plaats van top:20px; om uiteindelijk uit te komen op top:-472px;:
| Taal: CSS | |
1 23 45 67 89 1011 1213 1415 1617 1819 2021 2223 2425 2627 28 | div#header { width:960px; height:100px; position:relative; top:10px; left:0px;} div#section { width:800px; height:500px; position:relative; top:20px; left:0px; }div#aside { width:160px; height:500px; position:relative; top:-482px; left:800px;} div#footer { width:960px; height:50px; position:relative; top:-472px; left:0px; } |
| Parsetijd: 0.009 seconden | |
Nu blijft er nog één puntje over: de div#aside staat tegen de div#section aan. Nu kunnen we de div#aside 10 pixels
naar rechts verplaatsen, maar dan moet deze ook 10 pixels smaller worden om nog netjes in de pagina te passen. Het is dus makkelijker om de div#section 10
pixels smaller te maken.
Hieronder een samenvatting van de code, hierbij heb ik meteen achtergrondkleuren aan de div's toegevoegd, zoals dit in de introductie is behandeld:
| Taal: CSS | |
1 23 45 67 89 1011 1213 1415 1617 1819 2021 2223 2425 2627 2829 3031 3233 3435 3637 3839 4041 4243 44 | html { background-color:#ffffff;} body { width:960px; margin:0px auto;} div { border-width:1px; border-style:solid; border-color:#000000; }div#header { width:960px; height:100px; position:relative; top:10px; left:0px; background-color:#ff0000; }div#section { width:790px; height:500px; position:relative; top:20px; left:0px; background-color:#0000ff; }div#aside { width:160px; height:500px; position:relative; top:-482px; left:800px; background-color:#0000ff; }div#footer { width:960px; height:50px; position:relative; top:-472px; left:0px; background-color:#ff0000; } |
| Parsetijd: 0.012 seconden | |
En daar hebben we de pagina zoals we die hebben willen opzetten.
Er zijn nog vele andere manieren om elementen te positioneren of om marges te gebruiken, dit wordt echter veel te veel om uit te leggen in deze tutorial. Wellicht dat dit in de toekomst nog gaat komen. Ook zijn er nog veel meer attributen te gebruiken binnen CSS, om een lettertype aan te geven, of een lettergrootte of tekstkleur, dit zal in het volgende deel behandeld worden.
Tot dusver hebben 69 lezers dit bericht gewaardeerd.
Stemmen & Reacties
Er zijn nog geen reacties op dit item. Plaats de eerste!