login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Layout centreren in CSS met DIV's

Offline Smiley - 26/08/2005 17:35
Avatar van SmileyNieuw lid Ik ben sinds kort begonnen met een cursus CSS. Ik heb echter al gelijk een klein probleempje. Ik wil nu namelijk div's gebruiken in plaats van tabellen.

Het probleem is de uitlijing. Het is de bedoeling dat de site gecentreerd wordt en steeds dezelfde breedte heeft, maar hoe doe ik dat. Ik kan wel dingen dezelfde breedte geven, maar dan worden het niet gecentreerd, doordat er ook bepaalde mare is met de zijkant, hierdoor zal de middentabel de hele breedte bezetten.

http://www.voetbal.frihost.net/v2/css_cursus.php de site waar het om gaat.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <!--  Created with the CoffeeCup HTML Editor 2005  -->
  4. <!--           http://www.coffeecup.com/           -->
  5. <!--       Brewed on 12/22/2004 12:04:26 PM        -->
  6. <head>
  7.   <title></title>
  8.  
  9.   <style type="text/css">
  10.          body { text-align: justify;}
  11.          h1 { margin-bottom: 20px;}
  12.          #middle { margin-right: 185px; margin-left: 185px; }
  13.          #left { float: left; clear: left; width: 175px;}
  14.          p { margin: 20 20; display: table;}
  15.          #right { float: right; width: 175px; }
  16.          #footer { clear: both; margin: 25 25; text-align: center; font-size: 
  17.                    border-top: 1px solid black;}
  18.   </style>
  19.  
  20. </head>
  21. <body>
  22.  
  23. <h1>
  24. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  25. </h1>
  26.  
  27. <div id="left">
  28. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse wisi diam, tristique nec, elementum sed, commodo in, sapien. Aliquam tincidunt mauris sed lorem. Phasellus sed mauris. Praesent viverra egestas mi. Suspendisse facilisis libero vel neque. Fusce vel nulla. Nulla bibendum arcu placerat elit. Cras wisi. Nullam nonummy orci sit amet est. Nunc nonummy. Phasellus pharetra pharetra massa. Aliquam enim neque, viverra a, venenatis venenatis, ornare vitae, nulla. Aenean tempus, pede nec tristique blandit, turpis metus pulvinar dui, at elementum purus est sit amet libero. Curabitur vitae urna quis felis bibendum pulvinar. Nulla sagittis. Vestibulum placerat purus eu nulla. Proin eu urna nec arcu semper tristique. Donec vel urna vel dolor feugiat pretium. Cras eleifend. </p>
  29.  </div>
  30.  
  31.  
  32. <div id="right">
  33. <p>Donec aliquet. Donec erat libero, tempor ac, vestibulum ac, vulputate ac, est. Mauris quis mauris eget sapien luctus elementum. Integer nulla ligula, malesuada sed, dapibus eu, tincidunt at, purus. Etiam sodales, augue a interdum tristique, velit nunc venenatis justo, at accumsan tellus purus lobortis nunc. In hac habitasse platea dictumst. Nunc posuere semper leo. Vestibulum varius lectus at leo. Integer nonummy pellentesque diam. Phasellus vestibulum varius augue. Aliquam erat volutpat. Morbi ante velit, viverra a, gravida sit amet, scelerisque ac, mauris. Proin diam lorem, rutrum et, sagittis non, placerat eget, neque. Morbi vehicula metus vel dolor. Nullam massa. </p>
  34. </div>
  35.  
  36. <div id="middle">
  37. <p>Pellentesque rutrum sodales lacus. Nulla volutpat, mauris vitae luctus commodo, nulla wisi convallis enim, mattis mollis erat quam vitae augue. Proin feugiat justo non enim. Suspendisse potenti. Praesent iaculis dolor ac arcu. Pellentesque convallis ipsum sit amet magna. Vivamus varius. Nulla felis nibh, eleifend in, adipiscing et, tincidunt mollis, erat. Sed a justo. Nam in libero vitae sapien vehicula aliquam. Suspendisse a felis eget sem commodo congue. Aliquam ultricies nonummy enim. Vestibulum lectus erat, dapibus vitae, ornare sed, condimentum quis, wisi. Nulla facilisi. Vestibulum ut enim. Sed lacus sapien, rhoncus id, mattis sit amet, semper nec, metus.</p>
  38. <p>Donec aliquet. Donec erat libero, tempor ac, vestibulum ac, vulputate ac, est. Mauris quis mauris eget sapien luctus elementum. Integer nulla ligula, malesuada sed, dapibus eu, tincidunt at, purus. Etiam sodales, augue a interdum tristique, velit nunc venenatis justo, at accumsan tellus purus lobortis nunc. In hac habitasse platea dictumst. Nunc posuere semper leo. Vestibulum varius lectus at leo. Integer nonummy pellentesque diam. Phasellus vestibulum varius augue. Aliquam erat volutpat. Morbi ante velit, viverra a, gravida sit amet, scelerisque ac, mauris. Proin diam lorem, rutrum et, sagittis non, placerat eget, neque. Morbi vehicula metus vel dolor. Nullam massa. </p>
  39. <p>Pellentesque rutrum sodales lacus. Nulla volutpat, mauris vitae luctus commodo, nulla wisi convallis enim, mattis mollis erat quam vitae augue. Proin feugiat justo non enim. Suspendisse potenti. Praesent iaculis dolor ac arcu. Pellentesque convallis ipsum sit amet magna. Vivamus varius. Nulla felis nibh, eleifend in, adipiscing et, tincidunt mollis, erat. Sed a justo. Nam in libero vitae sapien vehicula aliquam. Suspendisse a felis eget sem commodo congue. Aliquam ultricies nonummy enim. Vestibulum lectus erat, dapibus vitae, ornare sed, condimentum quis, wisi. Nulla facilisi. Vestibulum ut enim. Sed lacus sapien, rhoncus id, mattis sit amet, semper nec, metus.</p>
  40. </div>
  41.  
  42.  
  43. <div id="footer">
  44. Nulla sollicitudin ligula et lacus.
  45. </div>
  46.  
  47.  
  48. </body>
  49. </html>


De code waar het om gaat ter verduidelijking.

0 antwoorden

Gesponsorde links
Er zijn nog geen reacties op dit bericht.
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.177s