28172 sujets

CSS et mise en forme, CSS3

Problèmes de placements et dimensions de <div>

Hello

Double problème ce soir.

D'une part je constate une différence entre IE et FF quand au rendu :


IE 6 :
http://chocobo.island.free.fr/pb2.jpg

FF 3 :
http://chocobo.island.free.fr/pb1.jpg

D'où peut venir cette différence ? Et aussi : pourquoi y a t'il une telle distance entre la fin du formulaire et le bas de la page (pourtant le fichier contenant le formulaire ne possède aucun style, et plus rien après le </fieldset>) ?

Voici le code les codes en question :

Index.htm :


   1. <HTML>
   2. <HEAD>
   3. <TITLE>Design</TITLE>
   4. <script type="text/javascript" src="js/scriptaculous.js"></script>
   5. <script type="text/javascript" src="js/prototype.js"></script>
   6. <LINK rel="stylesheet" type="text/css" href="style.css">
   7. </HEAD>
   8. <BODY>
   9. <div class="top"></div>
  10. <div class="page">
  11. <div class="logo"><img src="images/logo.png" /></div>
  12.
  13. <div class="menu">
  14. <img src="images/home.png" />Accueil<br />
  15. <a href="index.php?action=search"><img src="images/search.png" />Recherche<br /></a>
  16. <a href="index.php?action=add"><img src="images/add.png" />Ajouter une<br /> annonce<br /></a>
  17. <img src="images/plus.png" />Services <br />
  18. <img src="images/mail.png" />Contact <br />
  19. </div>
  20. <div class="conteneur">
  21. <?php
  22. switch($_GET['action'])
  23. {
  24. case add:
  25.  include_once('php/etape1.php');
  26.  break;
  27. case search:
  28.  include_once('php/search.php');
  29.  break;
  30. }
  31. ?>
  32. </div>
  33. </div><div class="bottom"></div>
  34. </BODY>
  35. </HTML>




Et le fichier CSS :

   1. body {
   2. background-image:url('images/fond.jpg');
   3. text-align: center;
   4. }
   5.
   6. .top
   7. {
   8. background-image:url('images/top.jpg');
   9. width:900px;
  10. height:27px;
  11. margin-left:auto;
  12. margin-right:auto;
  13. }
  14.
  15. .bottom
  16. {
  17. background-image:url('images/bottom.jpg');
  18. width:900px;
  19. height:41px;
  20. margin-left:auto;
  21. margin-right:auto;
  22. }
  23.
  24. .page {
  25. text-align:left;
  26. margin-left:auto;
  27. margin-right:auto;
  28. position: relative;
  29. width: 900px;
  30. background-image:url('images/bar.jpg');
  31. }
  32.
  33. .conteneur
  34. {
  35. position:relative;
  36. left:200px;
  37. top:-450px;
  38. width:650px;
  39. }
  40.
  41. .logo
  42. {
  43. position:relative;
  44. top:20px;
  45. left:45px;
  46. width:120px;
  47. height:120px;
  48. }
  49.
  50. .menu
  51. {
  52. position:relative;
  53. top:40px;
  54. left:40px;
  55. width:130px;
  56. height:500px;
  57. border-right:1px dotted black;
  58. border-left:1px dotted black;
  59. text-align:center;
  60. }
  61.
  62. .menu img
  63. {
  64. margin-top:10px;
  65. display:block;
  66. margin-left:auto;
  67. margin-right:auto;
  68. border:0px;
  69. }




Merci d'avance à ceux qui auront eu la patience Smiley cligne
Alors le doctype m'élimine le problème d'écart (j'avais trouvé une autre manière de le faire, avec un overflow:auto entre temps).

Par contre toujours le même souci : au lieu de bien s'adapter à la taille de son contenu, mon <div class="page"> se redimensionne de manière trop importante en longueur (en fait elle ajoute en bas de page une marge correspondant à la hauteur du contenu du bloc "conteneur").
Sujet clos
Aller à