Homepage » Tutorials » HTML & CSS » Layout: 2 kolommen (volgens indianajames])
Layout: 2 kolommen (volgens indianajames])
| Info | ||||
| Door: | indianajames | Moeilijkheidsgraad: |  |
|
| Views: | 46.141 | Reacties: | 10(Bekijken) | |
| Log in om zelf te reageren | ||||
| Waardering: | ||||
Stel je voor dat je net de layout hebt geschreven voor je nieuwe site, volledig in html. Dit wil dus zeggen dat je gebruik moet maken van HTML-tabellen en het is je uiteindelijk gelukt om een wirwar van tr's en td's tesamen te plaatsen die het beoogde resultaat leveren. Twee maand later wil je de site aanpassen. Je wil een nieuwe kolom voor bv. reclame en kijkt naar je geliefde html-tabel. Je zucht even en begint er aan. Na vier uur proberen beslis je dat je beter opnieuw begint en na één tot twee uur heb je een nieuw ontwerp klaar voor je website. Nu nog alle inhoud opnieuw toevoegen en je bent klaar. :lol:
Twee maand later wil je de site opnieuw aanpassen ... Je denkt even na en beslist om het toch maar even met CSS te proberen :wink:
Om jullie niet op jullie honger te laten zitten, begin ik hier met een eerste voorbeeld: hoofdding + 2 kolommen + voet
We zorgen eerst voor een ruwe indeling van de pagina. Hiervoor worden steeds div-tags gebruikt (kort voor 'division'=onderdeel). Bij de div-tags gebruik je telkens een toepasselijke 'id'.
| # | Code |
1 | <h1>Hier komt de titel</h1> |
De verschillende div's volgen elkaar nu verticaal op. We willen dit veranderen en gebruiken daarvoor 'float' en 'clear' (CSS).
Met 'float' zorg je ervoor dat een element als het ware zweeft op uw pagina en de rest van de inhoud sluit er rondomrond op aan. Float heeft vier mogelijke waarden: left, right, none of inherit.
'Clear' laat weten waar er zeker geen tekst mag komen. Wil je dat er links van een element geen inhoud komt, dan zet je de waarde op 'left'. Je kan kiezen uit volgende waarden: left, right of both
In ons voorbeeld kiezen we float = left voor de linkerkolom en clear = both voor de 'footer'.
| # | Code |
1 | #left { |
Het resultaat:
Om je te tonen waarom 'clear' zo belangrijk is, heb ik de rechtse figuur bijgevoegd.
Zie je waar de 'footer' nu staat? Zijn achtergrond gaat dwars door je linkerkolom en de inhoud komt onder je rechterkolom ipv onder beide kolommen.
enkele opmerkingen
Kies voor je rechterkolom een kantlijn (margin) die minimaal even groot als de breedte van je linker-kolom. Je legt de breedte voor de linkerkolom dus best vast. Hierdoor zal je pagina er nog steeds goed uit zien als de rechterkolom groter is dan de linker.
Resultaat:
Bij de linker-figuur lopen de kolommen netjes naast elkaar.
Bij de rechtse figuur loopt de langste kolom (hier: rechts) door onder de andere (hier: links) doordat je float gebruikt. Dit was niet de bedoeling en een margin is dus echt wel noodzakelijk!
Je kiest dus een vaste breedte voor gefloatte elementen en de rest past zich aan aan uw browser. Gebruik niet voor alle div's vaste breedtes om mooi te blijven in alle browsers. Wanneer je dat wel doet, zorg er dan voor dat de breedte de 100% niet overschrijdt.
Pas om met div-tags. Gebruik ze enkel voor de algemene indeling van uw document en niet voor andere opmaak. Die doe je met de tags in de div.
Soms is het ook niet noodzakelijk om iets met een div-tag te groeperen. Uw navigatiemenu hoeft niet in een div, als je bv. gebruik maakt van een 'lijst' (ul). In mijn voorbeeld is h1 beter gepast voor de titel ipv een div met id=titel.
Hoe minder tags je gebruikt voor een design en hoe beter ze bij je inhoud passen, hoe liever. Zelfs als uw navigatie opgebouwd is uit a-tags is een div niet altijd nodig.
En als laatste een voorbeeldje van ongelijke hoogte van uw div's. Dit probleem wordt duidelijk in de volgende figuur. Daar zie je dat de tekst-inhoud van de rechtse kolom iets hoger begint, dan die van de linkse-kolom.
En eigenlijk ligt deze ongelijke hoogte niet enkel aan de div's, maar de inhoud ervan. (enkel ongelijk in opera, netscape en FF) Volgende code werd gebruikt in alle voorbeelden, behalve de laatse en lost dit probleem op. Nadat je ook dit hebt toegepast, krijg je het gewenste resultaat zoals in de eerste figuur van deze tutorial.
| # | Code |
1 | p { display: table; } |
Hoe dit werkt voor de paragraaf? Wel, blijkbaar is dit de 'ideale oplossing' omdat dit de paragrafen weergeeft als tabellen. Je kan in bepaalde gevallen beter table-cell gebruiken, maar daar moet je maar wat mee experimenteren. Ivm de header kan ik zeggen dat de kantlijn op de bodem ervoor zorgt dat zowel gefloatte, als niet-gefloatte elementen even hoog starten.
Waar de inhoud van een gefloat of niet-gefloat element start (bv. paragrafen binnenin een gefloatte div), is afhankelijk van de browser. Hiermee bedoel ik de behandeling van de kantlijnen ('margin') van zijn inhoud (hier een paragraaf). Met de waarde "display: table", lijkt dit niet langer browserafhankelijk te gebeuren
In sommige gevallen doet dit probleem zich niet voor, bv. wanneer je een rand geeft aan je divs. Dan moet je bovenstaande code uiteraard niet gebruiken.
2de voorbeeld en oefening: titel + 3 kolommen + footer
Probeer deze layout zelf samen te stellen.
Vergeet niet om je code te testen in verschillende browsers (IE, FF, Chome en Opera). De oplossingen in deze tutorial werken in de nieuwste versies van deze browsers.
De oplossing van deze oefening vind je dus online (url bovenaan) of je kan me ook een mailtje sturen. Als je een vraag hebt over de oplossing, kan dat via het forum (niet als reactie op deze tutorial).
Afsluiter
Voor pagina-layout kies je eerst div's en dan laat je die passen zoals gewenst met 'float'. Je gebruikt 'clear' om foutjes te voorkomen of te verwijderen.
CSS maakt de code veel eenvoudiger. Wel is het soms 'tricky' om een css-layout te laten werken in alle browsers. Je kan daarom de voorkeur geven aan HTML-tabellen welke wel meer onderhoud vragen.
Sommige mensen gebruiken een mengeling van de twee.
| 10 reacties | |
| fccampione |  Geplaatst op 23-03-2008 om 10:28 |
 Regular |
ik zou in mijn right op 1 pagina een tabel willen met 2 kolomen en x-aantal rijen. Hoe doe ik dit met div's? het is voor een spelerslijst. mvg |
| indianajames | Geplaatst op 10-04-2007 om 08:49 |
  Moderator |
Dat is omdat je zo niet afgeleid wordt van het design dat je op dat moment wil in orde brengen. Tegenwoordig is er voor op maat gemaakte designs een tendens om net GEEN latijn meer te gebruiken via een principe dat men 'content driven design' noemt. Daarbij veronderstelt men dat de tekstinhoud van een site invloed heeft op het design en omgekeerd. Je kan beide beter niet onafhankelijk ontwikkelen. Voor kleine voorbeeldjes, zoals deze tutorial is de lipsum tekst wel perfect, dan moet men geen teksten opstellen voor een simpel voorbeeld. |
| takje | Geplaatst op 05-04-2007 om 12:53 |
| Regular |
Mss is het een stomme vraag, maar waarom gebruiken ze bij voorbeeldwebsites altijd dezelfde latijnse tekst? Of is da gwn voor de show? |
| indianajames | Geplaatst op 04-01-2007 om 12:59 |
Moderator |
Post je vraag op het forum en vertel daar iets meer dan "ik krijg het niet goed", want daar weten we niets mee! |
| fenixx | Geplaatst op 04-01-2007 om 12:46 |
| Regular |
Ik krijg mijn footer steeds niet goed wie kan me helpen |
Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!
Terug naar gewone pagina
Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder