login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Positioneren divs

Offline Simax - 27/09/2006 08:27 (laatste wijziging 27/09/2006 13:21)
Avatar van SimaxOnbekend Beste mensen,

Iemand een idee?
Is het mogelijk om een div te positioneren zonder float: left/right;
Ik wil namelijk geen div die naar links of rechts word uitgelijnd. Wel graag 3 divjes langs elkaar.

Alvast bedankt voor de hulp 

MvG,
Generix

8 antwoorden

Gesponsorde links
Offline marten - 27/09/2006 12:34
Avatar van marten Beheerder ja dat kan wel 

met position kan je dat doen.
Offline Simax - 27/09/2006 12:40 (laatste wijziging 27/09/2006 13:20)
Avatar van Simax Onbekend Ok.

Dat vermoede had ik al.

Ik heb een container met daarin:
header.div
menu.div
left.div, center.div, right.div
bottom.div

Wat zou ik in mijn css moete zetten om deze layout te maken?

position: ?

Alvast bedankt 

MvG,
Generix
Offline Thomas - 27/09/2006 13:38
Avatar van Thomas Moderator Waarom zou je absolute positionering willen gebruiken? Passen je floats niet in IE en/of FF?
Offline Simax - 27/09/2006 13:46
Avatar van Simax Onbekend Jawel,

Maar wanneer ik float: left/right toepas, krijg ik het probleem dat mijn divs tegen de border van mijn container div aanlopen.
Ik wil graag 3 divjes langs elkaar gecentreerd.

Alvast bedankt 

MvG,
Generix
Offline Thomas - 27/09/2006 13:54
Avatar van Thomas Moderator Je kunt je divs toch margins geven?
Offline Simax - 27/09/2006 14:07 (laatste wijziging 27/09/2006 14:27)
Avatar van Simax Onbekend Maar..

Wanneer ik mijn divs margins geef, dan komen ze nog niet goed langs elkaar. Volgens mij moet ik gebruik maken van position: absolute/relative.

Ik weet alleen niet wanneer ik gebruik moet maken van absolute, en wanneer van relative? Iemand die wil helpen 

Alvast bedankt 

MvG,
Generix
Offline Thomas - 27/09/2006 14:36 (laatste wijziging 27/09/2006 14:37)
Avatar van Thomas Moderator Padding, margin en border worden opgeteld bij breedtes en hoogtes van divs. Daar moet je dus in omringende divs rekening mee houden. Als de omringende "containers" te klein zijn -of je floatende divs hierin te groot- dan zullen de divs die niet meer passen naar de volgende regel springen.

Zie het volgende voorbeeld:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html
  2. 	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html>
  5. <head>
  6. <title>box model</title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  8. <style type="text/css">
  9. #box1
  10. {
  11. 	width: 300px;
  12. 	height: 50px;
  13. 	line-height: 50px;
  14. 	text-align: center;
  15. 	background-color: #ccffff;
  16. }
  17.  
  18. #box2
  19. {
  20. 	width: 300px;
  21. 	height: 50px;
  22. 	line-height: 50px;
  23. 	text-align: center;
  24. 	background-color: #ffccff;
  25. 	padding: 10px;
  26. }
  27.  
  28. #box3
  29. {
  30. 	width: 300px;
  31. 	height: 50px;
  32. 	line-height: 50px;
  33. 	text-align: center;
  34. 	background-color: #ffffcc;
  35. 	padding: 10px;
  36. 	border: 10px solid #0000ff;
  37. }
  38.  
  39. #box4
  40. {
  41. 	width: 300px;
  42. 	height: 50px;
  43. 	line-height: 50px;
  44. 	text-align: center;
  45. 	background-color: #ccffcc;
  46. 	padding: 10px;
  47. 	border: 10px solid #0000ff;
  48. 	margin: 10px;
  49. }
  50. </style>
  51. </head>
  52.  
  53. <body>
  54. <div id="box1">300px, zonder border of padding</div>
  55. <div id="box2">300px, 10px padding</div>
  56. <div id="box3">300px, 10px padding, 10px border</div>
  57. <div id="box4">300px, 10px padding, 10px border, 10px margin</div>
  58. </body>
  59. </html>


Daarnaast heeft IE een verkeerde boxmodel-implementatie. Daar wordt de padding en border afgetrokken van de width - alleen de margin komt bovenop de width.
Wanneer je echter (in IE6) een DOCTYPE meegeeft, rendent IE de divs wel in de juiste verhoudingen.

In IE6 en FF ziet dit hetzelfde eruit. Als je de DOCTYPE verwijdert rendert IE de divs verkeerd - probeer dit maar eens uit.

Als je dus snapt hoe de afmetingen van divs werken, kun je prima werken met floats.
Offline dennnuz - 27/09/2006 16:47
Avatar van dennnuz Nieuw lid gewoon de hele container centreren?
php code - Bekijk de code zonder highlighting - Klap code in 
  1. #container {
  2.   margin: 0px auto 0px auto;
  3. }

of een soort van "container" maken voor die 3 divjes  
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.183s