HTML/CSS Float mal placé sur Firefox
Résolu
topace18
Messages postés
27
Statut
Membre
-
avion-f16 Messages postés 20367 Statut Contributeur -
avion-f16 Messages postés 20367 Statut Contributeur -
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
CSS
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;
}
A voir également:
- HTML/CSS Float mal placé sur Firefox
- Downloadhelper firefox - Télécharger - Outils pour navigateurs
- Editeur html - Télécharger - HTML
- Telecharger firefox - Télécharger - Navigateurs
- Exporter favoris firefox - Guide
- Simulation place accor hotel arena - Forum Loisirs / Divertissements
3 réponses
Lorsque les éléments sont en float, leur hauteur est ... comment dire ... ignorée.
Donc l'objet suivant (ici, le pied de page) se place en-dessous des autres éléments qui ne sont pas en float. Si tu n'avais qu'un élément en float, alors le pied de page se placera à la même hauteur que cet élément. Ici, le pied de page est un peu plus bas car il y a la colonne de droite.
Donc l'objet suivant (ici, le pied de page) se place en-dessous des autres éléments qui ne sont pas en float. Si tu n'avais qu'un élément en float, alors le pied de page se placera à la même hauteur que cet élément. Ici, le pied de page est un peu plus bas car il y a la colonne de droite.
