HTML/CSS Float mal placé sur Firefox [Résolu/Fermé]

Signaler
Messages postés
25
Date d'inscription
dimanche 1 juin 2008
Statut
Membre
Dernière intervention
3 janvier 2011
 -
Messages postés
18539
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
13 avril 2021
 -
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 &copy 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;
	}



3 réponses

Réponse 1 / 3
Messages postés
18539
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
13 avril 2021
 4 281
Salut.

Ajoute « <div style="clear:both;"></div> » avant le commentaire
<!-- PIED DE PAGE DU SITE-->
1
Merci
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Réponse 2 / 3
Messages postés
18539
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
13 avril 2021
 4 281
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.
1
Merci
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Réponse 3 / 3
Messages postés
25
Date d'inscription
dimanche 1 juin 2008
Statut
Membre
Dernière intervention
3 janvier 2011
Excellent ça marche !
Merci infiniment !

Par contre pour ma culture perso, pourquoi ça marche ? xD
Posez votre question