Se connecter avec
S'enregistrer | Connectez-vous

Probleme positionnement pied de page

Dernière réponse : dans Programmation

Bonjour voila je suis en train de crée un site , seulement j'ai un problème ...

Sous google Chrome mon pied de page ce met exactement come je le veut alors que sous IE il ne se place légèrement au dessus et donc il passe un peu sur le " corps " ainsi que mon menu gauche du site.

Je ne trouve pas le probleme sur mon CSS... je vous laisse le Css si sa peut vous aidez a trouver. La partie ou doit se trouver le probleme est celle en gras italique

Merci a tous !


body
{
width: 965px;
margin: auto; /* Pour centrer notre page */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-attachment: fixed ;
background-repeat: no-repeat;
background:black; /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p  */
margin-top: 2px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */



}

#en_tete
{
width: 965px;
height: 125px;
font-family:D efused;
font-size:47px;
color:red;
background-repeat: no-repeat;
margin-left:10px;
background-image: url("bannie.png");

}


#menu a:hover
{
color: Blue;
background: yellow;
}



#menu

dl, dt, dd, ul, li {
margin:auto;
margin-top:1px;
padding: 0;
list-style-type: none;
-moz-border-radius:10px;


}
#menu {

width: 965px;
background-position:center;
margin-left:10px;
left: 20px;
z-index:100;
width: 100%;
margin-bottom:110px;





}
#menu dl {
float: left;
margin: 0 1px;
}
#menu dt {
font-family:D efused;
cursor: pointer;
text-align: center;
font-weight: bold;
background:black;
color:red;
border: 1px solid gray;
width: 156px;


}

#menu li {
text-align: center;
background: white;
}
#menu li a , #menu dt a {

color: red;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}



#menu li a:hover, #menu dt a:hover {
background: White;
-moz-border-radius:10px;
}


#menu_gauche {
position:absolute;
margin-left: 10px;
margin-top:40px;
margin-bottom: 20px;
width:207px;
height:310px;
border:thin solid White;
text-align: center;
color:White;
}


#corps
{
position:absolute;
width:550px;
height:300px;
margin-left: 220px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-right:10px;
margin-top:40px;
margin-bottom:40px;
border:thin solid White;
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
text-align: center;
color: White;
font-weight: bold;
background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
font-family:Arial;
font-size: 12px;

}
a
#corps h1 /* Tous les titres h1 du corps */
{
color: Lime;
text-align: center;
font-family: defused;
}

#corps h2 /* Tous les titres h3 du corps */
{
height: 30px;


background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */

padding-left: 30px;
color: Red;
text-align: left;
font-family:"Arial";
}




a
{
text-decoration: none;
color: blue;


}


input, textarea
.
{

font-family:"burton's nightmare", serif; /* On modifie la police du texte tapé l'intérieur des champs */
color:white;

}



input:focus, textarea:focus /* Quand le curseur est sur un champ (ne marche pas sur IE) */

{

background-color: white;

}



label

{

color: Black;
font-family: "burton's nightmare";
font-size:14px;

}



legend /* On met un peu plus en valeur les titres des fieldset */

{

font-family: Arial, "Arial Black", Georgia, "Times New Roman", Times, serif;

color: blue;

font-weight: bold;


}



fieldset

{

margin-bottom: 15px; /* Une marge pour séparer les fieldset */
font-size:16px;



}

table
{

width: 600px;
}



#pied_de_page
{
margin-left:10px;
margin-top:430px;
border:thin solid White;
padding: 5px;
font-family:beyond wonderland,"comic sans ms";
text-align: center;
font-size: 20px;
color: red;
background-repeat: repeat-x;
}


Lassé par la pub ? Créez un compte
Expert Programmation

Salut,

Tu peux me donné ton code html et le lien de ton site pour avoir un aperçu.

Déjà ce qui est bizarre c'est ceci :

  1. #pied_de_page
  2. {
  3. margin-top:430px;
  4. margin-left:10px;
  5. }


Si ton image est parfaitement coordonnée tu n'as pas besoin d'autant de marge en haut voir aucune!
De même pour la marge à gauche, si tu change de résolution d'écran et bien ton pied de page ne sera pas aligné correctement, dans ce cas là il faut le centrer tous simplement!

  1. #pied_de_page
  2. {
  3. margin:auto;
  4. }


Et de même pour le reste : bannière,...
======
Autre remarque :

  1. font-family: "burton's nightmare";


Personne ne verra cette écriture sur ton site si il ne l'a pas installé, donc met de préférence :

  1. font-family: "Trebuchet ms", sans-serif; /* n'oublie pas de mettre le serif de fin!*/


Lien : Tuto police d'écriture

======
ps: utilise la balise BB code :
  1.  
pour une meilleur compréhension de tes lignes de programmation.
Lassé par la pub ? Créez un compte
Tom's guide dans le monde