Tom's Guide > Forum > Programmation > Probleme en Html/Css Vraiment Etrange..

Probleme en Html/Css Vraiment Etrange..

Forum Programmation : Probleme en Html/Css Vraiment Etrange..

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
dryku   13-08-2006 à 04:38:01

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...:

Code :
  1. body
  2. {
  3. font-family: Times New Roman;
  4. margin-top: 20px;
  5. margin-bottom: 20px;
  6. background-color:black;
  7. color:white
  10. }
  12. #titre
  13. {
  14. font-family: Impact; color: white;
  15. position: absolute;
  16. top: 1cm; right: 6cm
  17. }
  20. #titre H1
  21. {
  22. font-size: 300%; color: white;
  23. background: #008
  26. }
  28. #titre P,  #titre H1
  29. {
  30. margin: 0; text-align: right;
  31. }
  33. #principal
  34. {
  35. position: absolute;
  36. top: 4cm; left: 1cm;
  37. width: 80%; padding: 0.5em;
  38. background: #eee;
  39. }
  41. #en_tete
  42. {
  43.   width: 760px;
  44.   height: 100px;
  45.   background-image: url("http://www.icone-gif.com/gif/sports/athletisme/athletisme011.gif" );
  46.   background-repeat: no-repeat;
  47.   margin-bottom: 10px;
  48. }
  50. #menu
  51. {
  52.   float: left; /* Le menu flottera à gauche */
  53.   width: 150px; /* Très important : donner une taille au menu */
  54. }
  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. }
  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. }
  74. .element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
  75. {
  76.   list-style-image: url("http://www.icone-gif.com/gif/sports/balle_tennis/balle_tennis001.gif" ); /* 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. }
  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. }
  89. .element_menu a:hover /* Quand on pointe sur un lien du menu */
  90. {
  91.   background-color:      #46C7C7;
  92.   color: white;
  93. }
  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. }
  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. }
  118. #corps h2 /* Tous les titres h2 du corps */
  119. {
  120.   height: 30px;
  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. }
  130. #pied_de_page
  131. {
  132.   padding: 5px;
  134.   text-align: center;
  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!

Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
RiiMii   13-08-2006 à 04:57:44
- 0 +

Il manque la propriété float à ton corps . Cependant tu auras un autre problème à cause de l'utilisation dans la gestion des flux, ton footer ne se positionnera pas à la bonne place .

Répondre à RiiMii
dryku   13-08-2006 à 05:08:15
- 0 +

Tu ne peux pas me donner le code?? ca serait sympa

Répondre à dryku
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > Probleme en Html/Css Vraiment Etrange..
Aller à :

Il y a 2827 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,293 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens