[Résolu]Div position absolute

Div position absolute [Résolu] - HTML/CSS - Programmation

Marsh Posté le 28-06-2006 à 10:28:23    

Bonjour à tous,
 
voilà en quelques mots la description du problème que je rencontre. J'ai créé plusieurs div pour fractionner ma page.
Voici le schéma graphique:
http://img164.imageshack.us/img164/2701/schema3gy.jpg
 
Alors, tout se passe très très bien sous FF mais sous IE, mon menu 2 est décaller vers le bas...  :(  
 
mon code .css:  

Code :
  1. html
  2. {
  3. overflow: hidden;
  4. }
  6. body
  7. {
  8. font-family:Verdana, Arial, Helvetica, sans-serif;
  9. margin-top: 20px;
  10. margin-bottom: 20px;
  11. margin-left: 10px;
  12. margin-right: 10px;
  13. padding: 0px;
  14. }
  16. #conteneur
  17. {
  18. position: absolute;
  19. width:750px;
  20. left: 50%;
  21. margin-left: -375px;
  22. background-color:white;
  23. color: black;
  24. }
  26. #en_tete
  27. {
  28. width: 750px;
  29. height: 68px;
  30. background-image: url('../Images/Bannieres/BanniereHaut.jpg');
  31. background-repeat: no-repeat;
  32. margin: auto;
  33. }
  35. /* Le premier menu (à gauche)  */
  37. #premier_menu
  38. {
  39. position: absolute;
  40. width: 135px;
  42. margin-top: 10px;
  43. margin-bottom: 10px;
  44. margin-right: 0px;
  45. margin-left: 0px;
  47. left: 0;
  48. }
  50. #deuxieme_menu
  51. {
  52. position: absolute;
  53. width: 135px;
  55. margin-top: 10px;
  56. margin-bottom: 10px;
  57. margin-left: 0px;
  58. margin-right: 0px;
  60. right: 0;
  61. }
  63. #corps
  64. {
  65. margin-left: 135px;
  66. margin-right:135px;
  68. font-family: Verdana, Arial, "Arial Black", "Times New Roman", Times, serif;
  69. font-size: 12px;
  70. }
  72. #CorpsGauche
  73. {
  74. float: left;
  75. width: 210px;
  77. margin-top: 20px;
  78. margin-bottom: 20px;
  79. margin-right: 10px;
  80. margin-left: 10px;
  82. text-align: justify;
  83. }
  85. #CorpsDroite
  86. {
  87. float: right;
  88. width: 210px;
  90. margin-top: 20px;
  91. margin-bottom: 20px;
  92. margin-right: 10px;
  93. margin-left: 0px;
  95. padding-top: 0px;
  96. padding-bottom: 0px;
  97. padding-left: 15px;
  98. padding-right: 0px;
  100. border-left: 2px ridge silver;
  102. text-align: right;
  103. }
  105. .element_menu
  106. {
  107. background-color: #7399C8;
  108. color: white;
  110. height:420px;
  112. margin-top:0px;
  113. margin-bottom: 0px;
  114. margin-left: 0px;
  115. margin-right: 0px;
  117. padding: 0px;
  118. }


 
et mon code .html:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.    <head>
  4.        <title>LOGEM SOFTWARE ENGINEERING SA - Logiciels de planification des ressources humaines</title>
  5.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.    <link rel="stylesheet" media="screen" type="text/css" title="Logem Software Engineering SA" href="CSS/MiseEnPage.css" />
  7.    </head>
  8.    <body>
  9.    <div id="conteneur">
  10.  <!-- L'en-tête -->
  11.  <div id="en_tete">
  12.  </div>
  14.  <!-- Premier menu -->
  15.  <div id="premier_menu">
  16.   <div class="element_menu">
  17.   </div>
  18.  </div>
  20.  <!-- Le corps -->
  21.  <div id="corps">
  22.   <div id="CorpsGauche">
  23.   </div>
  24.   <div id="CorpsDroite">
  25.   </div>
  26.  </div>
  28.  <!-- Deuxième menu -->
  29.  <div id="deuxieme_menu">
  30.   <div class="element_menu">
  31.   </div>
  32.  </div>
  33. </div>
  34.    </body>
  35. </html>


 
Est-ce que quelqu'un voit pourquoi ça me fait ça?  
(je débute en css... donc, dites-moi tout ce que vous remarquer qui ne convient pas. Merci  :) )


