HTML/CSS Float mal placé sur Firefox
Résolu
topace18
Messages postés
25
Date d'inscription
dimanche 1 juin 2008
Statut
Membre
Dernière intervention
3 janvier 2011
-
20 juil. 2010 à 20:51
avion-f16 Messages postés 19256 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 septembre 2025 -
avion-f16 Messages postés 19256 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 septembre 2025 -
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
- Video downloadhelper firefox - Télécharger - Outils pour navigateurs
- Telecharger firefox - Télécharger - Navigateurs
- Editeur html - Télécharger - HTML
- Exporter favoris firefox - Guide
- Simulation place accor hotel arena - Forum Loisirs / Divertissements
3 réponses
avion-f16
Messages postés
19256
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
21 septembre 2025
4 507
20 juil. 2010 à 22:14
20 juil. 2010 à 22:14
Salut.
Ajoute « <div style="clear:both;"></div> » avant le commentaire
Ajoute « <div style="clear:both;"></div> » avant le commentaire
<!-- PIED DE PAGE DU SITE-->
avion-f16
Messages postés
19256
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
21 septembre 2025
4 507
20 juil. 2010 à 22:46
20 juil. 2010 à 22:46
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.
topace18
Messages postés
25
Date d'inscription
dimanche 1 juin 2008
Statut
Membre
Dernière intervention
3 janvier 2011
20 juil. 2010 à 22:19
20 juil. 2010 à 22:19
Excellent ça marche !
Merci infiniment !
Par contre pour ma culture perso, pourquoi ça marche ? xD
Merci infiniment !
Par contre pour ma culture perso, pourquoi ça marche ? xD