28173 sujets

CSS et mise en forme, CSS3

Pied de Page - Différence IE FF

Bonsoir,
Mon pied de page me pose quelques soucis.
Sous Firefox, aucun problème à constater (comme d'habitude)

Sous IE, mon pied de page est effectivement collé en bas quand le contenu total de la page dépasse (quand il faut utiliser la barre de scroll).
Dans le cas contraire, le footer s'affiche à la suite, et n'est donc pas collé en bas de la page.
J'ai testé les solutions données dans la FAQ d'Alsa et sur le site Pompage, mais sans grand résultat

Voici mon fichier php et css (voir a #footer) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Discographie - All For Music</title>
<meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1"/>
<link title="style" type="text/css" rel="stylesheet" href="style.css"/>
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<body>

<div id="menu">
<?php
  include("menu/liste.htm");
?>
</div>

<div id="scroll">
<div id="lettre">Discographie</div>
<div id="lettre">
<?php
include 'menu/artiste/listelettre1.php';
?> 
</div>
<div>
<?php
include 'lienartiste1.php';
?> 
</div>
</div>

<div id="footer">
<?php
  include("menu/footer.php");
?>
</div>
</body>
</html>




body {
	background-color : #ee982d;
	background-repeat : repeat-x;
	background-image: url(look/fade.png);
	margin-top : 0;
	margin-left : 0;
	margin-right : 0;
	margin-bottom : 0;
      }

a:link {
	font-family : Verdana;
	font-size : 10pt;
	color : #FFFFFF;
	text-decoration : none;
      }

a:active {
	font-family : Verdana;
	font-size : 10pt;
	color : #FFFFFF;
	text-decoration : none;
      }

a:visited {
	font-family : Verdana;
	font-size : 10pt;
	color : #FFFFFF;
	text-decoration : none;
      }

a:hover {
	font-family : Verdana;
	font-size : 10pt;
	color : #3e57d7;
	text-decoration : none;
      }

#menu {
	width : 100%;
	height : 20%;
	overflow : auto;
}

#scroll {
	font-family : Verdana;
	font-size : 10pt;
	color : #FFFFFF;
	text-align : center;
	width : 100%;
	padding-bottom : 15px;
}

#footer {
	position : fixed;
	bottom : 0px;
	width : 100%;
	text-align : center;
	background-color : #F5DD47;
}

#footer a:link, #footer a:visited, #footer a:active {
	font-family : Verdana;
	font-size : 10pt;
	color : #1833BD;
	text-decoration : none;
      }

#footer a:hover {
	text-decoration : underline overline;
      }

#liste {
	text-align : center;
}

#liste li {
	display : inline;
}

#liste ul {
	margin-left : 0;
	padding-left : 0;
	margin-top : 0;
	padding-top : 0;
}

#liste a:link, #liste a:visited {
	background : #F5DD47;
	padding : 10px 10px 10px 10px;
	text-decoration : none;
	color : #1833BD;
	font : bold 0.8em Arial, Helvetica, sans-serif;
}

#liste a:hover {
	color : #fff;
	background : #d0630a;
}

#variables {
	color : #3e57d7;
	font-weight : bold;
}

#soustitre {
	color : #ffffff;
	font-weight : bold;
	font-family : Verdana;
	font-size : 8pt;
	margin-top : 0;
	padding-top : 0;
}

#lettre {
	font-weight : bold;
}


Le lien pour visualiser ceci est dans ma signature.
Merci d'avance.
Modifié par Bellami (12 Nov 2006 - 19:37)
Modérateur
bonsoir,
tu peut jeter un oeil au css de ces exemple , variantes.
http://gcyrillus.free.fr/trucs_css/pied_en_bas.html
http://gcyrillus.free.fr/trucs_css/pied-en-bas-V2.html
http://gcyrillus.free.fr/trucs_css/placer-un-element-au-bas-de-son-conteneur-et-pas-le-bas-de-la-page-.html

le 3eme exemple est celui a préféré.

++

<edit> , heu non , justement ce que tu veut c'est ce que les autres en generale n'arrive pas a eviter Smiley smile

alors ce serait plutot:


html  {height:100%;overflow:auto;margin:0;padding:0;overflow:hidden;}

body {
	background-color : #ee982d;
	background-repeat : repeat-x;
	background-image: url(look/fade.png);
	margin-top : 0;
	margin-left : 0;
	margin-right : 0;
	margin-bottom : 0;
	height:100%;
	padding:0;
	overflow:auto;
      }
#footer {
	position:absolute;
	bottom : 0px;
	width:100%;
	text-align : center;
	background-color : #F5DD47;
	left:0;
}


le position:fixed est inutile dans ce cas Smiley smile

++
Modifié par gcyrillus (12 Nov 2006 - 21:42)
gcyrillus, merci à toi ta solution passe nickel, j'ai juste eut besoin de redimensionner mon menu en haut.

Juste une dernière petite chose avant un [résolu], quand le contenu total de la page depasse de l'écran, FF me met bien une barre de scroll mais IE non.

Pour la mettre c'est pas avec un overflow-y que ca se passe ?
Modérateur
en principe dans IE 6 (et un doctype !) , avec html {overflow:hidden} et body {overflow:auto} , il n'y a aucun problem de barre de scroll ,
elle apparait si besoin , et cette façon de faire et d'eviter d'avoir 2 barre de scroll ,
en xhtml , la balise html est stylable et peut alors affiché aussi une barre de scroll , recevoir un fond , etc ...

++
Sujet clos
Aller à