[TUT] Slicen #3

ICTscripters maakt gebruik van cookies. Door het gebruiken en browsen naar onze site gaat je automatisch akkoord met het gebruik van cookies. Klik hier voor meer informatie

  • Hallo allemaal,

    Enige tijd terug heb ik twee voorgaande blogs / tutorials geschreven over het slicen. Mocht je deze nog niet hebben gelezen, bekijk dan deel 1 en deel 2 eerst!


    Deel 1: [TUT] Slicen
    Deel 2: [TUT] Slicen #2

    In deel 2 heb je de broncode geschreven voor je index pagina. In dit deel zal er gekeken worden naar de CSS, oftewel de Cascading StyleSheet.

    De mogelijkheden van CSS zijn zo gigantisch, dat het bijna onmogelijk is om alles in één bericht te zetten. Daarom zal ik niet alles behandelen, maar enkel de standaarden en hetgene wat nodig is voor het voorgaande deel. Let op: Het is nog steeds een hele lange tutorial, dus ik hoop dat hij de moeite waard is! :)

    Waar moet je op letten met CSS?
    Het is van belang dat je weet dat elke browser de css anders behandeld. Dit houdt in dat het soms een hele taak kan zijn om je css zo te coderen dat het er in elke browser er hetzelfde uitziet. Ik zal hier straks verder op in gaan.

    Margin
    De margin is de ruimte die je meegeeft aan een element, rondom het element. Uhm, ja dat klinkt best lastig... Maar het is niet zo moeilijk. In deel #2 hebben we meerdere elementen aangemaakt. De header, het menu, het content gedeelte en de footer. Wanneer je nu naar de header kijkt, zie je dat het één groot rechthoekig blauw blok is. Dat hele blauwe blok, is het element. Echter, wanneer je naar de PSD kijkt, zie je dat er ook een ruimte is tussen de bovenkant van de template en het blauwe blok, maar ook tussen het blauwe blok en het menu. Deze ruimte is dus de margin! Let op: de margin is de ruimte die je aangeeft buiten het element. Mocht je dit nog niet helemaal snappen, kun je mij natuurlijk altijd een privé-bericht sturen.

    Padding
    Als je de margin eenmaal snapt, is de padding ook niet meer zo moeilijk. De padding is namelijk hetzelfde als de margin, echter is dit binnen het element. Dat houdt in wanneer je padding aan een bepaald element meegeeft, de inhoud binnen het element verplaatst zal worden.

    LET OP: De tekst elementen (h1,h2,h3,h4,h5,h6 & p) hebben standaard een margin en padding van zichzelf!

    Position
    Met de CSS kun je ook de positie aangeven van een bepaald element. Tevens kun je hiermee ook aangeven hoe deze ten opzichte van de browser moet verschijnen. Vaak raken mensen snel in de war, door het verschil tussen position & paddings en margins. Omdat dit nog maar een beginners tutorial is, wil ik hier niet te veel op in gaan. Ik raad je dan ook aan om pas te beginnen met positions zodra je de basis al snapt!

    Float
    Een ander belangrijk iets dat je zult gaan gebruiken is float. Met float kun je elementen naast elkaar zetten. Dit is wat lastiger om uit te leggen, maar ik zal mijn best doen...

    Wanneer je kijkt naar de PSD, zie je een content gedeelte. In dit content gedeelte staat nu tekst. Maar je zou er ook voor kunnen kiezen om te zeggen dat we naast de tekst ook een afbeelding willen hebben staan. Hierdoor creëer je dus eerst één groot blok waar de inhoud in komt te staan. Binnen in dit blok, zul je de afbeelding en de tekst naast elkaar moeten zetten. Het is van belang dat het eerste grote blok wat je maakt een bepaalde breedte heeft. De twee blokken die je binnenin dit blok plaatst, mogen dan nooit groter zijn dan de breedte die je hebt aangegeven. Gebeurd dit wel, dan zullen de blokken onder elkaar komen te staan.

    Het nadeel van float is, dat je met float zegt dat de elementen niet meer verticaal (Standaard) gebouwd moeten worden, maar horizontaal. Je zet de elementen nu namelijk naast elkaar. Om fouten te voorkomen in je template, moet je dan gebruik maken van een clearfix. Je moet namelijk aangeven dat je niet meer horizontaal, maar weer verticaal wilt bouwen.

    Dat is wel even lastig om te begrijpen, maar mocht je hier aan toe zijn kun je hier meer informatie vinden:
    sceneone.nl/tips_tricks/clearfix.php


    Tijd om te beginnen met het maken van de CSS
    Nu we een paar basis elementen hebben besproken, kunnen we beginnen met het bouwen van de css. Je begint uiteraard met het maken van een nieuw bestand. Dit bestand geef je de extensie .css (zodat de server weet dat dit een css bestand is). De naam van het css bestand hebben we in deel #2 al genoemd. Dit is namelijk opmaak. Het is meer gebruikelijk om er voor te kiezen om de naam style te gebruiken, maar dat doet er eigenlijk niet zo veel aan toe.

    De totale naam van je bestand is dus: opmaak.css


    Let op: De naam van je bestand moet overeenkomen met hetgene wat je hebt aangegeven in de HEAD van je index.html


    Ik zelf vind het altijd fijn om te beginnen met wat commentaar alvorens ik begin met de daadwerkelijke css. Hierdoor houd ik het overzichtelijk. Ik begin de altijd als volgt:

    Source Code

    1. /*
    2. Dit is het css bestand voor de slice tutorial.Deze tutorial is geschreven door Mathieu Rigault - TwistedMonkey
    3. */



    Nu heb ik er wat algemeens ingezet, maar hier zou je je naam etc. neer kunnen zetten.

    Vervolgens begin ik met het meest standaard wat er ingeladen moet worden. Namelijk de html en body. Hierin geef ik aan welke achtergrond er geladen moet worden, maar ook dat er geen margin en paddings mogen zijn rondom het body element. (Body is de body de we hebben aangemaakt in ons HTML bestand).

    Dit doen we op de volgende manier:

    Source Code

    1. html,body {
    2. background: #c8c8c8;
    3. margin: 0;
    4. padding: 0;
    5. }


    Maar hoe werkt dit nu eigenlijk?
    Allereerst geef je aan welk element je een bepaalde opmaak wilt geven. Dit doe je door de naam van het element + {. De opmaak sluit je vervolgens weer af met }.

    Vervolgens zeggen we welke achtergrond we willen hebben. Dit doen we met background: #c8c8c8;. Wanneer je een bepaalde opmaak wilt geven, doe je dit door:

    Source Code

    1. wat wil ik stylen van het element: waarde ;


    Let erop dat je elk iets wat je wilt stylen, afsluit met een puntkomma (;).

    Vervolgens hebben we de margin. De margin bestaat altijd uit vier waardes. Namelijk boven,rechts,onder,links. Dat klinkt raar, maar dat is de volgorde die je moet hanteren. Je kunt er ook voor kiezen om elke waarde apart te noemen. Dit kun je doen door: margin-left: waarde; margin-right: waarde; margin-top: waarde; margin-bottom: waarde;.

    Ik kies er zelf altijd voor om het op de eerste manier te doen, aangezien je dit weer een paar regels code scheelt. Dus even onthouden: margin: boven,rechts,onder,links;. Maar, nu zie je dat ik in de eerste code alleen 0 heb toegevoegd!? Dat klopt inderdaad. Ik geef hiermee namelijk aan dat alle waardes 0 moeten zijn.

    Dit zelfde geldt voor de padding.

    We willen dat onze lay-out in het midden van de browser komt te staan. Om dit te doen, moeten we eerst een extra div aanmaken in onze html. Alle andere div's, zullen binnen deze div vallen. Deze div wordt een zogenoemde, wrapper genoemd of soms container. Dit doen we als volgt:

    HTML Source Code

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl" dir="ltr">
    3. <head>
    4. <title>Thjeu slicing tutorial</title>
    5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    6. <meta http-equiv="Content-Language" content="nl" />
    7. <link rel="stylesheet" type="text/css" href="opmaak.css" />
    8. </head>
    9. <body>
    10. <div class="wrapper">
    11. <div class="header">
    12. </div><!-- EINDE HEADER DIV -->
    13. <div class="menu">
    14. <ul>
    15. <li><a href="#">Pagina 1</a></li>
    16. <li><a href="#">Pagina 2</a></li>
    17. <li><a href="#">Pagina 3</a></li>
    18. <li><a href="#">Pagina 4</a></li>
    19. </ul>
    20. </div><!-- EINDE MENU DIV -->
    21. <div class="content">
    22. <h1>H1 Titel</h1>
    23. <p> Hier komt alle tekst te staan </p>
    24. </div><!-- EINDE CONTENT DIV -->
    25. <div class="footer">
    26. <p>Copyright 2013 - 2014 </p>
    27. </div><!-- EINDE FOOTER DIV -->
    28. </div><!-- EINDE WRAPPER DIV -->
    29. </body>
    30. </html>
    Laat alles zien


    Om dit aan te roepen in de css, doe je dat op de volgende manier:

    Source Code

    1. .naamvandeclass {
    2. }


    Omdat we gebruik maken van classes in ons html bestand, gebruiken we een punt. Mocht je gebruiken van ID voor het DIV element, dan gebruik je een #. Dit doe je dan door:

    Source Code

    1. #naamvanhetid {
    2. }


    Maar voor nu, maken we alleen gebruik van classes. Dus kun je dat id gedeelte even vergeten ;).

    Voor de wrapper moeten we aangeven wat de maximale breedte is van de lay-out, zodat de browser automatisch de lay-out in het midden neerzet. Dit doen we op de volgende manier:

    Source Code

    1. .wrapper {
    2. width: 884px // Dit is de maximale breedte die we gebruiken
    3. margin: 0 auto;
    4. }


    Je ziet dat ik hier margin: 0 auto; heb neergezet. Dit houdt in dat de ruimte aan de rechter- alsook de linkerzijde automatisch gemaakt moet worden aan de hand van de breedte van het beeldscherm.. Haha, lekker duidelijk. Maar neem dat maar even van me aan ;)

    Het aanmaken van de header doen we dan op de volgende manier:

    Source Code

    1. .header {
    2. }


    Maar nu willen we natuurlijk ook een bepaalde opmaak meegeven aan de header. Hij moet namelijk een achtergrond plaatje hebben en een ruimte tussen de bovenkant van de browser en de header zelf. Dit doen we zo:

    Source Code

    1. .header {
    2. background: url('images/header-bg.png'); // We geven nu geen kleuren code aan, maar een link naar de achtergrond.
    3. margin: 20px 0 0 0; // Onthoud: boven, rechts, onder, links
    4. width: 884px; // de breedte van het element
    5. height: 211px; // de hoogte van het element
    6. }


    Zo, daar zijn weer een heleboel dingen bijgekomen! Je ziet nu dat wanneer ik een margin toevoeg, ik achter de waarde die ik willen hebben op de plek (boven,rechts,onder,links) er px achter zet. Dit staat voor pixels. Met andere woorden: Ik wil dat het element 20 pixels vanaf de bovenkant van de browser komt te staan. Dit zelfde geldt voor de width en height. Deze moet je toevoegen, zodat de browser weet hoe groot het element moet zijn.

    Wanneer je nu het bestand opslaat en het html bestand opent in je browser, zul je de header zien! :thumbup:

    Vervolgens hebben we het menu. Het menu heeft een paar nieuwe dingen. Namelijk, zoals je in de html hebt gezien ul. Een ul, oftewel een unorderd list, heeft ook standaard een margin en padding. Houdt hier rekening mee! Het menu maken we als volgt:

    Source Code

    1. .menu {
    2. background: #fff; // De achtergrond is helemaal wit, dus kunnen we gewoon een kleurencode gebruiken
    3. width: 884px;
    4. height: 38px;
    5. }
    6. .menu ul {
    7. margin: 10px 0 0 10px; // 10 pixels aan de bovenkant en 10 pixels aan de linkerkant
    8. padding: 0;
    9. list-style: none; // Wanneer je dit niet op none zet, zal er een bullet verschijnen. Speel hier maar mee :)
    10. }
    11. .menu ul li {
    12. float: left; // We willen de list items naast elkaar hebben
    13. padding: 0 10px 0 10px; // 10 pixels aan de rechter en de linkerkant. Je kunt dit ook schrijven als: padding: 0 10px;
    14. }
    15. .menu ul li a {
    16. text-decoration: none;
    17. color: #000;
    18. font-size: 14px;
    19. font-family: arial;
    20. }
    Laat alles zien


    En... Daar gaan we weer... Nog een heleboel zaken die er bij komen kijken. Het eerste gedeelte zou voor zichzelf moeten spreken (de .menu class). Maar dan krijgen we de ul. De ul zetten we achter de naam van de class, zodat alleen de ul gestyled wordt die in deze class zit. Je zou namelijk ook een ul in het content gedeelte kunnen maken, maar deze zal dan niet gestyled worden. Vervolgens hebben we LI. Dit staat voor list item. Oftewel elk item wat we in de lijst willen hebben, stylen we met li. En tot slot hebben we a. Dit staat voor anchor, zoals ook in deel #2 is behandeld. Een anchor tag heeft standaard altijd de volgende waardes: Een underscore en een paarse kleur. Dit willen we niet, vandaar dat we deze waardes aangeven voor de anchor tag.

    Zo, dat was een gigantisch lange tutorial, waar eigenlijk nog meer hééél weinig is behandeld. Echter hoop ik hiermee wel dat je een idee krijgt hoe CSS werkt. Huh, is dat al het einde? ;( Ja! Je zult namelijk nu zelf kunnen bedenken hoe je de rest van de lay-out in elkaar kunt zetten! Het was voor mij vrij lastig om het goed en duidelijk uit te leggen, dus mochten jullie nog suggesties hebben, hoor ik die graag! Voor nu succes en bedankt voor het lezen! :D

    948x gelezen

Reacties 2

  • Reza -

    Bedankt! Zelf ben ik niet super in designen of in slicen, vond het altijd al een warrige boel.
    Toch probeer ik het vaak door kleine lay-outs te slicen, en door deze tutorioals heb ik naslag werk.

  • K.Rens -

    Super! Bedankt om ook dit deel toe te voegen. :)