login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Ruimte tussen div's

Offline bertenz - 29/10/2005 15:50 (laatste wijziging 29/10/2005 16:07)
Avatar van bertenzHTML beginner Hallo allemaal,

Een tijdje geleden ben ik begonnen met het om leren gaan met div's. Inmiddels heb ik al een groot gedeelte onder de knie, maar ik heb wel één klein probleempje. Ik heb de volgende div's ingesteld staan:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. .links{
  2. float: left;
  3. width: 250px;
  4. border: 0px;
  5. height: 150px;
  6. background-color:#00FF00;
  7. clear: left;
  8. }
  9. .center{
  10. float: none;
  11. height: 150px;
  12. border: 0px;
  13. margin-left: 250px;
  14. margin-right: 150px;
  15. border-left-color:#000080;
  16. background: #000080;
  17. clear: none;
  18. }
  19. .rechts{
  20. float: right;
  21. width: 150px;
  22. height: 150px;
  23. border-left-color:#FF0000;
  24. background-color:#FF0000;
  25. clear: right;
  26. }
  27. .onder{
  28. float: none;
  29. width: 100%;
  30. height: 100px;
  31. clear: both;
  32. background-color:#D8D8D8;
  33. }

Het probleem dat ik hierbij heb is dat tussen "links" en "center" en tussen "rechts" en "center" een leeg stukje is. wat ik ook aan de groottes van alle velden verander, het maakt niets uit, want het lege stukje komt steeds terug. Dit lege stuk heb ik niet als ik er een andere div ("onder") onder zet. Het kan allemaal nogal onduidelijk overkomen, dus hier het voorbeeld:
http://www.imbbertens.nl/test/test2/index.php

Alle hulp is welkom.

Bertenz

6 antwoorden

Gesponsorde links
Offline Fenrir - 29/10/2005 16:49
Avatar van Fenrir PHP expert
php code - Bekijk de code zonder highlighting - Klap code in 
  1. .links{
  2. position: absolute;
  3. left: 0;
  4. width: 250px;
  5. height: 150px;
  6. background-color:#00FF00;
  7. }
  8. .center{
  9. position: absolute;
  10. left: 250px;
  11. right: 150px;
  12. height: 150px;
  13. background: #000080;
  14. }
  15. .rechts{
  16. position: absolute;
  17. right: 0;
  18. width: 150px;
  19. height: 150px;
  20. background-color:#FF0000;
  21. }


Zou moeten werken zonder "onder".
Offline Ontani - 30/10/2005 11:17
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 @Fenrir: tis beter als ge geen absolute positionering gebruikt:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <style type="text/css">
  2.  
  3. body {
  4. 	margin:0; 
  5. 	padding:0;
  6. }
  7.  
  8. #left {
  9. 	float:left;
  10. 	width:250px;
  11. 	height: 150px;
  12. 	margin:0; 
  13. 	padding:0;
  14. }
  15. #right {
  16. 	float:right;
  17. 	width:250px;
  18. 	height: 150px;
  19. 	margin:0; 
  20. 	padding:0;
  21. }
  22.  
  23. #middle {
  24. 	margin:0 250px;
  25. 	height: 150px;
  26. }
  27.  
  28. </style>
  29.  
  30. <div id="left">Links</div>
  31. <div id="right">Rechts</div>
  32. <div id="middle">Midden</div>


let wel op de volgorde: eerst komt links, dan rechts dan pas midden.
hou je deze volgorde niet aan, dan zal het niet lukken.
Offline Fenrir - 30/10/2005 11:23 (laatste wijziging 30/10/2005 11:26)
Avatar van Fenrir PHP expert Waarom is dat beter?
Het is trouwens goed je CSS zo kort mogelijk te houden. Als je de hoogte wilt veranderen moet je dat op 3 plaatsen doen. Dit is makkelijker:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. .link, .center, .rechts{
  2. position: absolute;
  3. height: 150px;
  4. }
  5. .links{
  6. left: 0;
  7. width: 250px;
  8. }
  9. .center{
  10. left: 250px;
  11. right: 150px;
  12. }
  13. .rechts{
  14. right: 0;
  15. width: 150px;
  16. }
Offline Ontani - 30/10/2005 15:24 (laatste wijziging 30/10/2005 15:24)
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 het is beter als je bijvoorbeeld een header boven alles hebt staan. als je dan absolute positionering gebruikt moet ge ook de hoogte van header in rekening gaan houden. maar het is vooral voor elementen die onder een pagina met relatieve hoogtes komt staan dat absolute positionering vervelend begint te doen.
Offline bertenz - 30/10/2005 20:04
Avatar van bertenz HTML beginner Bedankt voor jullie reacties. Ik ga nu even meerdere dingen testen zodat ik het CSS-gebeuren nog iets beter onder de knie krijg. Nogmaals bedankt.

Bertenz
Offline Fenrir - 30/10/2005 20:31
Avatar van Fenrir PHP expert @Ontani: ik gebruik juist absolute positionering om ervoor te zorgen dat de header in de HTML-code onderaan staat er in de browser bovenaan. Want mensen met screen readers en zoekmachines zijn toch niet in headers geinteresseerd.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.194s