Inhoud
- Teken uw lay-out
- Schrijf eenvoudige HTML / CSS en maak een containerelement
- Style de container
- Gebruik een koptag voor de koptekst
- Om drie kolommen te krijgen, begint u met het bouwen van twee kolommen
- Voeg twee kolommen toe binnen de brede tweede kolom
- Voeg de voettekst toe
- Voeg uw persoonlijke stijlen en inhoud toe
CSS-lay-out vereist dat u denkt aan de lay-out van uw website als geheel en vervolgens de stukjes neemt en ze samenvoegt. Leer hoe u een eenvoudige lay-out met drie kolommen kunt bouwen met CSS.
Teken uw lay-out
U kunt uw lay-out op papier of in een grafisch programma tekenen. Als u al een draadframe of zelfs een uitgebreider ontwerp in gedachten heeft, vereenvoudig het dan tot de basisdozen waaruit de site bestaat. Dit ontwerp dat bij dit artikel hoort, heeft drie kolommen in het hoofdinhoudsgebied, evenals een koptekst en voettekst. Als je goed kijkt, zie je dat de drie kolommen niet even breed zijn.
Nadat u uw lay-out hebt uitgetekend, kunt u beginnen met het bedenken van afmetingen. Dit voorbeeldontwerp heeft de volgende basisafmetingen:
- Niet meer dan 900 pixels breed
- 20 px rugmarge aan de linkerkant
- 10 px tussen kolommen en rijen
- Kolommen die 250 px, 300 px en 300 px breed zijn
- De bovenste rij is 150 px hoog
- De onderste rij is 100 px hoog
Lees hieronder verder
Schrijf eenvoudige HTML / CSS en maak een containerelement
Aangezien deze pagina een geldig HTML-document zal zijn, begint u met een lege HTML-container.
Voeg de basis CSS-stijlen toe om de paginamarges, randen en opvullingen op nul te zetten. Hoewel er andere standaard CSS-stijlen zijn voor nieuwe documenten, zijn deze stijlen het minimum dat u nodig heeft om een schone lay-out te krijgen. Voeg ze toe aan de kop van je document.
Om te beginnen met het bouwen van de layout, plaatst u een containerelement. Het komt soms voor dat u de container later kunt verwijderen, maar voor de meeste lay-outs met een vaste breedte maakt het hebben van het containerelement het gemakkelijker om te beheren in verschillende webbrowsers.
Lees hieronder verder
Style de container
De container bepaalt hoe breed de inhoud van de webpagina zal zijn, evenals eventuele marges aan de buitenkant en opvulling aan de binnenkant.Voor dit document is de container 870 px breed met een goot van 20 pixels aan de linkerkant. De goot is opgezet met een marge-stijl, maar de vulling op de container is op nul gezet om te voorkomen dat elementen zo breed zijn als de container.
Als u uw document nu opslaat, zal het moeilijk zijn om de container te zien omdat er niets in zit. Als u tijdelijke aanduidingstekst toevoegt, kunt u het containerelement duidelijker zien.
Gebruik een koptag voor de koptekst
Hoe u besluit de koptekstrij te stylen, hangt sterk af van wat erin zit. Als de koptekstrij alleen een logoafbeelding en een kop heeft, gebruik dan een headline-tag (
) is logischer dan het gebruik van een . U kunt de kop op dezelfde manier opmaken als een div, en u vermijdt externe tags.
De HTML voor de koptekstrij staat bovenaan de container en ziet er als volgt uit:
Vervolgens, om de stijlen erop in te stellen, werd er een rode rand aan de onderkant toegevoegd zodat je kon zien waar het eindigde, de marges en opvulling waren op nul gezet, de breedte ingesteld op 100% en de hoogte op 150 px.
Vergeet dit element niet te laten zweven met de vlotter: links; eigendom. De sleutel tot het schrijven van CSS-lay-outs is om alles te laten zweven, zelfs dingen die dezelfde breedte hebben als de container. Zo weet je altijd waar de elementen op de pagina zullen liggen.
Een CSS-afstammingskiezer paste alleen stijlen toe op H1-elementen die zich in het #container -element bevinden.
Lees hieronder verder
Om drie kolommen te krijgen, begint u met het bouwen van twee kolommen
Wanneer u een lay-out met drie kolommen met CSS maakt, moet u uw lay-out in groepen van twee verdelen. Dus voor deze lay-out met drie kolommen worden de middelste en rechterkolom gegroepeerd en naast de linkerkolom geplaatst in een lay-out met twee kolommen, waarbij de linkerkolom 250 px breed is en de rechterkolom 610 px breed (elk 300 voor de twee kolommen) , plus 10 px voor de rugmarge ertussen).
De kolom aan de linkerkant zweeft naar links, terwijl de andere naar rechts zweeft. Omdat de totale breedte van beide kolommen 860 px is, is er een tussenruimte van 10 px.
Voeg twee kolommen toe binnen de brede tweede kolom
Om de drie kolommen te maken, voegt u twee divs toe in de bredere tweede kolom, net zoals u in de laatste stap 2 divs in de containerkolom hebt toegevoegd.
Aangezien deze twee 300px brede dozen zich in een 610px brede doos bevinden, zal er wederom een 10px goot tussen zitten.
Lees hieronder verder
Voeg de voettekst toe
Nu de rest van de pagina is vormgegeven, kunt u de voettekst toevoegen. Gebruik een laatste div met een 'voettekst'-id en voeg inhoud toe zodat u deze kunt zien. U kunt ook bovenaan een rand toevoegen, zodat u weet waar deze begint.
Voeg uw persoonlijke stijlen en inhoud toe
Nu u de lay-out hebt voltooid, kunt u beginnen met het toevoegen van uw eigen persoonlijke stijlen en inhoud. Vergeet niet dat de randen op de kop- en voettekst zijn toegevoegd om de lay-outsecties weer te geven, niet specifiek voor ontwerp.
De HTML voor de koptekstrij staat bovenaan de container en ziet er als volgt uit:
Vervolgens, om de stijlen erop in te stellen, werd er een rode rand aan de onderkant toegevoegd zodat je kon zien waar het eindigde, de marges en opvulling waren op nul gezet, de breedte ingesteld op 100% en de hoogte op 150 px.
Vergeet dit element niet te laten zweven met de vlotter: links; eigendom. De sleutel tot het schrijven van CSS-lay-outs is om alles te laten zweven, zelfs dingen die dezelfde breedte hebben als de container. Zo weet je altijd waar de elementen op de pagina zullen liggen.
Een CSS-afstammingskiezer paste alleen stijlen toe op H1-elementen die zich in het #container -element bevinden.
Lees hieronder verder
Om drie kolommen te krijgen, begint u met het bouwen van twee kolommen
Wanneer u een lay-out met drie kolommen met CSS maakt, moet u uw lay-out in groepen van twee verdelen. Dus voor deze lay-out met drie kolommen worden de middelste en rechterkolom gegroepeerd en naast de linkerkolom geplaatst in een lay-out met twee kolommen, waarbij de linkerkolom 250 px breed is en de rechterkolom 610 px breed (elk 300 voor de twee kolommen) , plus 10 px voor de rugmarge ertussen).
De kolom aan de linkerkant zweeft naar links, terwijl de andere naar rechts zweeft. Omdat de totale breedte van beide kolommen 860 px is, is er een tussenruimte van 10 px.
Voeg twee kolommen toe binnen de brede tweede kolom
Om de drie kolommen te maken, voegt u twee divs toe in de bredere tweede kolom, net zoals u in de laatste stap 2 divs in de containerkolom hebt toegevoegd.
Aangezien deze twee 300px brede dozen zich in een 610px brede doos bevinden, zal er wederom een 10px goot tussen zitten.
Lees hieronder verder
Voeg de voettekst toe
Nu de rest van de pagina is vormgegeven, kunt u de voettekst toevoegen. Gebruik een laatste div met een 'voettekst'-id en voeg inhoud toe zodat u deze kunt zien. U kunt ook bovenaan een rand toevoegen, zodat u weet waar deze begint.
Voeg uw persoonlijke stijlen en inhoud toe
Nu u de lay-out hebt voltooid, kunt u beginnen met het toevoegen van uw eigen persoonlijke stijlen en inhoud. Vergeet niet dat de randen op de kop- en voettekst zijn toegevoegd om de lay-outsecties weer te geven, niet specifiek voor ontwerp.
