Divs plaatsen

zaterdag 4 september 2010 14:21

Acties:

0 Henk 'm!

Topicstarter

Hoi,

ik ben nu een tijdje aan het prutsen met css, maar krijg het volgende lastig voor elkaar. Waarschijnlijk doe ik net iets fout. Hopelijk kunnen jullie mij uit de brand helpen.

De volgende situaties zijn er
Afbeeldingslocatie: http://i52.tinypic.com/24m7v9x.jpg

Afbeeldingslocatie: http://i52.tinypic.com/24m7v9x.jpg

a) wil ik hebben. Dus een grote div met daarin de overige div's.
b & c krijg ik steeds

b krijg ik door de drie div's onder de header te floaten.
c krijg ik door alleen de kleine div's (rechts) te floaten. en de grote linker niet. Helaas komen de kleine div's dan niet rechts van de grote te staan.

Mijn vraag, hoe krijg ik die drie div's in de wrapper en naast elkaar.

Alvast bedankt.

zaterdag 4 september 2010 14:24

Acties:

0 Henk 'm!

mithras

Tip: bekijk eens wat artikelen over floating objecten en hoe je het probleem bij b) voorkomt door overflow: hidden te gebruiken. Daar is tegenwoordig enorm veel over te vinden.

Tweede tip: c) gebeurt wanneer de drie kolommen (groot-klein-klein) niet meer binnen de container passen. Dus je breedte (bekijk paddings/margins/borders) is te groot voor de omliggende container en daardoor springen je kolommen naar de volgende regel (het idee ook van een float).

zaterdag 4 september 2010 14:25

Acties:

0 Henk 'm!

Osxy

Holy crap on a cracker

Zonder voorbeeld code van jou kant is hier niets over te zeggen.

Plaats eerst de relevante HTML en CSS dan kunnen we helpen.

"Divine Shields and Hearthstones do not make a hero heroic."

zaterdag 4 september 2010 14:28

Acties:

0 Henk 'm!

BasZer

Topicstarter

@mithras

bedankt zal ik eens gaan bekijken! Het is soms lastig zoeken als je de juiste woorden niet weet

-edit-

bedankt mithras, de container de overflow: hidden meegeven heeft het probleem opgelost!

[ Voor 32% gewijzigd door BasZer op 04-09-2010 14:34 . Reden: oplossing ]

zondag 5 september 2010 16:09

Acties:

0 Henk 'm!

R4gnax

mithras schreef op zaterdag 04 september 2010 @ 14:24:
Tip: bekijk eens wat artikelen over floating objecten en hoe je het probleem bij b) voorkomt door overflow: hidden te gebruiken. Daar is tegenwoordig enorm veel over te vinden.

Mijn tip zou zijn om voorgaande tip vooral niet te gebruiken.

Aan overflow: hidden kleven namelijk neven-effecten, zoals het feit dat je geen positioning meer kunt gebruiken om elementen (deels) buiten de float container te schuiven. Verder is het niet te combineren met het opzetten van een minimum height i.c.m. IE6 (waar height zich als min-height gedraagt, zolang overflow: visible in het spel is).

Voor hen die denken dat dit 'in real life' geen probleem zal zijn: think again.
Ontwikkelaars bij ons hebben er al een aantal keer mee te maken gehad, wat toch weer zo'n slordig uurtje kost om het probleem te identifieren en dan er om heen te werken. (Laat staan wat het zou kosten om de markup van een grote website helemaal door te gaan kammen en overal de methode met :after in te zetten om zo het probleem permanent te verhelpen.)

Wil je een site schrijven die voor andere personen dan alleen jezelf ook nog vriendelijk is in onderhoud en uitbreiding / wijziging, gebruik dan liever een methode met een :after pseudo-element wat je kunt clearen. Hierover kun je hier op Tweakers meerdere threads terug vinden.

zondag 5 september 2010 20:10

Acties:

0 Henk 'm!

Verwijderd

Zie de faq. Hier geen dingen neerplempen van "dit wil ik". Kom zelf met een initiatief, dit is geen 'maak eens dit' forum.

zondag 5 september 2010 20:28

Acties:

0 Henk 'm!

n1ck

Quick and dirty in kladblok maar het helpt je iig op weg

HTML:

<html>
<head>
<title></title>
<style>

* {
margin: 0;
padding: 0;
}

#container {
overflow: hidden;
border: 1px solid #000;
width: 980px;
margin: 0 auto 0 auto;
padding: 10px;
}

#header {
height: 100px;
border: 1px solid #000;
}

#left {
float: left;
height: 500px;
width: 490px;
border: 1px solid #000;
margin-top: 10px;
}

#center {
float: left;
height: 200px;
width: 232px;
border: 1px solid #000;
margin: 10px;
}

#right {
float: right;
height: 200px;
width: 232px;
border: 1px solid #000;
margin-top: 10px;
}

</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div> 
</div>
</body>
</html>

zondag 5 september 2010 21:43

Acties:

0 Henk 'm!

Dark Blue

Compositionista!

Alpenmeisje

Elementen die je flowt, breiden de omsluitende container niet uit. Ze flowen 1 lineheight binnen de container, en er daarna uit.

Wat je zou kunnen doen is je omsluitende container een vaste breedte (geen hoogte!) mee te geven. Zet die op position: absolute, of relative, wat je wil. Daarna zet je de header-container er in met postion: relative. In feite staat die op 0,0 dus dat hoef je niet expliciet te vermelden. Wel geef je hem een width mee, en bij voorkeur een height. Omdat die width de hele omsluitende container in beslag neemt (en die een vaste breedte heeft) zal het volgende element vanzelfsprekend eronder gepositioneerd worden.

De volgende drie elementen kun je met position: relative eronder zetten. Als je ze geen left- of top-waarde meegeeft zullen ze volgens mij simpelweg naast elkaar stacken.

De oplossing hierboven kan ook, maar dan zit je eigenlijk gelijk aan floats, en floats zijn onberekenbaar als je er nog content binnenin wil zetten. Ik weet eerlijk zo even niet wat het precies is, maar het alarmbelletje in mijn hoofd gaat rinkelen (mijn inwendige renderer

) ... en dat zegt 9/10 keer iets als: rendert niet goed met blocklevel elementen erin, rendert niet goed in IE, rendert niet goed met absoluut gepositioneerde elementen erin. Wat dat laatste betreft: zelf zul je natuurlijk op je code letten als je binnen een float werkt, maar er zijn wysiwyg-editors die zoveel leuke tags genereren dat ze zo je floated element uitfietsen.

heidiulrich.nl | adventura.nl : rugzakavonturen | pathwise.nl : prepping geeks to get jobs

maandag 6 september 2010 13:09

Acties:

0 Henk 'm!

mithras

R4gnax schreef op zondag 05 september 2010 @ 16:09:
[...]

Aan overflow: hidden kleven namelijk neven-effecten, zoals het feit dat je geen positioning meer kunt gebruiken om elementen (deels) buiten de float container te schuiven. Verder is het niet te combineren met het opzetten van een minimum height i.c.m. IE6 (waar height zich als min-height gedraagt, zolang overflow: visible in het spel is).

Als je zaken uit je container wilt schuiven, moet je nadenken over een andere oplossing. Dat is nu niet het geval. En met minimum height zaken heb ik tot dusverre geen problemen gehad. Kan je voorbeelden geven?

Voor hen die denken dat dit 'in real life' geen probleem zal zijn: think again.
Ontwikkelaars bij ons hebben er al een aantal keer mee te maken gehad, wat toch weer zo'n slordig uurtje kost om het probleem te identifieren en dan er om heen te werken. (Laat staan wat het zou kosten om de markup van een grote website helemaal door te gaan kammen en overal de methode met :after in te zetten om zo het probleem permanent te verhelpen.)

Dat ligt misschien eerder aan je ontwerpers dan aan de methode. Goede code + goede documentatie + goede tools zorgt voor weinig problemen.

Wil je een site schrijven die voor andere personen dan alleen jezelf ook nog vriendelijk is in onderhoud en uitbreiding / wijziging, gebruik dan liever een methode met een :after pseudo-element wat je kunt clearen. Hierover kun je hier op Tweakers meerdere threads terug vinden.

Die methode bevat meer nadelen dan een overflow:hidden, dat moet je er meteen wel bij vertellen. Dat het een alternatief is, zeker. Misschien in bijzondere scenario's is het van toepassing.

maandag 6 september 2010 13:36

Acties:

0 Henk 'm!

Verwijderd

Waarom is er eigenlijk nooit gewoon een clear-floats property of iets dergelijks opgenomen in de CSS-standaard?

maandag 6 september 2010 20:52

Acties:

0 Henk 'm!

Dark Blue

Compositionista!

Alpenmeisje

Verwijderd schreef op maandag 06 september 2010 @ 13:36:
Waarom is er eigenlijk nooit gewoon een clear-floats property of iets dergelijks opgenomen in de CSS-standaard?

Je bedoelt toch niet de clear: both of clear: right / left? Want die is er wel. Dan floaten je elementen onder het voorgaande element verder. Nadeel is dat als je hem, om het mooi te doen, eigenlijk in een div na je floaters moet zetten. En persoonlijk vind ik dat niet zo mooi in de code. Zo'n doelloos element dat 'n beetje fungeert als een <br>, maar dan voor elementen.

heidiulrich.nl | adventura.nl : rugzakavonturen | pathwise.nl : prepping geeks to get jobs

maandag 6 september 2010 22:08

Acties:

0 Henk 'm!

Verwijderd

Dark Blue schreef op maandag 06 september 2010 @ 20:52:
[...]

Je bedoelt toch niet de clear: both of clear: right / left? Want die is er wel. Dan floaten je elementen onder het voorgaande element verder. Nadeel is dat als je hem, om het mooi te doen, eigenlijk in een div na je floaters moet zetten. En persoonlijk vind ik dat niet zo mooi in de code. Zo'n doelloos element dat 'n beetje fungeert als een <br>, maar dan voor elementen.

Nee, uiteraard niet.

Maar gezien het feit dat deze vraag/situatie zo vaak voorkomt lijkt het me geen slecht idee om een property te introduceren die er slechts voor zorgt dat een parent container wél meegroeit als z'n children floats zijn?

maandag 6 september 2010 22:11

Acties:

0 Henk 'm!

disjfa

be

Verwijderd schreef op maandag 06 september 2010 @ 22:08:
[...]
Maar gezien het feit dat deze vraag/situatie zo vaak voorkomt lijkt het me geen slecht idee om een property te introduceren die er slechts voor zorgt dat een parent container wél meegroeit als z'n children floats zijn?

En wat is er dan precies mis met een overflow (auto, visible of hidden) ? Die precies dat doen?

disjfa - disj·fa (meneer)
disjfa.nl

maandag 6 september 2010 22:24

Acties:

0 Henk 'm!

ajakkes

👑

Het feit dat het bij mij in ieder geval nooit werkt zoals ik hoop dat het werkt en ik er toch al wat uurtjes ingestoken heb.

👑

dinsdag 7 september 2010 09:30

Acties:

0 Henk 'm!

R4gnax

mithras schreef op maandag 06 september 2010 @ 13:09:
Als je zaken uit je container wilt schuiven, moet je nadenken over een andere oplossing. Dat is nu niet het geval. En met minimum height zaken heb ik tot dusverre geen problemen gehad. Kan je voorbeelden geven?

Als je een op :after gebaseerde clearing oplossing gebruikt hoef je dus niet over andere oplossingen na te denken. Je hebt gewoon één standaard oplossing (die met één class toe te kennen is) die overal werkt, juist omdat de :after oplossing geen bijwerkingen heeft.

Wat betreft het min-height probleem: IE6 ondersteunt min-height niet, maar rekt elementen wèl automatisch op als ze niet hoog genoeg zijn om de content te bevatten. Standaard trucje is dan om voor IE6 niet min-height maar height in te stellen. Echter werkt dat alleen wanneer overflow op visible is ingesteld. Wil je dat scenario dus kunnen ondersteunen, zul je op overflow gebaseerde clearing sowieso moeten afschrijven.

mithras schreef op maandag 06 september 2010 @ 13:09:
[...]
Dat ligt misschien eerder aan je ontwerpers dan aan de methode. Goede code + goede documentatie + goede tools zorgt voor weinig problemen.

Één in alle situaties goed werkende methode die bij alle ontwikkelaars bekend is, inderdaad: goede code voor één goed gedocumenteerde methode. (Iets over DRY en zo...)

mithras schreef op maandag 06 september 2010 @ 13:09:
[...]
Die methode bevat meer nadelen dan een overflow:hidden, dat moet je er meteen wel bij vertellen. Dat het een alternatief is, zeker. Misschien in bijzondere scenario's is het van toepassing.

Noem ze eens?
Naast eerder genoemde problemen met de op overflow gebaseerde clearing kan ik in elk geval er nog bij noemen dat je curieuze bugs gaat krijgen wanneer je een pagina gaat proberen te printen. (En nee: floats zijn zelfs als je gaat printen niet altijd te vermijden.)

Onderwerpen