[CSS] DIV positionering

[dere12]

Beste Tweakers,

Ik heb door het lezen van diverse CSS tutorials vorig jaar een eenvoudige site gebouwd gebruik makend van div's om de layout te bepalen m.b.v. de tags 'float', 'clear' etc.

Nu zag ik op de website http://www.veenman.nl/ een voorbeeld waarin diverse blocks/sections van verschillende hoogtes en breedtes toch bij elkaar staan in een container.

Via online CSS tutorials heb ik geprobeerd dit te repliceren maar het lukt me nog niet. Mijn gevoel zegt me dat ik elk block binnen de container apart moet positioneren via bv position: absolute; height:200px Is dit juist? Zo niet, kan iemand me een beetje in de juiste richting sturen? Het lijkt me super om verder te groeien qua kennis!

Alvast bedankt!

[Pkunk]

Lastig om met een duidelijk voorbeeld precies te zien wat nou je probleem is. Maar ik zal een poging wagen:

Bij het voorbeeld dat je geeft wordt de layout bepaald voor blokjes met een vaste hoogt en breedte absoluut te positioneren. Dit kan prima zolang je zeker weet dat die blokjes altijd die breedte, hoogte en positie moeten hebben. Als je wat flexibeler wil zijn kan je er voor kiezen je blokjes te floaten en kijken hoe dat past. Gevolg is vaak wel dat de boel niet netjes op elkaar aansluiten (ik ga er nu even vanuit dat dit is wat je niet lukt). Maar, je bent niet de eerste die dat wil en dus zijn er al wat oplossingen zoals een javascriptje wat je relatief simpel kan includen in je website die vervolgens de boel in elkaar "metselt":
http://masonry.desandro.com/

Maar voordat je klakkeloos zo'n libje include is het misschien ook wel aardig te proberen te snappen waarom wat je probeert niet lukt En als je dan wat hulp wil hebben we toch echt een wat specifiekere case nodig.

[dere12]

Maar voordat je klakkeloos zo'n libje include is het misschien ook wel aardig te proberen te snappen waarom wat je probeert niet lukt En als je dan wat hulp wil hebben we toch echt een wat specifiekere case nodig.

Heldere tip

Je hebt ondanks mijn wat vage vraag toch begrepen wat ik wilde: Hoe positioneer je blokken met verschillende afmetingen zodanig dat ze toch netjes bij elkaar staan zoals in de website die ik als voorbeeld had gezien.

Ik kon tot nu toe alleen blokken van dezelfde hoogte naast elkaar krijgen via float:left, clear:both etc., verder was ik nog niet. Fijn dat ik nu weet hoe ik dat kan doen, dank je!

Tot nu toe was ik bovenstaande aan het proberen te maken via een CSS tutorial die i.p.v. float adviseerde gebruik te maken van display: inline-block; Zie code hieronder:


/* Opmaak en stijl van de basis container waar alle content blokken in zitten */
.content_basis
{
position: relative;
height: 670px;
}


/* Opmaak en stijl van de basis content blokken */
.content_block_profiel {
background-color: #D8D8D8;
display: inline-block;
text-decoration: none;
margin-top: 20px;
margin-bottom: 8px;
margin-right: 8px;
padding: 10px;
}

.content_block_coach {
background-color: #D8D8D8;
display: inline-block;
vertical-align: top;
text-decoration: none;
margin-top: 20px;
margin-bottom: 8px;
margin-right: 8px;
margin-left: 8px;
padding: 10px;
}


Als ik kies om een site te maken met blokken die een vaste positie krijgen, heeft dat impact op de leesbaarheid van een site op mobiele devices? Responsive design wil ik ook nog gaan leren aan de hand van voorbeelden namelijk.

[ Voor 6% gewijzigd door dere12 op 27-03-2014 22:52 ]