Votre question

Probleme positionnement pied de page

Tags :
  • Arrière plan
  • Programmation
Dernière réponse : dans Programmation
5 Janvier 2010 00:43:41

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;
}


Autres pages sur : probleme positionnement pied page

5 Janvier 2010 12:54:05

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.
m
0
l
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