Se connecter avec
S'enregistrer | Connectez-vous

Probleme en Html/Css Vraiment Etrange..

Dernière réponse : dans Programmation

Comme je le dis dans mon sujet ci dessus, j'ai un drole de problème, je crée mon second site, il y a l'entete, le menu situé à gauche, le corps de la page, et le pied de page, mais le texte qui devrait etre situé dans le corps de la page se trouve bizarrement au dessus des menus, ou en dessous, mais j'arrive pas à le mettre à droite des menus, ce qui est un handicape majeur!

Je vous passe le code Css si vous pouviez me dire ou ca cloche...:

  1. body
  2. {
  3. font-family: Times New Roman;
  4. margin-top: 20px;
  5. margin-bottom: 20px;
  6. background-color:black;
  7. color:white
  8.  
  9.  
  10. }
  11.  
  12. #titre
  13. {
  14. font-family: Impact; color: white;
  15. position: absolute;
  16. top: 1cm; right: 6cm
  17. }
  18.  
  19.  
  20. #titre H1
  21. {
  22. font-size: 300%; color: white;
  23. background: #008
  24.  
  25.  
  26. }
  27.  
  28. #titre P, #titre H1
  29. {
  30. margin: 0; text-align: right;
  31. }
  32.  
  33. #principal
  34. {
  35. position: absolute;
  36. top: 4cm; left: 1cm;
  37. width: 80%; padding: 0.5em;
  38. background: #eee;
  39. }
  40.  
  41. #en_tete
  42. {
  43. width: 760px;
  44. height: 100px;
  45. background-image: url("<a href="http://www.icone-gif.com/gif/sports/athletisme/athletisme011.gif" target="_blank">http://www.icone-gif.com/gif/sports/athletisme/athletis...</a>");
  46. background-repeat: no-repeat;
  47. margin-bottom: 10px;
  48. }
  49.  
  50. #menu
  51. {
  52. float: left; /* Le menu flottera à gauche */
  53. width: 150px; /* Très important : donner une taille au menu */
  54. }
  55.  
  56. .element_menu
  57. {
  58. background-color: #FBB117;
  59.  
  60. background-repeat: repeat-x;
  61.  
  62. border: 2px solid black;
  63.  
  64. margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
  65. }
  66.  
  67. .element_menu h3 /* Tous les titres de menus */
  68. {
  69. color: #254117;
  70. font-family: Times New Roman, "Arial Black", "Times New Roman", Times, serif;
  71. text-align: center;
  72. }
  73.  
  74. .element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
  75. {
  76. list-style-image: url("<a href="http://www.icone-gif.com/gif/sports/balle_tennis/balle_tennis001.gif" target="_blank">http://www.icone-gif.com/gif/sports/balle_tennis/balle_...</a>"); /* On change l'apparence des puces */
  77. padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
  78. padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
  79. margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
  80. margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
  81. }
  82.  
  83. .element_menu a /* Tous les liens se trouvant dans un menu */
  84. {
  85. color: #E42217;
  86. font-family: Alba Super, " Alba Super", " Times New Roman", Times, serif;
  87. }
  88.  
  89. .element_menu a:hover /* Quand on pointe sur un lien du menu */
  90. {
  91. background-color: #46C7C7;
  92. color: white;
  93. }
  94.  
  95. #corps
  96. {
  97. margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
  98. margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
  99. padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
  100.  
  101. color: white;
  102. background-color: white; /* Une couleur de fond pour le corps */
  103. background-image: url("images/motif.png");
  104. background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
  105.  
  106. border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
  107. text-align: right;
  108. }
  109.  
  110. #corps h1 /* Tous les titres h1 du corps */
  111. {
  112. color: white;
  113. text-align: center;
  114. font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
  115.  
  116. }
  117.  
  118. #corps h2 /* Tous les titres h2 du corps */
  119. {
  120. height: 30px;
  121.  
  122. background-image: url("images/titre.png"); /* Une petite image de fond sur les titres h2 */
  123. background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
  124.  
  125. padding-left: 30px;
  126. color: #B3B3B3;
  127. text-align: left;
  128. }
  129.  
  130. #pied_de_page
  131. {
  132. padding: 5px;
  133.  
  134. text-align: center;
  135.  
  136. color: #B3B3B3;
  137. background-color: #626262;
  138. background-image: url("images/motif.png");
  139. background-repeat: repeat-x;
  140.  
  141. border: 2px solid black;
  142. }



Merci d'avance!
Lassé par la pub ? Créez un compte
Lassé par la pub ? Créez un compte
Tom's guide dans le monde