[CSS] div layout lukt niet - Softwareontwikkeling

woensdag 16 april 2008 11:30

Acties:

Topicstarter

Doel:

Vier div elementen moeten in een container als volgt worden geplaatst:
Box 1 links boven
Box 2 links daaronder
Box 3 rechts boven
Box 4 rechts daaronder

M.i. doe je dit door:
Box 1 float left
Box 2 float left / clear left
Box 3 float right
Box 4 float right / clear right

Maar ik krijg verschillende uitkomsten, dus het zal wel niet de juiste oplossing zijn.

Op de website ...
Het logo (concept) linksboven = box 1
De navigatie = box 2
De tekst rechtsboven = box 3
Het lege vlak rechtsonder = box 4
... staat het in Opera goed. In IE float box 4 (rechtsonder) echter helemaal naar rechts.

Om het mijzelf makkelijker te maken heb ik een testhtml aangemaakt om wat te kloten. Tot mijn verbazing krijg ik daar ineens weer hele andere uitkomsten met bovengenoemde float eigenschappen.

In Opera ziet het er dan zo uit:
Afbeeldingslocatie: http://members.home.nl/nuntius/Inoperadiv.jpg

Afbeeldingslocatie: http://members.home.nl/nuntius/Inoperadiv.jpg

In dreamweaver zo:
Afbeeldingslocatie: http://members.home.nl/nuntius/Indmdiv.jpg

Dit is de testhtml:
[code=html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<div id="container">
<div id="box1">box 1</div>
<div id="box2">box 2</div>
<div id="box3">box 3</div>
<div id="box4">box 4</div>
</div>
</body>
</html>
[/code=html]

Waarom krijg ik zoveel verschillende resultaten in verschillende omstandigheden terwijl de float eigenschappen hetzlefde zijn?
Welke eigenschappen moet ik de div elementen meegeven om het gewenste resultaat in elke omstandigheid te bereiken?

woensdag 16 april 2008 11:32

Acties:

Makkelijk

En als je het nou zo in je HTML zet?

<div id="box1">box 1</div>
<div id="box3">box 3</div>
<div id="box2">box 2</div>
<div id="box4">box 4</div>

Volgens mij werkt het dan wel

[ Voor 6% gewijzigd door Makkelijk op 16-04-2008 11:32 ]

Badieboediemxvahajwjjdkkskskskaa

woensdag 16 april 2008 11:34

Acties:

Tommy The Cat

Topicstarter

Makkelijk schreef op woensdag 16 april 2008 @ 11:32:
En als je het nou zo in je HTML zet?

<div id="box1">box 1</div>
<div id="box3">box 3</div>
<div id="box2">box 2</div>
<div id="box4">box 4</div>

Volgens mij werkt het dan wel

Ik begrijp (edit:inmiddels wel, boxvolgorde) niet wat je hiermee bedoelt. De uitlijning in de codering? Die is goed (nu

[ Voor 11% gewijzigd door Tommy The Cat op 16-04-2008 12:23 ]

woensdag 16 april 2008 11:38

Acties:

EdwinV

Je probleem wordt een stuk makkelijker als je box 1 en 2 en box 3 en 4 in een container zet. Zet er een div omheen en positioneer deze links en rechts op het scherm. Dan heb je altijd de zekerheid dat de boxen goed onder elkaar staan.

woensdag 16 april 2008 11:42

Acties:

Tommy The Cat

Topicstarter

Flydesign.nl schreef op woensdag 16 april 2008 @ 11:38:
Je probleem wordt een stuk makkelijker als je box 1 en 2 en box 3 en 4 in een container zet. Zet er een div omheen en positioneer deze links en rechts op het scherm. Dan heb je altijd de zekerheid dat de boxen goed onder elkaar staan.

In het voorbeeld, de testhtml, zou het onderbrengen van box 1 en 2 / box 3 en 4 in een aparte subcontainer (want ik neem aan dat je dat bedoelt) wel kunnen, maar gezien de afwijkende groottes van de div elementen op de website zal het daar niet kunnen.

woensdag 16 april 2008 11:49

Acties:

EdwinV

Tommy The Cat schreef op woensdag 16 april 2008 @ 11:42:
[...]

In het voorbeeld, de testhtml, zou het onderbrengen van box 1 en 2 / box 3 en 4 in een aparte subcontainer (want ik neem aan dat je dat bedoelt) wel kunnen, maar gezien de afwijkende groottes van de div elementen op de website zal het daar niet kunnen.

Hoezo kan dat niet? Die divs groeien gewoon mee met je inhoud hoor

woensdag 16 april 2008 11:52

Acties:

Tommy The Cat

Topicstarter

Ja maar een div kan niet bovenin breed zijn en onderin smaller.

Edit:
Voorbeeld van hoe de divs er op de website ongeveer uitzien qua grootte:
Afbeeldingslocatie: http://members.home.nl/nuntius/subdivs.jpg

Afbeeldingslocatie: http://members.home.nl/nuntius/subdivs.jpg

Box 1 en 2
Box 3 en 4

Kunnen niet in een aparte div staan om het gewenste resultaat te krijgen. Dat zie ik toch juist?

[ Voor 61% gewijzigd door Tommy The Cat op 16-04-2008 12:00 ]

woensdag 16 april 2008 12:07

Acties:

EdwinV

Toch zou ik proberen wat structuur in alles te brengen

code:

<div class="header box1">
</div>
<div class="content">
  <div class="box2"></div>
  <div class="box4"></div>
  <div class="box3"></div>
</div>

Je kunt box 2, 4 en 3 links tegen elkaar floaten.

[Edit]
Is box 4 een soort footer of kan deze ook naast box 2 komen te staan?

[ Voor 12% gewijzigd door EdwinV op 16-04-2008 12:08 ]

woensdag 16 april 2008 12:10

Acties:

Tommy The Cat

Topicstarter

Tommy The Cat schreef op woensdag 16 april 2008 @ 11:52:
Ja maar een div kan niet bovenin breed zijn en onderin smaller.

Edit:
Voorbeeld van hoe de divs er op de website ongeveer uitzien qua grootte:
[afbeelding]

Box 1 en 2
Box 3 en 4

Kunnen niet in een aparte div staan om het gewenste resultaat te krijgen. Dat zie ik toch juist?

Wacht eens. Ik kan box 1 en 3 / box 3 en 4 natuurlijk wel onderbrengen.

Betere structuur aanbrengen? Zou ik bijvoorbeeld de box die rechtsboven komt te staan als tweede moeten plaatsen in de code? Laat ik dat eens proberen.

Edit:

Flydesign.nl schreef op woensdag 16 april 2008 @ 12:07:
[Edit]
Is box 4 een soort footer of kan deze ook naast box 2 komen te staan?

Box 4 moet juist naast box 2, in het voorbeeld.

[ Voor 15% gewijzigd door Tommy The Cat op 16-04-2008 12:11 ]

woensdag 16 april 2008 12:12

Acties:

EdwinV

Als ik naar je website kijk, wil je twee divs in een header hebben staan: dus die kan je onderbrengen in een container. De positionering van elementen binnen een container is stukken makkelijker dan positionering binnen de complete pagina.

Verder zijn 2 en 4 volgens mij de linker zijbalk en de hoofdcontent. Dus die kan je ook in een container zetten.

woensdag 16 april 2008 12:13

Acties:

Tommy The Cat

Topicstarter

Succes!

[code=html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<div id="container">
<div id="box1"></div>
<div id="box2"></div><br clear="all" />
<div id="box3"></div>
<div id="box4"></div><br clear="all" />

</div>
</body>
</html>
[/code=html]

woensdag 16 april 2008 12:14

Acties:

Tommy The Cat

Topicstarter

Flydesign.nl schreef op woensdag 16 april 2008 @ 12:12:
Als ik naar je website kijk, wil je twee divs in een header hebben staan: dus die kan je onderbrengen in een container. De positionering van elementen binnen een container is stukken makkelijker dan positionering binnen de complete pagina.

Verder zijn 2 en 4 volgens mij de linker zijbalk en de hoofdcontent. Dus die kan je ook in een container zetten.

Ja precies. Vrij voor de hand liggend eigenlijk! Dit concludeerde ik overigens al eerder, zie mijn post boven deze van jou

woensdag 16 april 2008 12:17

Acties:

Tommy The Cat

Topicstarter

Makkelijk schreef op woensdag 16 april 2008 @ 11:32:
En als je het nou zo in je HTML zet?

<div id="box1">box 1</div>
<div id="box3">box 3</div>
<div id="box2">box 2</div>
<div id="box4">box 4</div>

Volgens mij werkt het dan wel

Nu zie, snap ik wat je zegt. De box volgordes veranderen. Ja inderdaad dit is effectief. Dank.

Edit:

Tommy The Cat schreef op woensdag 16 april 2008 @ 12:10:
Zou ik bijvoorbeeld de box die rechtsboven komt te staan als tweede moeten plaatsen in de code? Laat ik dat eens proberen.

Zoals je ziet concludeerde ik dit nadat jij me dat al had laten zien

[ Voor 29% gewijzigd door Tommy The Cat op 16-04-2008 12:18 ]

woensdag 16 april 2008 12:19

Acties:

Scheeve

box volgordes zo:

code:

    <div id="box3">box 3</div> 
    <div id="box4">box 4</div> 
    <div id="box1">box 1</div> 
    <div id="box2">box 2</div>

floats van box1 en box2 weghalen en klaar is kees!

woensdag 16 april 2008 12:21

Acties:

Tommy The Cat

Topicstarter

Scheeve schreef op woensdag 16 april 2008 @ 12:19:
box volgordes zo:
code:
1
2
3
4
    <div id="box3">box 3</div> 
    <div id="box4">box 4</div> 
    <div id="box1">box 1</div> 
    <div id="box2">box 2</div>
floats van box1 en box2 weghalen en klaar is kees!

Legio oplossingen dus

. Ik kan zelfs kiezen.

Het had dus voornamelijk te maken met mijn box-volgorde in de codering. Verder begrijp ik dat ik meer gebruik moet maken van subcontainers om div elementen te plaatsen (mocht de structuur nog wat complexer worden).

Bedankt allen.

woensdag 16 april 2008 12:54

Acties:

miss_bleu

Tommy The Cat schreef op woensdag 16 april 2008 @ 12:13:
Succes!

[code=html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<div id="container">
<div id="box1"></div>
<div id="box2"></div><br clear="all" />
<div id="box3"></div>
<div id="box4"></div><br clear="all" />

</div>
</body>
</html>
[/code=html]

ah hier zit je ook

donderdag 17 april 2008 21:04

Acties:

Tommy The Cat

Topicstarter

@hierboven, hoi

. Sorry voor het plagiaat

Sinds mijn vorige vraag over divjes en floats (het verhaal hierboven) ben ik gestart met een nieuw/schoon ontwerp omdat ik niet tevreden was. Wat ik in dit topic heb geleerd is dat de volgorde van je div elementen in de code van belang is: je moet beseffen dat de volgorde van de div elementen de 'normal document flow' bepaalt zolang het normal document flow blijft. Wat ik ook heb geleerd is dat floats ervoor zorgen dat de div elementen niet meer deelnemen aan de normal document flow. Als je echter veel floats gebruikt is alsnog de volgorde van belang want ook met meerdere floats wordt de document flow bepaald door de volgorde in de code. Verder begrijp ik de functie van 'clear'.

Met deze kennis dacht ik volledig autonoom te kunnen zijn, maar nog steeds stuit ik op een klein probleem.

Eerst even de code:

[code=html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="file:///C|/Users/Administrator/Desktop/Test 03/Assets/styles.css" rel="stylesheet" type="text/css" />
<link href="Assets/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="containerDiv">
<div id="rechterDiv"></div>
<div id="headerDiv"></div>
<div id="mainDiv"></div>
<div id="footerDiv"></div>
<div id="navigatieDiv"></div>
</div>
</body>
</html>
[/code=html]

[code=css]
@charset "utf-8";
#containerDiv {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 600px;
width: 900px;
background-color: #333333;
}
#rechterDiv {
float: right;
height: 500px;
width: 100px;
border: 1px solid #FFFFFF;
}
#headerDiv {
float: right;
height: 100px;
width: 690px;
border: 1px solid #FFFFFF;
}
#mainDiv {
float: right;
height: 300px;
width: 690px;
border: 1px solid #FFFFFF;
}
#footerDiv {
float: right;
height: 100px;
width: 690px;
border: 1px solid #FFFFFF;
}
#navigatieDiv {
height: 500px;
width: 100px;
border: 1px solid #FFFFFF;
}

body {
margin: 0px;
background-color: #000000;
}
[/code=css]

Als je deze codering overneemt zul je waarschijnlijk in je browser een goed geheel tegenkomen. Maar als je in Dreamweaver zit (ik althans), dan zul je zien dat de navigatieDiv ergens onderin blijft hangen: alsof hij nog rekening houdt met de float-divjes terwijl deze toch verwijderd zijn uit de normal document flow waar de navigatieDiv nog WEL onderdeel van uitmaakt.

Met andere woorden. Wat is hier nu toch niet goed aan?

donderdag 17 april 2008 21:09

Acties:

Pkunk

Ik zou me totaal niet druk maken om Dreamweaver. Als het er in de browser goed uitziet is het toch goed

//edit: Gebruikt Dreamweaver soms ie6 rendering ofzo? Want in ie6 zit het nog een beetje scheef...

[ Voor 32% gewijzigd door Pkunk op 17-04-2008 21:10 ]

Hallo met Tim

donderdag 17 april 2008 21:13

Acties:

Tommy The Cat

Topicstarter

Timlog schreef op donderdag 17 april 2008 @ 21:09:
Ik zou me totaal niet druk maken om Dreamweaver. Als het er in de browser goed uitziet is het toch goed
//edit: Gebruikt Dreamweaver soms ie6 rendering ofzo? Want in ie6 zit het nog een beetje scheef...

Ik maak gebruik van CS3 dus dat denk ik niet.

Je hebt in principe wel gelijk dat het niet uitmaakt als het er in de browser goed uitziet. Desalniettemin is het lastig werken als het in de DM design view niet goed staat. Eveneens vermoed ik dat dit een symptoom is van een technische onvolkomenheid.

donderdag 17 april 2008 21:20

Acties:

Pkunk

Tommy The Cat schreef op donderdag 17 april 2008 @ 21:13:
[...]
Ik maak gebruik van CS3 dus dat zal wel niet.

Je hebt in principe wel gelijk dat het niet uitmaakt als het er in de browser goed uitziet. Desalniettemin is het lastig werken als het in de DM design view niet goed staat. Eveneens vermoed ik dat dit een symptoom is van een technische onvolkomenheid.

Dat valt toch wel mee? Ik gebruik zelf visual studio en daarin zit volgens mij nieteens een design view. En als het er in zit gebruik ik het niet. Zo lastig is het toch niet een browser open te hebben staan met de pagina open waar je aan werkt?

Gewoon afleren om design view te gebruiken. Je hebt het echt niet nodig.

Hallo met Tim

donderdag 17 april 2008 21:23

Acties:

Tommy The Cat

Topicstarter

Timlog schreef op donderdag 17 april 2008 @ 21:20:
[...]

Dat valt toch wel mee? Ik gebruik zelf visual studio en daarin zit volgens mij nieteens een design view. En als het er in zit gebruik ik het niet. Zo lastig is het toch niet een browser open te hebben staan met de pagina open waar je aan werkt?

Gewoon afleren om design view te gebruiken. Je hebt het echt niet nodig.

Het is natuurlijk wel mogelijk. Voor mij is het echter wel het makkelijkst werken met zowel code als design view. Vooral om vast te stellen wat een bepaalde div grootte doet met het totaalbeeld (om maar een voorbeeld te noemen). CSS en HTML is daarnaast relatief nieuw voor me.

Overigens kom ik tot de ontdekking dat bovenstaande code ook in IE7 niet goed is, maw dat de navigatieDiv blijft hangen. In opera gebeurt dit dus niet. Ik heb wel degelijk iets goed begrepen maar er zit toch nog iets niet juist!

[ Voor 8% gewijzigd door Tommy The Cat op 17-04-2008 21:28 ]

donderdag 17 april 2008 22:43

Acties:

Tommy The Cat

Topicstarter

Probleem opgelost.

<div id="headerDiv"></div>
<div id="mainDiv"></div>
<div id="footerDiv"></div>

Deze divjes heb ik tezamen in 1 grote div gezet waardoor er drie grote blokken ontstaan. Links/midden/rechts. Links is normal document flow of float left of float right, midden en rechts is float right. Nu gaat alles wel goed. Waarom kan ik niet doorgronden maar het is duidelijk dat ik zoveel mogelijk moet bundelen.

Pagina: 1

Reageer