Min-height en min-width

Maat: px

Weergave met pagina beginnen:

Download "Min-height en min-width"

Lieven Kuipersё
8 jaren geleden
Aantal bezoeken:

1 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 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 <div id= navigatie > <ul>... </ul> </div>  <div id= inhoud > <h1> Paul is dood </h1> <p>... </p> <p>... </p> </div>  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 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

2 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 : #aa26fe; /* paars */ float padding width : left; : 5px; : 175px; 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 De eerste opzet voor een lay-out met twee kolommen is nog niet erg geslaagd. Afbeelding 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.

3 Margin Een oplossing krijgen we als we de tweede div een grote marge toekennen aan de linkerkant, bijvoorbeeld 200 pixels: C #inhoud { margin : px; 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 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 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

4 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 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 Twee kolommen gemaakt via de methode faux column.

5 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 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 <body>-tag en voor de navigatie-div: C <div id= kop > beatlesgeruchtenmachine </div>  Aan het stijlblad voegen we de vormgeving toe van de nieuw toegevoegde div met de id kop: C #kop { background : green; color : #fdba79; /* oranje */ font-size : 300%; font-variant : small-caps; text-align : center; De kop krijgt een groene achtergrond met grote oranje letters. De tekst komt in kleinkapitaal en wordt gecentreerd. In afbeelding ziet u hoe de pagina eruitziet met de kop erboven.

6 HTML EN CSS de basis Afbeelding 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 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 </body>: C <div id= voet > Bron: </div>  Aan het stijlblad voegen we de vormgeving toe van de nieuw toegevoegde div met de id voet:

7 C #voet { background : green; clear : both; /* altijd onder zwevende elementen */ color : #fdba79; /* oranje */ font-size : 90%; padding :.2em; De voet krijgt hetzelfde groen als de kop en een bronvermelding in kleine, oranje letters (zie afbeelding 15.17). Afbeelding 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.

Vergelijkbare documenten

Descendant selectors toepassen

HTML EN CSS de basis Oefening 13.4 Descendant selectors toepassen Maak een lijst binnen een definitielijstlijst en geef de binnenste lijst een totaal andere vormgeving. 13.7 Verticaal navigatieblok Een