login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[CSS] Div container centreren

Offline Rmy - 06/11/2006 18:43 (laatste wijziging 06/11/2006 19:39)
Avatar van RmyNieuw lid Goedenavond,

Ik heb een site waar ik de header in een gewone HTML tabel heb gezet en de rest van de site door middel van div elementen gecombineerd met CSS. Alleen zou ik nu graag mijn container willen centreren en dat hij dus recht boven de header komt te staan (die ik tussen <center> tags heb gezet). Mijn css code:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. body
  2.  {
  3.   background-color:#909090;
  4.   font-family:Verdana;
  5.   font-size: 11px;
  6.   color:#D4D4D4;
  7.   scrollbar-arrow-color:#FFC600;
  8.   scrollbar-face-color:#979797;
  9.   scrollbar-highlight-color:#D4D4D4;
  10.   scrollbar-3dlight-color:#C0C0C0;
  11.   scrollbar-shadow-color:#808080;
  12.   scrollbar-darshadow-color:#1C1C1C;
  13.   scrollbar-track-color:#4C4C4C;
  14.  }
  15.  
  16. a:link { color: #ffc403; text-decoration: none }
  17. a:visited { color: #ffc403; text-decoration: none }
  18. a:hover { color: #ffc403; text-decoration: underline }
  19. a:active { color: #ffc403; text-decoration: none }
  20.  
  21.  
  22.  
  23. hr 
  24.  { 
  25.   color: #979797; 
  26.   border: 2px solid #00000;
  27.  }
  28.  
  29. h5
  30.  {
  31.   font-size: 17px;
  32.   color: #ffbd06;
  33.  }
  34.  
  35.  
  36. div.container {
  37.    position: relative;
  38.    border: 10px solid #1d1d1d;  
  39.    width: 930px; 
  40.    padding: 4px;
  41.    margin-top: 0px;
  42.    background-color: #4c4c4c;
  43.    align: center;
  44.  }
  45.  
  46. .linksmenu {
  47.   position: absolute;
  48.   border: 0px;
  49.   left: 10px;
  50.   padding: 0px;
  51.   top: 10px;
  52.   width: 172px;
  53. }
  54.  
  55. .links {
  56.   position: absolute;
  57.   border: 2px solid #1d1d1d;
  58.   left: 10px;
  59.   padding: 4px;
  60.   top: 46px; 
  61.   width: 160px;
  62.   text-align: left;
  63. }
  64.  
  65. .midden {
  66.  
  67.   margin-left: 180px;
  68.   padding: 3px;
  69.   margin-right: 150px;
  70.   top: 230px;
  71.   width: 560px;
  72.   text-align: left;
  73. }
  74.  
  75. .rechtsmenu {
  76.    position: absolute;
  77.    border: 0px;
  78.    right: 10px;
  79.    padding: 0px;
  80.    top: 10px;
  81.    width: 172px;
  82. }
  83.  
  84. .rechts {
  85.   border: 2px solid #1d1d1d;
  86.   position: absolute;
  87.   right: 10px;
  88.   padding: 4px;
  89.   top: 46px;
  90.   width: 160px;
  91.   text-align: left;
  92. }
  93.  
  94.  
  95. div.spacer {
  96.   clear: both; 
  97. }


Wie kan mij helpen?

Groetjes Remy

7 antwoorden

Gesponsorde links
Offline GTW - 06/11/2006 18:47
Avatar van GTW Gouden medaille

PHP gevorderde		 probeer in het stuk dat je wilt centreren eens in de css tag dit te zetten:

margin-left:auto;
margin-right:auto;
Offline Soebam - 06/11/2006 18:48
Avatar van Soebam HTML ver gevorderde
php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.container {
  2.    position: relative;
  3.    border: 10px solid #1d1d1d;  
  4.    width: 930px; 
  5.    padding: 4px;
  6.    margin-top: 0px;
  7.    background-color: #4c4c4c;
  8.    align: center;
  9.  
  10.    margin-left: auto;
  11.    margin-right: auto;
  12. }
Offline Rmy - 06/11/2006 19:00
Avatar van Rmy Nieuw lid Ik heb op dit moment nu dit:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.container {
  2.    position: relative;
  3.    border: 10px solid #1d1d1d;  
  4.    width: 930px; 
  5.    padding: 4px;
  6.    margin-top: 0px;
  7.    background-color: #4c4c4c;
  8.    margin-left:auto;
  9.    margin-right:auto;
  10.  }


Hij komt er nu prachtig onder te staan maar ik krijg wel een irritante schuifbalk onderaan die eigenlijk helemaal niet nodig is. Enig idee? Ik kan wel kloten met wat scripting methodes om de onderste schuifbalk uit te zetten maar mensen met een lagere resolutie naai ik dan ook flink.

Groetjes Remy
Offline Soebam - 06/11/2006 19:09
Avatar van Soebam HTML ver gevorderde Omdat je hele pagina in een frame staat. Trouwens, de balk is alleen zichtbaar in IE, en in andere (lees: goede) browsers zitten er horizontale lijnen met lege ruimte tussen je header en je content. Bekijk je lay dus eens vanuit meerdere browsers en maak m cross-browser compatible .
Offline Rmy - 06/11/2006 19:22 (laatste wijziging 06/11/2006 19:24)
Avatar van Rmy Nieuw lid Ik weet het:

http://83.98.146.6/~remy/klotezooi.JPG

Die bug zit er al heel lang in en heb hem met behulp van allerlei mensen er nog steeds niet kunnen uithalen! 

Kan het helpen als ik de header ook gewoon in een div element zet?
Offline Soebam - 06/11/2006 19:34
Avatar van Soebam HTML ver gevorderde Dat kan. Dit kan ook:

css:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. img
  2.    {
  3.    padding: 0px;
  4.    margin: 0px;
  5.    border: 0px;
  6.    }
Offline Rmy - 06/11/2006 19:45 (laatste wijziging 06/11/2006 19:51)
Avatar van Rmy Nieuw lid Dit is natuurlijk een hele makkelijke en simpele oplossing! Helaas werkt dit niet. De html code is trouwens het volgende:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <center>
  2. <table width="958" border="0" height="200" cellpadding="0" cellspacing="0" bgcolor="">
  3. <tr>
  4. <td width="958" height="168"  colspan="7"><img src="http://83.98.146.6/~remy/images/night/headern_1.gif" /></td>
  5.  </tr>
  6.  
  7.  <tr>
  8.   <td width="300" height="32" > <img src="http://83.98.146.6/~remy/images/night/header_partn.gif" /></td>
  9.   <td width="71" height="32" ><a href="http://83.98.146.6/~remy/"><img src="http://83.98.146.6/~remy/images/night/menu_homen.gif" border="0"/></a></td>
  10.   <td width="117" height="32" ><img src="http://83.98.146.6/~remy/images/night/menu_nieuwsn.gif" /></td>
  11.   <td width="165" height="32" ><img src="http://83.98.146.6/~remy/images/night/menu_multin.gif" /></td>
  12.   <td width="103" height="32" ><img src="http://83.98.146.6/~remy/images/night/menu_gamesn.gif" /></td>
  13.   <td  width="117" height="32" ><img src="http://83.98.146.6/~remy/images/night/menu_designn.gif" /></td>
  14.   <td width="87" height="32"><img src="http://83.98.146.6/~remy/images/night/menu_infon.gif" /></td>
  15.  
  16. </tr>
  17. </table>
  18. </center>


Hier zit nog wel wat PHP tussen. Dit omdat ik één nacht en één dag layout heb. 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.231s