login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Gedeelte HTML Centreren

Offline Antntt89 - 09/03/2010 16:26
Avatar van Antntt89Nieuw lid Ik ben bezig met het uitwerken van mijn website-ontwerp. Ik werk normaal in tabellen, maar wil overstappen naar div's. Ik heb hier enige kennis van, maar loop nog tegen wat problemen.

Ik wil graag de pagina centreren, en hij moet wel een height van 100% houden. Helaas kom ik hier zelf niet uit met de uitleg die ik overal kan vinden op internet.

DE 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. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Antoinette de Jongh</title>
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10. <div class="header"></div>
  11. <div class="menublok"></div>
  12. <div class="balk_rechts"></div>
  13. <div class="content"></div>
  14. <div class="header_dropshadow"></div>
  15. <div class="footer_dropshadow"></div>
  16. <div class="footer"></div>
  17. </body>
  18. </html>


DE CSS

php code - Bekijk de code zonder highlighting - Klap code in 
  1. html, body		{	margin: 0px;
  2. 					padding: 0 px;
  3. 					height:100%
  4. 				}
  5.  
  6. div.header		{
  7. 					height:79px;
  8. 					background-color:#bc9c7f;
  9. 					position: absolute;
  10. 					top: 0px;
  11. 					left: 0 px;
  12. 					width: 100%;
  13. 					border-bottom-width: 1px;
  14. 					border-bottom-style: solid;
  15. 					border-bottom-color: #79614d;
  16. 					background-image:url(Images/shadow.png);
  17. 					background-repeat: repeat-x;
  18. 				}
  19.  
  20. div.header_dropshadow	{	height: 4px;
  21. 							position: absolute;
  22. 							top: 80px;
  23. 							left: 0 px;
  24. 							width: 100%;
  25. 							background-image: url(Images/header_dropshadow_05_05.png);
  26. 							background-repeat:repeat-x;
  27. 						}
  28.  
  29. div.footer_dropshadow	{	height: 4px;
  30. 							position: absolute;
  31. 							bottom: 30px;
  32. 							left: 0 px;
  33. 							width: 100%;
  34. 							background-image: url(Images/footer_dropshadow_08.png);
  35. 							background-repeat:repeat-x;
  36. 						}
  37.  
  38. div.menublok	{	width: 240px;
  39. 					position:absolute;
  40. 					left: 50px;
  41. 					top: 80px;
  42. 					bottom: 30px;
  43. 					background-color: #242424;
  44. 					border-left-width: 1px;
  45. 					border-left-style: solid;
  46. 					border-left-color: #000;
  47. 					border-right-width: 1px;
  48. 					border-right-style: solid;
  49. 					border-right-color: #000;
  50. 				}
  51.  
  52. div.balk_rechts	{	width: 25px;
  53. 					position:absolute;
  54. 					left: 948px;
  55. 					top: 80px;
  56. 					bottom: 30px;
  57. 					background-color: #242424;
  58. 					border-left-width: 1px;
  59. 					border-left-style: solid;
  60. 					border-left-color: #000;
  61. 					border-right-width: 1px;
  62. 					border-right-style: solid;
  63. 					border-right-color: #000;
  64. 				}
  65.  
  66. div.content		{	position:absolute;
  67. 					left: 289px;
  68. 					top: 80px;
  69. 					right: 77px;
  70. 					bottom: 30px;
  71. 					background-color:#FFF;
  72. 					background-image:url(Images/flower_08.jpg);
  73. 					background-position:right top;
  74. 					background-repeat:no-repeat;
  75. 					width: 660px;
  76. 				}
  77.  
  78. div.footer				{	margin: 0px;	
  79. 							height:30px;
  80. 							background-color:#bc9c7f;
  81. 							position: absolute;
  82. 							bottom: 0px;
  83. 							left: 0px;
  84. 							right:0px;
  85. 							width: 100%;
  86. 							clear: both;
  87. 							background-image:url(Images/bottom_06.png);
  88. 							background-repeat:repeat-x;
  89. 							border-top-width: 1px;
  90. 							border-top-style: solid;
  91. 							border-top-color: #79614d;
  92. 				}

2 antwoorden

Gesponsorde links
Offline yolk - 09/03/2010 16:59
Avatar van yolk HTML interesse 'auto' toevoegen bij de margin?

css code - Bekijk de code zonder highlighting - Klap code in 
  1. html, body { margin: 0 auto;
  2. padding: 0 px;
  3. height:100%;
  4. }
Offline nick5556 - 09/03/2010 17:30
Avatar van nick5556 PHP beginner in je container(of bij alle andere classes/id's)

css code - Bekijk de code zonder highlighting - Klap code in 
  1. width: 800px;
  2. left: 50%;
  3. margin-left: -400px;


de breedte van je website zelf bepalen, de margin left de helft van je breedte negatief.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.214s