login  Naam:   Wachtwoord: 
Registreer je!
 Forum

div centreren

Offline phpfreak - 14/03/2007 01:03
Avatar van phpfreakPHP beginner hoe centreer ik een <div> ? daarmee bedoel ik dat de div gecentreerd is tov de body, en niet alles wat erin staat, ik doe het nu zo:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <table align="center">
  2. <tr>
  3. <td>
  4. <div class="container">inhoud</div>
  5. </td>
  6. </tr>
  7. </table>

maar dat is nog steeds met een table, en ik zou dit table weg willen

5 antwoorden

Gesponsorde links
Offline vinTage - 14/03/2007 01:21
Avatar van vinTage Nieuw lid <div style="width:800px; margin-left:auto; margin-right:auto;">
inhoud
</div>


ik typ dit uit mn kop want ik ga slapen, maar als margin niet werkt, dan is het padding, ik gooi die altijd door elkaar 





nou maar hopen dat het klopte wat ik zie 
Offline JBke - 14/03/2007 08:53 (laatste wijziging 14/03/2007 08:55)
Avatar van JBke PHP gevorderde Het is margin niet padding je hebt het dus juist,

Ik werk daarvoor met een externe stylesheet en je kan oo,k als wolgd te werk gaan:

.divcenter {
position: absolute;
width: 800px;
margin-left: auto;
margin-right: auto;
}

of deze die de centrering steeds vanuit het midden begint:

.divcenter {
position: absolute;
width: 800px;
left: 50%;
margin-left: -400px;
}
Offline Xan - 14/03/2007 09:26
Avatar van Xan HTML interesse dit is een kortere versie:

.container{
width:800px;
margin:0 auto 0 auto;
}

Met de eerste '0' kun je de margin aan de bovenkant bepalen, en met de tweede '0' de margin aan de onderkant.

deze margin volgorde is als volgt:
margin: boven rechts onder links
margin 0 auto 0 auto
Offline phpfreak - 14/03/2007 15:10
Avatar van phpfreak PHP beginner ja met die margin auto werkt wel in een nieuw document, maar niet in het bestaand document, waar ik eigelijk de tabel wil weg krijgen 
Offline Thomas - 14/03/2007 15:33 (laatste wijziging 14/03/2007 15:35)
Avatar van Thomas Moderator De methode van Xan werkt, als je het document een DOCTYPE meegeeft :], dus wanneer het (X)HTML-document juist is opgebouwd.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Test</title>
  5. <style type="text/css">
  6. *
  7. {
  8.   margin: 0px;
  9.   padding: 0px;
  10. }
  11.  
  12. html, body
  13. {
  14.   height: 100%;
  15. }
  16.  
  17. #container
  18. {
  19.   width: 800px;
  20.   height: 100%;
  21.   margin: 0px auto;
  22.   background-color: #ccc;
  23. }
  24. </style>
  25. </head>
  26.  
  27. <body>
  28. <div id="container">
  29. Hello world.
  30. </div>
  31. </body>
  32. </html>


NB: Als de hoogte groter is dan 100%, dan moet je een andere methode gebruiken om de achtergrond door te trekken (in FF), maar dit is een ander probleem.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.195s