Het controleren van een div. Toch wel zeer lastig om er wat meer mee te kunnen dan gewoon neer te zetten. Ik ga hieronder een paar methodes omschrijven waar je een eind mee zou moeten komen. Voor elke situatie zijn er weer andere codes, dus ik ga uit van een simpele site met vaste groottes om het simpel te houden
We beginnen met de eeste mogelijkheid: Position: Relative;
Position relative bekijkt de relatieve afstand van zichzelf ten opzichte van de eerste relatieve object wat het tegenkomt als het gaat kijken waar het in staat. Dat lijkt wat ingewikkeld, maar een klein stukje code kan get uitleggen:
[code=html>
<body>
<div id="container"> Hallo daar!</div>
</body>
[/code>
Dat doet nog niets, dus een stukje code in de css:
body{ width: 100% } #container{ position: relative; margin: 0px auto; width: 800px; heigth: 500px; border: 1px solid black; text-align: center; }
Allereerst, de body staat op 100%, anders weet de
div erin niet hoe groot je pagina is. Dan verder naar de container. Het
heet container omdat het straks meerdere divs gaat omvatten.
Position: relative: Dit zorgt dat ie naar het eerste object om m heen gaat zoeken, de body.
Margin: 0px auto: De 0px is hoeveel marge het moet houden van de top, en auto zorgt ervoor dat het in het midden komt (mits je body 100% is)
De width, heigth, border en text-align spreken voor zich, niet nodig, maar het verduidelijkt waar je mee bezig bent.
Het hoeft dus niet persé vanuit de body worden gedaan. Je kunt ook best een relative divje in een relative div zetten zonder problemen.
De relative was leuk, nu de tegenhangen: Absolute. Deze kijkt ook vanuit het eerste relatieve object wat het tegenkomt, alleen stuur je deze heel anders aan. Ook weer een voorbeeldje om het duidelijker te maken:
[code=html>
[body>
[div id="container">
Hallo daar!
[div id="menu">Home - nieuws - cursusCss.be
Ik ga er van uit dat je de css van het vorige paragraaf nog hebt:
#menu{
position: absolute;
width: 800px;
heigth: 50px;
top: 100px;
left: 0px;
border: 1px solid green;
}
Zoals
je ziet, ook dit stelt niet veel voor. De margin code is weg, die doet
namelijk niet zoveel goeds nu. In plaats daarvan hebben we top en left,
deze geven beide aan hoeveel de div van de bovenkant/linkerkant af moet
zijn. Dit mag in pixels, maar ook in em of procenten. Er is ook nog right om vanaf rechts te kijken en bottom voor vanaf onderen, alleen bottom word door Internet Explorer niet geaccepteerd.
Als je het correct hebt gedaan, zie je nu een mooie groen omlijnde balk zon 50px vanaf boven van links naar rechts.
Wat een groot voordeel is van absolute is dat je twee (of meer) divs op dezelfde plek kunt plaatsen en daardoor dus lagen kunt creeren. Als je twee divs dezelfde positie geeft staat ze ook op dezelfde plek, daar kun je leuke dingen mee, vooral met plaatjes kun je erg leuke dingen
Dan hebben we nu nog 1 truucje, namelijk float. Float werkt ongeveer alsof het tekst is, het schuift het tegen andere floats of de zijkant aan. Weer voorbeeldje:
[code=html>
[body>
[div id="container">
[div id="banner">Hallo daar![/div>
[div id="menu">Home - nieuws - cursusCss.be[div>
[/div>
[/body>
[/code>
Ik ga er van uit dat je de css van de vorige paragrafen nog hebt:
#banner{
float: left;
width: 800px;
heigth: 100px;
border: 1px solid red;
}
Ook weer lekker basic, alleen is er nu float. Float kan de waardes left of right hebben, om het respectievelijk links of rechts uit te lijnen. Als je twee kleinere objecten hebt (bv allebij 50px in een vak van 200px) kun je probleemloos 3 divs met float naast elkaar zetten. De vierde kan in theorie ook, maar dan moet je al iets beter weten wat je aan het doen bent, in onze omschrijving zal nummer 4 dan een regel lager staan.
Uiteraard moet je hier ook iets van leren, en heb ik al een kleine basis van een simpele site gegeven. De content div mag je zelf gaan maken en zoeken hoe dat moet. Ik kan je wel helpen door te zeggen dat een float niet zomaar gaat werken. Dat is omdat de float dan je absolute div negeert en tegelijk gaat staan.
Deze cursus is afkomstig van Cursus CSS
Het is verboden zonder schriftelijke toestemming deze pagina in welke vorm dan ook te publiceren.