Se connecter / S'enregistrer
Votre question

Centrer un div dans un div .... [Résolu]

Tags :
  • Arrière plan
  • Programmation
Dernière réponse : dans Programmation
23 Mars 2009 19:27:34

Bonjour,

J'ai recherché une réponse à mon problème pendant un moment sans trouver la réponse :( 
Voilà je cherche un centrer un div dans un div (Illustration)

Voici le code de la page !
  1. <div id="contenu">
  2. Bla Bla Bla !!!
  3. </div>
  4.  
  5. <div id="menu">
  6. <ul id="menuDeroulant">
  7. <li>
  8. <a href="#">Les castors</a>
  9. <ul class="sousMenu">
  10. <li><a href="#">Pelage doux mais robuste qu'on aime bien beaucoup</a></li>
  11. <li><a href="#">Ils confectionnent des barrages !</a></li>
  12. <li><a href="#">Ils ont des grandes dents</a></li>
  13. </ul>
  14. </li>
  15. <li>
  16. <a href="#">Partie 2</a>
  17. <ul class="sousMenu">
  18. <li><a href="#">whisky</a></li>
  19. <li><a href="#">vodka</a></li>
  20. <li><a href="#">gin</a></li>
  21. <li><a href="#">vin</a></li>
  22. <li><a href="#">champagne</a></li>
  23. </ul>
  24. </li>
  25. </div>


Et le CSS qui va avec :
  1. body {
  2. font: 11px verdana, sans-serif;
  3. background: #AFA99B;
  4. padding: 0;
  5. }
  6.  
  7. #contenu {
  8. top: 0;
  9. background-color: #00ffff;
  10. width: 750px;
  11. border-left: solid 5px #F00;
  12. border-right: solid 5px #F00;
  13. margin-left: auto;
  14. margin-right: auto;
  15. }
  16.  
  17. #menu {
  18. position: fixed;
  19. z-index: 99;
  20. top: 0;
  21. left: 0;
  22. width: 100%;
  23. height: 21px;
  24. text-align: center;
  25. font: 11px verdana, sans-serif;
  26. background: transparent url(fondTR.png) repeat;
  27. }
  28.  
  29. /* Elements de premier niveau
  30. --------------------------------------*/
  31. #menuDeroulant
  32. {
  33. width: 750px;
  34. height: 21px;
  35. list-style-type: none;
  36. margin: auto;
  37. padding: 0;
  38. border: 0;
  39. position: absolute;
  40. top: 0;
  41. text-align: center;
  42. }
  43.  
  44. #menuDeroulant li
  45. {
  46. float: left;
  47. width: 150px;
  48. margin: 0;
  49. padding: 0;
  50. border: 0;
  51. }
  52. #menuDeroulant li a:link, #menuDeroulant li a:visited
  53. {
  54. display: block;
  55. height: 1%;
  56. color: #FFF;
  57. background: #3B4E77;
  58. margin: 0;
  59. padding: 4px 8px;
  60. border-right: 1px solid #fff;
  61. text-decoration: none;
  62. }
  63. #menuDeroulant li a:hover { background-color: #ff0000; }
  64. #menuDeroulant li a:active { background-color: #5F879D; }
  65.  
  66. #menuDeroulant .sousMenu
  67. {
  68. display: none;
  69. list-style-type: none;
  70. margin: 0;
  71. padding: 0;
  72. border: 0;
  73. }
  74. #menuDeroulant .sousMenu li
  75. {
  76. float: none;
  77. margin: 0;
  78. padding: 0;
  79. border: 0;
  80. width: 149px;
  81. border-top: 1px solid transparent;
  82. border-right: 1px solid transparent;
  83. }
  84. #menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
  85. {
  86. display: block;
  87. color: #FFF;
  88. margin: 0;
  89. border: 0;
  90. text-decoration: none;
  91. background: transparent url(fondTR.png) repeat;
  92. }
  93. #menuDeroulant .sousMenu li a:hover
  94. {
  95. background-image: none;
  96. background-color: #ff0000;
  97. }
  98.  
  99. #menuDeroulant li:hover > .sousMenu { display: block; }


Mon problème, c'est que je n'arrive pas à centrer le menu déroulant :/ 
Une aide serait la bienvenue !

Merci d'avance !!
Bye !

Autres pages sur : centrer div div resolu

23 Mars 2009 19:48:05

margin: auto
suffit pour centrer
23 Mars 2009 20:47:45

J'ai essayer, sa ne marche pas :s

D'ailleurs il y est déjà ...
Contenus similaires
23 Mars 2009 23:23:59

  1. #menuDeroulant
  2. {
  3. width: 750px;
  4. height: 21px;
  5. list-style-type: none;
  6. margin: auto;
  7. border: 0;
  8. top: 0;
  9. text-align: center;
  10. font: 12px verdana, sans-serif;
24 Mars 2009 19:12:50

  1. #menuDeroulant
  2. {
  3. width: 750px;
  4. height: 21px;
  5. list-style-type: none;
  6. margin: auto;
  7. padding: 0;
  8. border: 0;
  9. position: absolute;
  10. top: 0;
  11. text-align: center;
  12. margin: auto auto auto 152px;
  13. }


Essaie avec ça.
24 Mars 2009 22:13:04

Mreci de regarder mon problème ! =)

Mais ta solution ne fonctionne pas (enfin presque) => il y a toujours un décalage selon la taille de la fenêtre ...
25 Mars 2009 00:38:12

  1. #menuDeroulant
  2. {
  3. width: 750px;
  4. height: 21px;
  5. list-style-type: none;
  6. margin: auto;
  7. padding: 0;
  8. border: 0;
  9. position: absolute;
  10. top: 0;
  11. text-align: center;
  12. margin: auto auto auto 194px;
  13. }


C'est mieux?
25 Mars 2009 13:42:31

J'ai finalement réussit ç solutionner mon problème !
En enlevant
  1. position: absolute;

Pour que les cadres bougent avec la fenêtre !

Et en ajoutant :
  1. margin: auto auto auto auto;

Car
  1. margin: auto;

Seul ne fonctionne pas !

Merci d'avoir prit de votre temps pour vous pencher sur mon problème car vous m'avez mit sur la bonne piste ;) 
Byye !
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS