login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Website centreren

Offline uaejeroen - 09/04/2011 03:49 (laatste wijziging 11/04/2011 13:46)
Avatar van uaejeroenNieuw lid Wie kan me helpen..
ik ben al een maand bezig mijn website in het midden te zetten 780 px

Het wil me niet lukken
ook ben ik enige tijd bezig geweest met css, daar durf ik verder niet aan te komen

wie kan me helpen

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.  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Untitled Document</title>
  7. <style type="text/css"></style>
  8. <link href="stylesheet/basic.css" rel="stylesheet" type="text/css" />
  9. <style type="text/css"></style>
  10. </head>
  11. <style type="text/css">
  12. #container { 
  13. 	position: relative;
  14.     width: 780px;
  15.     margin: 0 auto;
  16. 	border: 1px solid green;
  17. }
  18.  
  19. #apDiv1 {
  20. 	position:absolute;
  21. 	top:4px;
  22. 	z-index:1;
  23. 	border: 1px solid red;
  24. 	overflow: hidden;
  25. 	}
  26.  
  27. #apDiv2 {
  28. 	position:absolute;
  29. 	top:122px;
  30. 	width:200px;
  31. 	height:465px;
  32. 	z-index:2;
  33. 	border: 1px solid blue;
  34. 	}
  35.  
  36. #apDiv3 {
  37. 	position:absolute;
  38. 	left:615px;
  39. 	top:120px;
  40. 	width:165px;
  41. 	height:465px;
  42. 	z-index:3;
  43. 	border: 1px solid fuchsia;
  44. 	}
  45. </style>
  46.  
  47.  
  48. <body>
  49. <div class="container"> 
  50. <div id="apDiv1"><a href="index.php"><img src="afbeeldingen/logo_energynet.gif" width="766" height="113" alt="Home" /></a></div>
  51. <div id="apDiv2">
  52.   <p><br />
  53.     <img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=algemene_informatie">Algemene informatie</a><br />
  54.     <a href="index.php?p=tarieven">Tarieven</a><br />
  55.     <a href="index.php?p=pakketen">Pakketten</a><br />
  56.     <img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=service">Service en onderhoud</a><br />
  57.     <a href="index.php?p=energyservice">EnergyService</a><br />
  58.     <a href="index.php?p=product">Productadvies</a><br />
  59.     <a href="index.php?p=besparingtips">Besparingstips</a><br />
  60.     <img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=vraagentwoord">Vraag en antwoord</a><br />
  61.     <a href="index.php?p=mail">Per e-mail</a><br />
  62.     <a href="index.php?p=chat">Via chat</a><br />
  63.     <img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=gegevens">Uw gegevens</a><br />
  64.     <a href="index.php?p=nota">Nota en verbruik</a><br />
  65.     <a href="index.php?p=meterstanden">Meterstanden doorgeven</a><br />
  66.   <a href="index.php?p=verhuizing_doorgeven">Verhuizing doorgeven</a></p>
  67. </div>
  68. <div id="apDiv3">
  69.   <p><img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=verhuizing_doorgeven">Verhuizen, wat nu?</a><br />
  70.     <img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=besparingtips">Besparingstips</a><br />
  71.     <img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=klantenservice">Klantenservice</a></p>
  72.   <p>&nbsp;</p>
  73.   <form id="form1" name="form1" method="post" action="">
  74.     <label for="e-mail"></label>
  75.     e-mailadres   :<br />
  76.     <label for="e-mail2"></label>
  77.     <input type="text" name="e-mail" id="e-mail2" />
  78.     <br />
  79.     wachtwoord: <br />
  80.     <label for="wachtwoord"></label>
  81.     <input type="text" name="wachtwoord" id="wachtwoord" />
  82. <br />
  83.   <em>Controleer uw gegevens</em>
  84.   </form>
  85. </div>
  86. <div id="apDiv4">
  87.  
  88. <?php
  89. if (isset($_GET['p'])) {
  90. $includebstandtemp = $_GET['p'];
  91. if (is_file($_GET['p'] . '.html')) {
  92. $includebstand = ''.$includebstandtemp.'.html';
  93. }
  94. }
  95. else {
  96. $includebstand = '';
  97. }
  98. if (!empty($includebstand)) {
  99. include($includebstand);
  100. }
  101. ?>
  102.  
  103. <?php if (!isset($_GET['p'])) { ?>
  104. <h1>Welkomstvenster</h1>
  105. <p>Welkom bij de Online HelpDesk van EnergyNet<br />
  106.   U vraagt, wij antwoorden<br />
  107.   Op deze Online HelpDesk kunt u vragen  stellen omtrent de tarieven en de pakketten die wij aanbieden.<br />
  108.   Beheer uw eigen gegevens<br />
  109.   Wilt u op de hoogte blijven van uw  verbruik, uw nota inzien, een verhuizing of de meterstanden doorgeven? Dat kan  met uw eigen e-mailadres en wachtwoord. Als u nieuw bent, vult u eenmalig een  registratieformulier in.</p>
  110. <?php } ?>
  111.  
  112. </div>
  113. </div>
  114. </body>
  115. </html>


En hier mijn css

Plaatscode: 140919

Ibrahim schreef:
Vergeet niet de code tags weer af te sluiten 

2 antwoorden

Gesponsorde links
Offline valles10 - 09/04/2011 08:23 (laatste wijziging 09/04/2011 08:25)
Avatar van valles10 HTML interesse zorg eerst dat je code tags werken...
en heb je een online voorbeeld van wat je nu hebt?

ik centreer mijn pagina's zo:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #wrapper{
  2. width: 900px;
  3. margin-left: auto;
  4. margin-right: auto;
  5. }


en dan mijn header, footer, nav, menu, footer in de wrapper (html). Maar jij werkt met absolute en relative positions, in zo'n geval gebruik ik javascript 
Offline WouterJ - 09/04/2011 11:31
Avatar van WouterJ HTML gevorderde @valles10, je kan dan beter margin: 0 auto; opschrijven.

@uaejeroen, zou je lange codes eens op plaatscode.be willen plaatsen?
Als je niet meer aan je CSS durft te komen houdt het op. Je zal hoe dan ook je CSS steeds moeten veranderen om dingen voor elkaar te krijgen.
Verder heb je 3 nutteloze style tags in je bestand staan. En je kan veel beter alles in een stylesheet zetten en die inladen.
Je interne style tag staat tussen de </head> en <body>, de style tags moeten altijd in de head.

Het probleem waarom hij niet centreert is omdat je bij de body width: auto; hebt staan. Dit moet een vaste width waarde zijn, dan werkt het wel. (als ik het zo even goed bekijk, wat best lastig is zonder code tags)
Bedankt door: valles10
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.175s