Problèmes de blocs

Problèmes de blocs - HTML/CSS - Programmation

Marsh Posté le 05-01-2007 à 14:31:48    

Bonjour,
 
voilà, j'ai un petit souci avec des blocs, je n'arrive pas à trouver la solution
 
http://i95.photobucket.com/albums/l127/Tristou/probleme_vhfr.jpg
 
Il y a sur la gauche et sur la droite un espace qui décale le pied de page et qui du coup fais apparaitre un ascenceur horizontal. J'aimerais supprimer ces espaces
Comment puis-je faire pour que mes deux blocs aient à gauche et à droite la même taille, peu importe ce qu'il contiennent ?
 
Voilà le  code xHTML

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"lang="fr">
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.     <title>Le site cool >> index </title>
  6. <link rel="stylesheet" media="screen" type="text/css" title="styles" href="./templates/style.css" />
  7.   </head>
  8.   <body>
  9.     <div id="conteneur">
  10.       <div id="header">
  11.        Le site cool
  12.       </div>
  13.       <div id="haut">
  14.         <ul id="menuhaut">
  15.           <li><a href="#">Accueil</a></li>
  16.           <li><a href="#">Biographie<a></li>
  17.           <li><a href="#">Discographie</a></li>
  18.    <li><a href="#">Paroles &amp; traductions</a></li>
  19.    <li><a href="#">Concerts</a></li>
  20.    <li><a href="#">Interviews</a></li>
  21.    <li><a href="#">Charts</a></li>
  22.    <li><a href="#">M&eacute;dias</a></li>
  23.    <li><a href="#">Galerie photo</a></li>
  24.    <li><a href="#">T&eacute;l&eacute;chargements</a></li>
  25.    <li><a href="#">Concours</a></li>
  26.         </ul>
  27.       </div>
  28.       <div id="gauche">
  29.         <p>
  30.         <h4>Menu</h4>
  31.         </p>
  32.          <ul id="menugauche">
  33.           <li><a href="http://www.lesitecool.net">Forum</a></li>
  34.           <li><a href="#">Blog</a></li>
  35.    <li><a href="#">Street team</a></li>
  36.     <li><a href="#">Livre d'or</a></li>
  37.           <li><a href="#">Liens</a></li>
  38.         </ul>
  39.       </div>
  40.       <div id="droite">
  41.         <p>
  42.           <h4>Met@</h4>
  43.         </p>
  44.          <ul id="menudroit">
  45.           <li><a href="#">S'inscrire</a></li>
  46.           <li><a href="#">Connexion</a></li>
  47.           <li><a href="#">Recommander ce site</a></li>
  48.    <li><a href="#">Mettre ce site en favori</a></li>
  49.    <li><a href="#">Newsletter</a></li>
  50.         </ul>
  51.       </div>
  52.       <div id="centre">
  53.         <p><h3>Bienvenue sur le site cool</h3></p>
  54.       </div>
  55.       <div id="pied">
  56.        &copy; 2006 <a href="http://www.lesitecool.net" title="Le site cool">Le site cool</a>,
  57.    toute reproduction est interdite.<br/>
  58.    <a href="credits.php" title="Qui sommes nous ?">Cr&eacute;dits</a> | <a href="plan.php" title="Organisation du site">Plan du site</a> | <a href="#" title="Syndication du site">Flux RSS</a>
  59.       </div>
  60.     </div>
  61.   </body>
  62. </html>


 
et la feuille de style :
 

Code :
  1. body {
  2. font-family:Verdana, Arial, Helvetica, sans-serif;
  3. font-size: 11px;
  4. margin: 0;
  5. padding: 0;
  6. }
  8. p {
  9. margin: 0 0 5px 0;
  10. }
  12. h4
  13. {
  14. margin : 0
  15. }
  17. #header {
  18. height: 200px;
  19. background-color: #FFFFFF;
  20. background-image : url("images/header.png" );
  21. }
  23. #haut {
  24. height: 22px;
  25. background-color:#FF5500;
  26. padding-left : 4px;
  27. padding-top : 5px;
  28. }
  30. #conteneur {
  31. position: absolute;
  32. width: 100%;
  33. background-color:#FFFFFF;
  34. padding-left : 4px;
  35. padding-right : 4px;
  36. border : 1px solid #FF5500;
  37. }
  39. #centre {
  40. background-color:#FFFFFF;
  41. margin-top: 2%;
  42. margin-left: 150px;
  43. margin-right: 150px;
  44. }
  45. #gauche {
  46. float:left;
  47. margin-top: 2%;
  48. width: 230px;
  49. padding-left : 4px;
  50. background-color:#FF5500;
  51. }
  52. #droite {
  53. float:right;
  54. margin-top: 2%;
  55. width: 230px;
  56. padding-left : 4px;
  57. background-color:#FF5500;
  58. }
  60. #pied {
  61. clear:both;
  62. height: 30px;
  63. background-color: #FF5500;
  64. text-align : center;
  65. }
  67. #pied a {
  68. color: #000000;
  69. text-decoration: none;
  70. }
  72. #pied a:hover {
  73. border-bottom : 1px dashed #000000;
  74. }
  76. #menuhaut {
  77. list-style-type: none;
  78. margin: 0;
  79. padding:0;
  80. }
  82. #menuhaut li {
  83. display: inline;
  84. }
  86. #menuhaut a {
  87. margin: 0 2px;
  88. color: #000000;
  89. text-decoration: none;
  90. }
  92. #menuhaut a:hover {
  93. border-bottom : 1px dashed #000000;
  94. }
  96. #menugauche {
  97. list-style-type: none;
  98. margin: 0;
  99. padding:4px;
  100. }
  102. #menugauche li {
  103. margin-bottom: 5px;
  104. }
  106. #menugauche a {
  107. margin: 0 2px;
  108. color: #000000;
  109. text-decoration: none;
  110. }
  112. #menugauche a:hover {
  113. border-bottom : 1px dashed #000000;
  114. }
  116. #menudroit {
  117. list-style-type: none;
  118. margin: 0;
  119. padding:0;
  120. }
  122. #menudroit li {
  123. margin-bottom: 5px;
  124. }
  126. #menudroit a {
  127. margin: 0 2px;
  128. color: #000000;
  129. text-decoration: none;
  130. }
  132. #menudroit a:hover {
  133. border-bottom : 1px dashed #000000;
  134. }


 
Merci d'avance ;)

Reply

Marsh Posté le 05-01-2007 à 14:31:48   

Reply

Marsh Posté le 05-01-2007 à 15:48:25    

salut,
petit conseil sers-toi de cette page : http://css.alsacreations.com/Model [...] age-en-CSS

Reply

Marsh Posté le 05-01-2007 à 18:51:25    

C'est bien ce quej'ai fait, mais j'ai un petit souci avec les blocs ;)

Reply

Marsh Posté le 05-01-2007 à 20:49:29    

Un petit coup de main s'il vous plait :(

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed