login  Naam:   Wachtwoord: 
Registreer je!
 Forum

heigh 100% en in het midden

Offline robmoorman - 02/04/2007 18:30 (laatste wijziging 02/04/2007 18:31)
Avatar van robmoormanPHP interesse ik heb het volgende probleem. mijn website is namelijk nu wel met de kleuren en achtergrond 100%. maar dan komt de website links te staan ipv het midden, wie weet hier een oplossing voor.

mijn html:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <head>
  6. 	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7. 	<title>robmoorman.nl</title>
  8. 	<link rel="stylesheet" type="text/css" href="stijl.css" media="screen" />
  9. </head>
  10.  
  11. <body>
  12.  
  13. <div id="container">
  14. <div id="schaduw_links"><img src="images/schaduw_links.gif" border="0px" alt="" /></div>
  15. <div id="cont_links">
  16. 	<div id="logo"></div>
  17. </div>
  18. <div id="cont_rechts">
  19. </div>
  20. <div id="schaduw_rechts"><img src="images/schaduw_rechts.gif" border="0px" alt="" /></div>
  21. </div>
  22.  
  23. </body>
  24.  
  25. </html>


mijn css:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. body {
  2. 	height: 100%;
  3. 	color: #333333;
  4. 	font-family: Verdana;
  5. 	font-size: 10px;
  6. 	background-color: #ffffff;
  7. 	background-image: url('images/achtergrond.gif');
  8. 	background-attachment; fixed;
  9. 	background-repeat: repeat-x;
  10. 	margin: 0px;
  11. }
  12.  
  13. #container {
  14. 	width: 780px;
  15. 	height: 100%;
  16. 	background-color: #ffffff;
  17. 	margin: 0px auto;
  18. 	position: absolute;
  19. }
  20.  
  21. #cont_links {
  22. 	width: 360px;
  23. 	height: 100%;
  24. 	background-color: #f5f5f5;
  25. 	float: left;
  26. }
  27.  
  28. #cont_rechts {
  29. 	width: 380px;
  30. 	height: 100%;
  31. 	float: left;
  32. }
  33.  
  34. #schaduw_links {
  35. 	width: 20px;
  36. 	height: 100%;
  37. 	background-image: url('images/schaduw_bg_links.gif');
  38. 	background-repeat: repeat-y;
  39. 	float: left;
  40. }
  41.  
  42. #schaduw_rechts {
  43. 	width: 20px;
  44. 	height: 100%;
  45. 	background-image: url('images/schaduw_bg_rechts.gif');
  46. 	background-repeat: repeat-y;
  47. 	float: left;
  48. }
  49.  
  50. #logo {
  51. 	width: 360px;
  52. 	height: 380px;
  53. 	background-image: url('images/logo.jpg');
  54. 	background-repeat: no-repeat;
  55. 	float: left;
  56. }


wie weet hier een oplossing voor?

het is te zien op http://www.robmoorman.nl/preview

5 antwoorden

Gesponsorde links
Offline CHIR - 02/04/2007 18:35
Avatar van CHIR Nieuw lid Voeg het volgende aan je CSS toe:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. body { margin: 0; padding: 0; text-align: center; }
  2. html>body { text-align: left; }


Succes!
Offline robmoorman - 02/04/2007 18:44
Avatar van robmoorman PHP interesse CHRIR, ik heb het toegevoegd zoals jij zei, maar het is nog steeds links... als ik de html>body { text-align: left; } weghaal, dan is mijn website rechts uitgelijnt (helemaal maf)...

ik heb nu:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. body {
  2. 	height: 100%;
  3. 	color: #333333;
  4. 	font-family: Verdana;
  5. 	font-size: 10px;
  6. 	background-color: #ffffff;
  7. 	background-image: url('images/achtergrond.gif');
  8. 	background-attachment; fixed;
  9. 	background-repeat: repeat-x;
  10. 	margin: 0px;
  11. 	padding: 0px;
  12. 	text-align: center;
  13. }
  14.  
  15. html>body {
  16. 	text-align: left;
  17. }
  18.  
  19. #container {
  20. 	width: 780px;
  21. 	height: 100%;
  22. 	background-color: #ffffff;
  23. 	margin: 0px auto;
  24. 	position: absolute;
  25. }.......


komt het niet door de position: absolute; ? want als ik dat weghaal dan is mijn site wel in het midden, maar dan is de hoogte 100% (gevulde vakken) niet meer correct....

groet, rob
Offline Orves - 02/04/2007 19:10
Avatar van Orves Nieuw lid Godlike, het komt inderdaad door je postion: absolute, je zal je css iets moeten aanpassen met bijvoorbeeld deze code moet het werken:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. #container {
  2.  position: absolute;
  3.  top: 0px;
  4.  left: 0px;
  5.  width: 780px;
  6.  margin-left: -390px;
  7.  height: 100%;
  8.  background-color: #FFFFFF;
  9.  }


Nu positioneer je je div content helemaal links boven in je body, maar door een breedte en negatieve margin-left op te geven welke de helft is van je totale div-breedte komt hij netjes in het midden te staan.

Ik hoop dat het hiermee duidelijk is, mocht je nog vragen hebben dan lees ik ze hier wel terug. Laat even weten of het is gelukt.

Cheers, Orves
Offline robmoorman - 02/04/2007 19:11
Avatar van robmoorman PHP interesse ja de marginleft idd, maar ik wil hem altijd in het midden staan, als iemand nu op 800-600 bekijkt staat hij dan niet meer in het midden namelijk ;)
Offline Orves - 02/04/2007 19:14
Avatar van Orves Nieuw lid Ook dat is op te lossen door je body de volgende code te geven:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. body {
  2.  width: 100%;
  3.  max-width: 100%;
  4.  height: 100%;
  5.  max-height: 100%;
  6.  margin: 0px;
  7.  padding: 0px;
  8.  }
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.205s