Message édité par fgiuliano le 28-06-2006 à 11:44:39
Reply

Marsh Posté le 28-06-2006 à 10:28:23   

Reply

Marsh Posté le 28-06-2006 à 10:35:10    

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


 
Passe plutot à la norme 1.0 , la 1.1, n'étant pas exactement fait pour ce que tu veux...
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


 

Reply

Marsh Posté le 28-06-2006 à 10:43:48    

Ok, alors ça, c'est fait!  :)  
 
Mais bon petit problème persiste...  :(

Reply

Marsh Posté le 28-06-2006 à 11:25:23    

Pour le schéma que tu a donné personnellement je ne ferais pas ca en absolute mais plutot en float.

Message cité 1 fois
Reply

Marsh Posté le 28-06-2006 à 11:31:46    

Cheinz a écrit :

Pour le schéma que tu a donné personnellement je ne ferais pas ca en absolute mais plutot en float.


 
En fait, c'est en float que j'avais commencé mais je n'y arrive pas non plus...  :(
 
J'ai retesté avec les float et maintenant, j'ai mon deuxième menu qui se met à droite de mon corps gauche...


Message édité par fgiuliano le 28-06-2006 à 11:36:58
Reply

Marsh Posté le 28-06-2006 à 11:44:22    

Alors c'est tout bon...
 
En fait, il fallait mettre les deux menus en haut et à la suite...
 
Voici les modifications dans mon .css:

Code :
  1. #premier_menu
  2. {
  3. float: left;
  4. width: 135px;
  6. margin-top: 10px;
  7. margin-bottom: 10px;
  8. margin-right: 0px;
  9. margin-left: 0px;
  10. }
  11. #deuxieme_menu
  12. {
  13. float: right;
  14. width: 135px;
  16. margin-top: 10px;
  17. margin-bottom: 10px;
  18. margin-left: 0px;
  19. margin-right: 0px;
  20. }


 
et dans mon .html:

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" >
  3.    <head>
  4.        <title>LOGEM SOFTWARE ENGINEERING SA - Logiciels de planification des ressources humaines</title>
  5.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.    <link rel="stylesheet" media="screen" type="text/css" title="Logem Software Engineering SA" href="CSS/MiseEnPage.css" />
  7.    <link rel="stylesheet" media="screen" type="text/css" title="Logem Software Engineering SA - Menu" href="CSS/Menu.css" />
  8.    </head>
  9.    <body>
  10.    <div id="conteneur">
  11.  <!-- L'en-tête -->
  12.  <div id="en_tete">
  13.  </div>
  15.  <!-- Premier menu -->
  16.  <div id="premier_menu">
  17.   <div class="element_menu">
  18.   </div>
  19.  </div>
  21.  <!-- Deuxième menu -->
  22.  <div id="deuxieme_menu">
  23.   <div class="element_menu">
  24.   </div>
  25.  </div>
  27.  <!-- Le corps -->
  28.  <div id="corps">
  29.   <div id="CorpsGauche">
  30.   </div>
  31.   <div id="CorpsDroite">
  32.   </div>
  33.  </div>
  34. </div>
  35.    </body>
  36. </html>


 
Merci pour votre aide  :hello:

Reply

Marsh Posté le 28-06-2006 à 11:54:20    

C'est cool les gens qui trouvent tout seul la réponse a leur question ^^

Reply

Sujets relatifs:

Leave a Replay

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