1.280 views
Hoi! Hoe kan je 2 div's in xhtml naast elkaar zetten? En hoe kan je de div's in een pagina centreren?
Met CSS: link
Voor naast elkaar zetten moet je op margin-left zoeken. Centreren is (dacht ik) align: center;
Voor naast elkaar zetten moet je op margin-left zoeken. Centreren is (dacht ik) align: center;
Ik was al met css bezig :P. Maar het lukt nog steeds niet.
Hier vindt je wat je zoekt
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
Het is bijna gelukt. In FF werkt het maar in IE niet. Zouden jullie willen kijken of de onderstaande code goed is?
CSS:
PAGINA:
Alvast bedankt!
CSS:
body {
font-family: Verdana;
font-size: 10pt;
color: #333333;
background-image: url(img/bg.PNG);
}
#hele_pagina {
position: absolute;
width: auto;
top: 20px;
z-index: 7;
}
#boven {
position: relative;
width: auto;
z-index: 6;
}
#midden {
position: relative;
width: auto;
top: 8px;
z-index: 3;
}
#menu {
position: relative;
background-color: #FFFFFF;
width: 100px;
float: left;
padding: 5px;
z-index: 5;
}
#content {
position: relative;
background-color: #FFFFFF;
width: 576px;
float: left;
left: 8px;
padding: 5px;
z-index: 4;
}
#onder_boven {
position: relative;
width: auto;
top: 16px;
z-index: 2;
}
#onder_onder {
position: relative;
background-color: #FFFFFF;
width: auto;
top: 24px;
padding: 5px;
z-index: 1;
}PAGINA:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="hele_pagina">
<div id="boven"><img src="img/header.PNG" alt="" width="702" height="143" /></div>
<div id="midden">
<div id="menu">Menu</div>
<div id="content">Content</div>
</div>
<div id="onder_boven"><img src="img/onder.jpg" alt="" width="702" height="52" /></div>
<div id="onder_onder">Site</div>
</div>
</body>
</html>Alvast bedankt!
Centreren is:
#blabla{margin-left:auto;
margin-right-auto;
}
Wil je vlug een basis-script (xhtml, css) voor een site, kan je deze online maken. Klik hier.
#blabla{margin-left:auto;
margin-right-auto;
}
Wil je vlug een basis-script (xhtml, css) voor een site, kan je deze online maken. Klik hier.
Dankzij die link herrinner ik me het probleem: width in ie ^^ thx :)
Bedankt voor de reacties! Ik heb die lay-out maker gebruikt en die werkt goed! Ik post hier even mijn code, centreren werkt nog niet.
css
pagina
Volgende de validator is de (x)html goed. Alleen denk ik dat er nog wat overbodige dingen in de css zitten, bv: clear: both;. Staat dat er voor de sier?
css
body {
font-family: verdana;
font-size: 10pt;
color: #333333;
background-image: url(img/bg.PNG);
}
#hele_pagina {
position: absolute;
width: 700;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 8px;
}
#boven {
position: relative;
margin-bottom: 8px;
}
#menu {
position: relative;
float: left;
width: 100px;
margin: 0;
margin-right: 8px;
padding: 5px;
background-color: #FFFFFF;
}
#content {
position: relative;
padding: 5px;
margin-left: 118px;
background-color: #FFFFFF;
}
#onder_boven {
position: relative;
margin-top: 8px;
}
#onder_onder {
position: relative;
clear: both;
padding: 5px;
margin-top: 8px;
background-color: #FFFFFF;
}pagina
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="hele_pagina">
<div id="boven"><img src="img/header.PNG" alt="" width="702" height="143" /></div>
<div id="menu">Menu</div>
<div id="content">Content</div>
<div id="onder_boven"><img src="img/lol.jpg" alt="" width="702" height="52" /></div>
<div id="onder_onder">test</div>
</div>
</body>
</html>Volgende de validator is de (x)html goed. Alleen denk ik dat er nog wat overbodige dingen in de css zitten, bv: clear: both;. Staat dat er voor de sier?
Joep schreef op 25.03.2005 19:58Alleen denk ik dat er nog wat overbodige dingen in de css zitten, bv: clear: both;. Staat dat er voor de sier?
lol
clear: both; gebruikt men meestal bij de <div> die voor de voettekst (footer) moet zorgen.
clear: both; werkt niet bij een absolute positionering en zorgt ervoor dat de <div> steeds onder het langste atribute blijft staan en er niet even langs glipt en zo naar boven springt.
En, het staat er ook wel mooi. ;o)
Dus dat clear is wel nodig? Het centreren werkt nog steeds niet, ik heb al lang gezocht, ik vind het wel maar het werkt niet.
Bij die lay-out maker krijg je dit in je code:
width: 760px;
\width: 780px;
w\idth: 760px;
Waar slaat dat op?
edit:
Sorry voor al mijn vragen... Hoe komt het dat als je tekst in een div zet je hele pagina breed wordt en de lay-out verpest is?
Bij die lay-out maker krijg je dit in je code:
width: 760px;
\width: 780px;
w\idth: 760px;
Waar slaat dat op?
edit:
Sorry voor al mijn vragen... Hoe komt het dat als je tekst in een div zet je hele pagina breed wordt en de lay-out verpest is?
Joep schreef op 25.03.2005 21:27Dus dat clear is wel nodig? Het centreren werkt nog steeds niet, ik heb al lang gezocht, ik vind het wel maar het werkt niet.
Ik zie het probleem niet onmiddelijk, zal er straks nog even naar zoeken.
Bij die lay-out maker krijg je dit in je code:
width: 760px;
\\width: 780px;
w\\idth: 760px;
Waar slaat dat op?
Pfoe, hoe moet ik dit gaan uitleggen?
Zal het eens proberen doen.
Eigenlijk moet je een stukje css theorie achter de kiezen hebben. De basis van alle css opmaak en positionering is het \"box model\"
Elk element/atribuut wordt in een soort box geplaatst. Deze box bestaat uit een top, right, bottom, left, margin edge, margin, padding, border een width en een height.
Wil je bv. de totale breedte van een element (box) berekenen dan moet je de waarden padding, border en margin optellen bij de eigenschap width.
Nog mee? ;o)
Oké, wat is het probleem? Dat optelsommetje, hoe vreemd het ook mag klinken, is in verschillende browsers niet gelijk!
Dit komt omdat de ontwikkelaars van de verschillende browsers dit boxmodel op hun eigen manier hebben geïnterpreteerd.
Ik schreef dat het eigenlijk de bedoeling is om al de waarden bij mekaar op te tellen om zo aan een totale waarde te komen, in IE5 is dit niet zo. IE5 kijkt eerst naar de width van het buitenste element en alles wat daar binnen valt drukt ie naar binne. Eigenlijk is dit gemakkelijker.
Bv. Je hebt twee div\'s. Eéntje van 30% widht en ééntje van 70% width, samen is dit 100% toch?
Niet altijd., zeker als er nog wat margin en padding wordt bijgevoegd. IE6 zal de twee elementen onder elkaar door schuiven. Opera ook geloof ik.
De drie waarden (width) met/zonder backslash noemen ze IE hacks. Hoe ze precies werken weet ik niet, moet het eens opzoeken. Het komt er op neer dat er een waarde wordt gegeven voor alle browsers, IE6 en IE5
[/quote]
edit:
Sorry voor al mijn vragen... Hoe komt het dat als je tekst in een div zet je hele pagina breed wordt en de lay-out verpest is?
Je moet de weergave van je tekst instellen in je css.
Ook niet zomaar in je (X)HTML plaatsen. Steeds tussen <p> </p>