DIV qui déborde

DIV qui déborde - HTML/CSS - Programmation

Marsh Posté le 18-10-2007 à 17:26:12    

Bonjour,
 
J'essaie de faire une mise en page potable, le tout en CSS  :D Ca en jette comme technique...le seul problème, c'est que je ne la maitrise pas :/
 
Petit problème :
 
http://pix.nofrag.com/7/e/c/967e8bb6bbeb023d2630d758b6bcftt.jpg
 
Ca ne se voit pas des masses sur la prise d'écran, mais plus j'ajoute de div dans le conteneur (délimité par la ligne noire), plus la hauteur du conteneur augmente  :ouch:  
 
Le code de la chose :
 

Code :
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Document sans nom</title>
  5. <style type="text/css">
  6. <!--
  7. .conteneur {
  8. width: 955px;
  9. margin-left: auto;
  10. margin-right: auto;
  11. border: 1px solid black;
  12. }
  13. .haut_milieu {
  14. background-image: url(images/essai_01.jpg);
  15. position: relative;
  16. height: 28px;
  17. width: 955px;
  18. }
  19. .haut_gauche {
  20. background-image: url(images/essai_02.jpg);
  21. position: relative;
  22. height: 142px;
  23. width: 271px;
  24. }
  25. .haut_titre {
  26. background-image: url(images/essai_03.jpg);
  27. position: relative;
  28. height: 142px;
  29. width: 421px;
  30. top: -142px;
  31. left: 271px;
  32. }
  33. .bord_droit {
  34. background-image: url(images/essai_04.jpg);
  35. position: relative;
  36. height: 572px;
  37. width: 263px;
  38. left: 692px;
  39. top: -284px;
  40. }
  41. -->
  42. </style>
  43. </head>
  45. <body>
  46. <div class="conteneur">
  47.   <div class="haut_milieu"></div>
  48.   <div class="haut_gauche"></div>
  49.   <div class="haut_titre"></div>
  50.   <div class="bord_droit"></div>
  51. </div>
  52. </body>
  53. </html>


 
Si quelqu'un a une idée, je suis preneur  :D

Reply

Marsh Posté le 18-10-2007 à 17:26:12   

Reply

Marsh Posté le 19-10-2007 à 07:08:51    

Petit up ? :whistle:

Reply

Marsh Posté le 19-10-2007 à 09:09:45    

n'a des positions relatives de partout la dedant ... lol  
 
comme pour tes collègues je te redirige vers ici si jamais tu ne connais pas
http://css.alsacreations.com/Model [...] age-en-CSS
 
tu trouvera pi etre ton bonheur :)

Reply

Marsh Posté le 19-10-2007 à 10:35:24    

Le fait de mettre l'attribut "position: relative" déplace ton <div> à un endroit donné. Cependant, il utilise toujours l'espace qu'il aurait pris à sa position "normale".
 
Si tu mets 4 divs les uns après les autres, comme dans ton exemple, même si tu les repositione, tu auras :

Code :
  1. hauteur conteneur = hauteur haut_milieu + hauteur haut_gauche + hauteur haut_titre + hauteur bord_droit


 
Si tu veux éviter ce problème, tu peux essayer de mettre ton conteneur en position relative (sans mettre aucun paramètre de top, left, bottom, right) et de mettre tes 4 <div> en position absolute, ce qui aura pour effet de les positionner de façon absolue par rapport au conteneur :)

Reply

Marsh Posté le 19-10-2007 à 16:57:58    

Super ! merci pour vos suggestions :) Problème résolu ! Merci astryad :D

Reply

Sujets relatifs:

Leave a Replay

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