Bonjour à tous,
Sur la page web dont voici le code ci-dessous, mon pied de page (bloc <div id="pied">) n'apparaît pas correctement sur Firefox alors que (et c'est le comble), il apparaît comme je veux sous IE7 :
FF : http://www.hpics.li/ce801
IE : http://www.hpics.li/33916
J'ai essayé de mettre le float du bloc pied à left mais voilà le résultat :
http://www.hpics.li/eba51
Merci d'avance si vous pouvez m'aider !
Cdlt
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Page de test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- CORPS DU SITE -->
<div id="corps">
<!-- LOGO DU SITE -->
<div id="logo">
<a href="#"><img src="titre_img.jpg" alt="Logo du site" /></a>
</div>
<!-- CONTENU DU SITE -->
<div id="contenu">
<div class="article-titre">Titre de l'article</div>
<div class="article-soustitre">Sous-titre de l'article</div>
<div class="article-info">Posté par xxx le 11 juillet 2010 @ 11:26</div>
<div class="article-contenu">
<!-- RAJOUTER PLEIN DE TEXTE POUR RENDRE LE CONTENU PLUS LONG QUE LA COLONNE DE MENU -->
</div>
</div>
<!-- MENU DU SITE -->
<div id="menu">
<div class="menu-titre">Articles</div>
<div class="menu-contenu">
<!--Aller à la page :
<form>
<select name="allerpage">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="submit" value="Go!">
</form>-->
<a href="#">Retour à l'accueil<br/></a>
Pages : <a href="#"><<--</a> <a href="#"><--</a> [12] <a href="#">--></a> <a href="#">-->></a><br/>
<a href="#">Liste complète des articles</a><br/>
</div>
<div class="menu-titre">Rechercher</div>
<div class="menu-contenu">
<form>
<input type="text" name="recherche" />
<input type="submit" value="Go!">
</form>
</div>
<div class="menu-titre">Tags</div>
<div class="menu-contenu">
<a href="#">Tag1</a>
<a href="#">Tag2</a>
<a href="#">Tag3</a>
<a href="#">Tag4</a>
<a href="#">Tag5</a>
<a href="#">Tag6</a>
<a href="#">Tag7</a>
<a href="#">Tag8</a>
</div>
<div class="menu-titre">Derniers articles</div>
<div class="menu-contenu">
<a href="#">Article 1</a><br/>
<div class="menu-info-com">Posté par xxx le 14/07/2010 @ 09:41</div>
<a href="#">Article 2</a><br/>
<div class="menu-info-com">Posté par xxx le 12/07/2010 @ 22:01</div>
</div>
<div class="menu-titre">Derniers commentaires</div>
<div class="menu-contenu">
<a href="#">Commentaire 1</a><br/>
<div class="menu-info-com">Posté par xxx le 15/07/2010 @ 11:07</div>
<a href="#">Commentaire 2</a><br/>
<div class="menu-info-com">Posté par xxx le 15/07/2010 @ 09:46</div>
</div>
<div class="menu-titre">Liens</div>
<div class="menu-contenu">
<a href="#">Google</a><br/>
<a href="#">Yahoo</a><br/>
</div>
<div class="menu-titre">Nous contacter</div>
<div class="menu-contenu">
<a href="#">Nous contacter</a><br/>
</div>
<div class="menu-titre">Flux RSS</div>
<div class="menu-contenu">
<a href="#"><img src="pics/rss.gif" alt="S'abonner au flux RSS" /></a> <a href="#">S'abonner</a><br/>
</div>
</div>
<!-- PIED DE PAGE DU SITE-->
<div id="pied">
<p>
<a href="#">Revenir en haut de la page</a> | <a href="#">Derniers articles</a> | <a href="#">Nous contacter</a> | <a href="#">CGU</a> | <a href="#">RSS</a>
</p>
<p>
Lol © 2010 | Site réalisé par xxx | version 1.0 | <a href="#"><img src="pics/connec_off.gif" alt="Non connecté" /></a>
</p>
<p>
<b>Articles :</b> Pages : <a href="#"><< Première</a> - <a href="#">< Précédente</a> - [12] - <a href="#">Suivante ></a> - <a href="#">Dernière >></a>
</p>
<p>
<b>Tags :</b>
<a href="#">Tag1</a>
<a href="#">Tag2</a>
<a href="#">Tag3</a>
<a href="#">Tag4</a>
<a href="#">Tag5</a>
<a href="#">Tag6</a>
<a href="#">Tag7</a>
<a href="#">Tag8</a>
<a href="#">Tag9</a>
</p>
<p>
<b>Liens :</b>
<a href="#">Google</a>
<a href="#">Yahoo</a>
</p>
</div>
</div>
</body>
</html>
CSS
/* -----------------
NATIFS
------------------*/
/* Liens */
a{
color: #336633;
text-decoration: none;
}
/* Liens survolés */
a:hover{
text-decoration: underline;
}
/* Page */
body{
background-color: #333333;
font-family: Verdana;
font-size : 12px;
line-height: 1.5; /* Interligne */
margin: 0px; /* Permet de "coller" aux bords de la page */
}
/* Formulaires */
form{
margin-top: 0px; /* Espacement avant le paragraphe */
margin-bottom: 0px; /* Espacement après le paragraphe */
}
/* Images */
img {
border: none; /* Permet d'éviter l'encadré violet autour d'une image servant de lien */
}
/* -----------------
CONTENEURS
------------------*/
/* Contenu du site : Articles, ... */
#contenu{
background-color: #FFFFFF;
float: left; /* Position du conteneur dans le conteneur parent */
padding: 10px; /* Espacement du texte par rapport au bord */
width: 550px; /* Largeur du conteneur */
}
/* Corps du site : Conteneur des autres éléments */
#corps{
background-color: #DDFFDD;
padding-bottom: 0px;
margin-left: auto; /* Permet le centrage du conteneur "corps" sur la page */
margin-right: auto; /* Permet le centrage du conteneur "corps" sur la page */
text-align: left;
width: 800px;
}
/* Logo du site */
#logo{
background-color: #336633;
/*background-image: url(titre_fond.jpg);*/
float: top;
height: 130px;
}
/* Menu latéral du site */
#menu{
background-color: #DDFFDD;
float: right;
font-size: 11px;
padding: 0px;
width: 230px;
}
/* Pied de page du site */
#pied{
color: #FFFFFF;
background-color: #336633;
float: bottom;
font-size: 10px;
line-height: 1;
padding: 10px;
text-align: center;
width: 780px;
}
/* Liens dans le pied de page */
#pied a{
color: #FFFFFF;
}
/* -----------------
STYLES
------------------*/
/* Texte d'un article */
.article-contenu{
text-align: justify; /* Alignement du texte */
}
/* Infos des articles (posté le ... par ...)*/
.article-info{
background-color: #DDFFDD;
font-size: 10px;
font-style: italic;
margin-bottom: 5px;
padding: 2px;
}
/* Sous-titres des articles */
.article-soustitre{
font-size: 16px;
margin-bottom: 5px; /* Espacement après le paragraphe */
}
/* Titres des articles */
.article-titre{
color: #336633;
font-size: 28px;
font-style: bold;
}
/* Contenu du menu : Liens, ... */
.menu-contenu{
float: left;
line-height: 2;
padding: 5px;
width: 220px;
}
/* Infos à propos des derniers commentaires */
.menu-info-com{
font-size: 10px;
line-height: 1;
}
/* Titre dans le menu */
.menu-titre{
background-color: #BBFFBB;
float: left;
letter-spacing: 5px;
padding: 5px;
width: 220px;
}
Afficher la suite