15 Elementen groeperen

Oefening 15.5

Min-height en min-width

Maak op van uw een webpagina’s een div die u voorziet van een geschikte waarde voor min-height en min-width. Laat zien wat er gebeurt als u het lettertype verkleint en vergroot.

15.5 Vast en flexibel Veel webpagina’s zijn opgebouwd in twee kolommen. Links of rechts een smalle kolom voor de navigatie en daarnaast een brede kolom voor de inhoud van de website. In deze paragraaf bouwen we zo’n lay-out op. Er zijn verschillende methoden om een ontwerp met twee kolommen te maken. We kiezen als voorbeeld een ‘liquid design’, waarbij de hele breedte van het browser-venster wordt gebruikt. Aan de linkerkant is een kolom met vaste breedte voor de navigatie. Bij het indelen van de html-pagina gebruiken we div-elementen om de inhoud van de kolommen te groeperen. Uitgangspunt is een html-opzet met twee div-elementen, een divisie voor de navigatie en een divisie voor wat we voor het gemak ‘de inhoud van de webpagina’ zullen noemen: C



Op de plaats van de drie puntjes komt een invulling van de webpagina. Dit hoofdstuk concentreert zich op het maken van de lay-out. De pagina wordt niet compleet uitgewerkt; zo zijn er geen afbeeldingen en geen links.

15.5.1 Float Om de inhoud naast de navigatie te krijgen maken we de navigatie-div linkszwevend. De eigenschap float is hiervoor geschikt, zoals u in hoofdstuk 14 voor het eerst zag. U 17

DB_HTMLenCSS_15.indd 17

10/5/05 12:47:36

HTML EN CSS de basis

leerde daar ook dat niet alleen afbeeldingen kunnen zweven. Elk element kan dat en een div-element dus ook. De eerste opzet voor het stijlblad voor de pagina met twee kolommen is als volgt: C

#navigatie background float padding width }

{ : : : :

#aa26fe; left; 5px; 175px;

/* paars */

De navigatie-div geven we een paarse achtergrondkleur. Om twee kolommen te krijgen laten we de navigatie zweven (float: left), de andere div komt daar dan vanzelf naast omdat de navigatie-div plaats vrijmaakt. De padding zorgt ervoor dat de tekst niet tot aan de rand van de div loopt. De breedte zetten we vast op 175 pixels. Met de padding links en rechts erbij wordt de totale breedte dan 185 pixels.

Afbeelding 15.12 De eerste opzet voor een lay-out met twee kolommen is nog niet erg geslaagd.

Afbeelding 15.12 laat het resultaat zien van deze eerste opzet. Nog niet bepaald een lay-out van twee kolommen. Wat is er gebeurd? Een kenmerk van een div is dat hij zo groot is als nodig. Als de tekst van de div navigatie getoond is, dan is de div ‘afgelopen’. De rest van de tekst van de div inhoud loopt om de div navigatie heen, omdat navigatie linkszwevend is. Dat is de normale gang van zaken bij zwevende elementen (zie hoofdstuk 14), maar het is iets wat we nu niet willen. We willen dat er een linkerkolom ontstaat en dat de ruimte onder de div navigatie leeg blijft als de div is ‘afgelopen’.

18

DB_HTMLenCSS_15.indd 18

10/5/05 12:47:36

15 Elementen groeperen

15.5.2 Margin Een oplossing krijgen we als we de tweede div een grote marge toekennen aan de linkerkant, bijvoorbeeld 200 pixels: C

#inhoud { margin }

: 0 0 0 200px;

De div met de identificatie inhoud krijgt een marge van nul boven, rechts en onder, en een marge van 200 pixels aan de linkerkant. Een brede marge maakt de linkerkant vrij voor de navigatiekolom. Afbeelding 15.13 laat het resultaat zien. De tweede kolom is nu een echte kolom en als het venster wordt vergroot of verkleind, dan schaalt de kolom mee met het venster, precies zoals het plan was.

Afbeelding 15.13 Door een grote linkermarge toe te kennen aan het tweede div-element ontstaat de bedoelde tekstkolom aan de rechterzijde.

De linkerkolom met de navigatie kan nog wel beter. Het is nog niet echt een kolom. Als er meer tekst in de navigatie komt, dan wordt de rechthoek langer, maar wat we eigenlijk willen is een gekleurde kolom over het totale scherm. Het is altijd goed om buiten de hokjes te denken. Iemand heeft ooit bedacht dat het alleen maar hoeft te líjken alsof de navigatie-div de achtergrond verzorgt. In het echt kunnen we iets anders doen, namelijk een achtergrondplaatje aan het body-element toekennen en dat verticaal laten herhalen. We maken met een tekenprogramma een achtergrondverloopje van 200 pixels breed (afbeelding 15.14). De kleur loopt van paars, de kleur die de navigatie tot nu toe 19

DB_HTMLenCSS_15.indd 19

10/5/05 12:47:37

HTML EN CSS de basis

had (#aa26fe), naar oranje (#fdba79). Als we de body als achtergrondkleur datzelfde oranje geven, dan sluit het verloop mooi aan op de rest van de pagina. U kunt zelf uw fantasie gebruiken en andere kleuren gebruiken of een totaal andere afbeelding. Maak de afbeelding echter zo dat de onderkant naadloos op de bovenkant aansluit. Hoewel de afbeelding slechts 32 pixels hoog is, wordt hij verticaal herhaald zodat het idee van een kolom ontstaat. Afbeelding 15.14 Verloop van paars naar oranje, 200 pixels breed en 32 pixels hoog.

Om het verloop in de pagina te verwerken zijn twee aanpassingen nodig in het stijlblad. In het onderdeel navigatie verwijderen we de bestaande achtergrondkleur door de regel met background te verwijderen of door de background transparant te maken: C

background

: transparent;

/* background via body */

We voegen kleur en achtergrond toe voor het body-element. De achtergrond wordt oranje en het verloop wordt in de linkerbovenhoek geplaatst en verticaal herhaald. C

body { background color }

: #fdba79 url(verloop.gif) top left repeat-y; : black;

We hebben nu twee kolommen met in de linkerkolom een achtergrondkleur die over het gehele venster van boven naar beneden loopt (afbeelding 15.15). Het doel is dus bereikt. Deze techniek wordt in het Engels ‘faux column’ (nepkolom) genoemd.

Afbeelding 15.15 Twee kolommen gemaakt via de methode ‘faux column’.

20

DB_HTMLenCSS_15.indd 20

10/5/05 12:47:38

15 Elementen groeperen

Oefening 15.6

Twee kolommen

Maak een webpagina met twee kolommen, waarbij de kolom met hyperlinks niet aan de linkerkant zit, maar rechts.

De webpagina die in deze paragraaf is gemaakt, is inhoudelijk erg simpel. Er kan nog wel het een en ander worden verfraaid. Zo kan de navigatie mooier worden uitgevoerd, maar daarvan is in hoofdstuk 12 een voorbeeld gegeven. Aan de pagina kunnen kleuren, borders en afbeeldingen worden toegevoegd, maar in dit hoofdstuk doen we dat verder niet. We kijken alleen nog naar een kop- en een voetgedeelte.

15.6 Kop erbij In de voorgaande paragraaf hebben we met vallen en opstaan een lay-out gemaakt met twee kolommen. Soms is boven de twee kolommen een kop gewenst die over de hele breedte loopt. Als voorbeeld houden we het eenvoudig: een tekst op een groene achtergrond aan de bovenzijde van het scherm. Aan de html-pagina voegen we de volgende regels toe, vlak na de -tag en voor de navigatie-div: C



Aan het stijlblad voegen we de vormgeving toe van de nieuw toegevoegde div met de id kop: C

#kop { background color font-size font-variant text-align }

: : : : :

green; #fdba79; /* oranje */ 300%; small-caps; center;

De kop krijgt een groene achtergrond met grote oranje letters. De tekst komt in kleinkapitaal en wordt gecentreerd. In afbeelding 15.16 ziet u hoe de pagina eruitziet met de kop erboven.

21

DB_HTMLenCSS_15.indd 21

10/5/05 12:47:38

HTML EN CSS de basis

Afbeelding 15.16 Kop boven de kolommen.

Oefening 15.7

Kop over de volle breedte

Maak op de webpagina met twee kolommen uit oefening 15.6 een kop over beide kolommen. De kop moet tegen de rand van het venster aanzitten; er mag geen stukje van de achtergrond meer te zien zijn tussen de rand van het browservenster en de kop.

15.7 Voetgedeelte Op bijna dezelfde manier als een kop boven de twee kolommen is het mogelijk een voetgedeelte onder de kolommen te maken. Er is slechts een extra puntje waar we rekening mee moeten houden. Een van de twee kolommen is via een float geplaatst op de pagina en floats worden uit de normale opbouw van de pagina verwijderd. Daarom is het verstandig om bij een voetgedeelte de declaratie clear: both op te nemen. Zo komt het voetgedeelte altijd na het zwevende div-element. In dit geval is de linkerkolom, die zwevend is, korter dan de kolom met de tekst en gaat het ook zonder clear goed, maar u weet niet altijd zeker welke kolom het langst is en dan kunt u beter het zekere voor het onzekere nemen. Aan de html-pagina voegen we de volgende regels toe, vlak voor de sluittag : C



Aan het stijlblad voegen we de vormgeving toe van de nieuw toegevoegde div met de id voet:

22

DB_HTMLenCSS_15.indd 22

10/5/05 12:47:38

15 Elementen groeperen

C

#voet { background clear color font-size padding }

: : : : :

green; both; /* altijd onder zwevende elementen */ #fdba79; /* oranje */ 90%; .2em;

De voet krijgt hetzelfde groen als de kop en een bronvermelding in kleine, oranje letters (zie afbeelding 15.17).

Afbeelding 15.17 Voetgedeelte onder de kolommen.

Oefening 15.8

Voetgedeelte over de volle breedte

Maak op de webpagina uit de vorige oefening een voetgedeelte over beide kolommen.

DRIE KOLOMMEN Een webpagina met drie kolommen is een variatie op het voorbeeld van dit hoofdstuk, maar met een aantal extra uitdagingen. Als u inventief en creatief te werk gaat kunt u met de mogelijkheden die u in dit boek zijn aangeboden websites maken die er aantrekkelijk uitzien.

23

DB_HTMLenCSS_15.indd 23

10/5/05 12:47:39