Après quelques recherches infructueuses, je m'en remet à vous.
J'ai construit mon site et je découvre que sous IE7 et FF3, le fond de ma page est décalé d'un seul petit pixel et ça se voit trop !
Que faire pour aligner tout le site de la même façon sur n'importe quel navigateur ?
CSS :
/*** CORPS DU SITE ***/
body {
margin: 0; /* Marges externes */
padding: 0; /* Marges internes */
background: #123A89 url(images/header.png) no-repeat top center; /* Fond de la page */
width: 100%; /* Largeur de la boite */
font-size: 13px; /* Taille de la police d'écriture */
color: #FFFFFF; /* Couleur du texte */
font-family: Verdana; /* Type de police d'écriture */
text-align: center; /* Alignement de la police d'écriture */
}
/*** HEADER ***/
#header {
height: 392px; /* Hauteur de la boite */
}
h1 {
color: #FFD700; /* Couleur du texte */
font-size: 16px; /* Taille de la police d'écriture */
font-weight: bold; /* Graisse de la police d'écriture */
padding-left: 20px; /* Marge interne gauche */
height: 20px; /* Hauteur de la boite */
background: url(images/h1.png) no-repeat; /* Fond de la page */
}
h2 {
color: #FFD700; /* Couleur du texte */
font-size: 14px; /* Taille de la police d'écriture */
font-weight: bold; /* Graisse de la police d'écriture */
padding-left: 30px; /* Marge interne gauche */
}
h3 {
color: #FFD700; /* Couleur du texte */
font-size: 12px; /* Taille de la police d'écriture */
padding-left: 40px; /* Marge interne gauche */
}
a img {
border: 0;
}
a {
color: #FFD700; /* Couleur du texte */
text-decoration: none; /* Décoration du texte */
}
a:hover {
font-weight: bold; /* Graisse de la police d'écriture */
}
/*** CONTENU ***/
#page {
width: 1020px; /* Largeur de la boîte */
margin: auto; /* Marges externes */
padding: 0; /* Marges internes */
background: url(images/fondpage.png) repeat-y center; /* Fond de la page */
}
#menu {
float: left; /* Flottement d'une boîte */
width: 200px; /* Largeur de la boîte */
margin: 10px; /* Marges externes */
margin-left: 20px; /* Marge externe gauche */
font-size: 11px; /* Taille de la police d'écriture */
text-align: left; /* Alignement de la police d'écriture */
padding: 10px; /* Marges internes */
border: 1px solid white; /* Epaisseur/Style/Couleur des bordures */
line-height: 200%; /* Interligne du bloc */
}
#contenu {
width: 707px; /* Largeur de la boîte */
margin: 0; /* Marges externes */
margin-left: 270px; /* Marge externe gauche */
text-align: justify; /* Alignement de la police d'écriture */
line-height: 140%; /* Interligne du bloc */
padding: 10px; /* Marges internes */
}
#contenu p {
padding: 5px; /* Marges internes */
}
/*** FOOTER ***/
#footer {
clear: both; /* Colle la boite sous toutes les autres */
width: 1000px; /* Largeur de la boîte */
height: 40px; /* Hauteur de la boîte */
margin: auto; /* Marges externes */
margin-bottom: 30px; /* Marge externe inférieure */
padding-top: 2px; /* Marge interne gauche */
padding-left: 22px; /* Marge interne gauche */
font-size: 10px; /* Taille de la police d'écriture */
background: #123A89 url(images/footer.png) no-repeat; /* Fond de la page */
color: #2656E8; /* Couleur du texte */
text-align: justify; /* Alignement de la police d'écriture */
}
#footer a {
color: #2656E8; /* Couleur du texte */
text-decoration: none; /* Décoration du texte */
}
HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<h1>Bienvenue sur Europa Park's Place, le Site !</h1>
<p class="soustitre">
Edito de Moi
</p>
<h2>Bienvenue sur Europa Park's Place, le Site !</h2>
<h3>Bienvenue sur Europa Park's Place, le Site !</h3>
<p>
Véritable portail d'Europa Park's Place, en un clin d'oeil, vous voyez en ce moment les dernières news de toutes nos annexes : Site, Forum, Blog, Spécial THN, Page Facebook, ...
</p>
Tu as un problème sous tous les navigateur IE8, IE7, Opera 10, Chrome3, FF3, Safari.
Pour Internet Explorer 7 utilise les commentaires conditionnels si besoin. Pour IE8 si ta page s'affiche bien dans Firefox par exemple tu ne devrais pas avoir de problème.
Essaye avec un width;1007px; à la place du 1020px dans le div page, ça semble fonctionner, à voir ce que ça donne sur les autres navigateurs. A voir au footer, car il sera décalé peut-être au niveau des margin ou du width qui je ne vois pas ce qu'il vient faire là ?!
J'ai testé avec tes modifications, le fond se cale bien sous le header avec IE7 et FF3, mais l'ombre à droite est coupée et c'est le footer qui se retrouve décalé... Je continue à chercher en tatonnant mais pour l'instant, rien de correct... une idée ?
Trouvez des réponses à vos questions sur la création de sites web, le référencement et les meilleures pratiques pour gérer un site. Échangez avec d'autres webmasters passionnés pour améliorer vos compétences en ligne et optimiser vos projets de site web.
29 oct. 2009 à 07:45
J'ai testé avec tes modifications, le fond se cale bien sous le header avec IE7 et FF3, mais l'ombre à droite est coupée et c'est le footer qui se retrouve décalé... Je continue à chercher en tatonnant mais pour l'instant, rien de correct... une idée ?
Bonne journée !
3 nov. 2009 à 11:17