28172 sujets

CSS et mise en forme, CSS3

[Résolu] Footer flottant...

Bonjour à tous,

Me voici avec un problème de footer flottant.
J'ai lu beaucoup d'articles sur le sujet.
Néanmoins, je n'ai pas encore trouvé mon bonheur.
Puis-je vous demander votre aide...
Mon footer est loin d'être flottant !
Je l'aurais souhaité en bas et à droite de la fenêtre du navigateur.
Bien sûr, mes souhaits sont aussi valables pour IE 6 et supérieur.

J'ai pourtant testé d'utiliser "min-height"...
mais cela ne fonctionne pas non plus...

Voici le css relatif au footer flottant ("contacteznous")

#contacteznous {
	background-image: url(images/general/footer_fond.gif);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	height: 97px;
	position : absolute;
	bottom: 0px;
	right: 0px;
	width: 100%;
	text-align: right;
}


Voici la structure de la page :

<body onLoad="changementphoto();MM_preloadImages('images/general/euroON.gif','images/general/statsON.gif','images/general/puzzleON.gif','images/general/compteON.gif')">
<script type="text/javascript" src="php/visites.php"></script>
<div id="ombre">
<div id="site">

<div id="visuel">
  <div id="entete">
  </div>
  <div id="bienvenue">
  </div>
  <div id="menu">
  </div>
  <div id="menu_options">
  </div>
  <div id="separateurH02"><img src="images/general/trait_grisclair.gif" width="676" height="6" alt="separateurH02" align="left">
  </div>
  <div id="contenu">
  </div>
  <div id="separateurH03"><img src="images/general/trait_grisfonce.gif" width="676" height="6" alt="separateurH03" align="left"></div>
  <div id="pied">
	<div id="recherche" style="margin-top:8px; float:left; width:168px; height:27px; border:2px solid #DDDDDD; background-color: #737373;">
    </div>
    <div style="float:left; width:45px; padding-left:5px;">
        <div><img src="images/general/mastercardOFF.gif" width="45" height="28" alt="mastercard" style="margin-top:9px;"></div>
        <div><img src="images/general/visaOFF.gif" width="45" height="28" alt="visa"></div>
    </div>
    <div style="margin-left:5px; margin-top:8px; float:left;"><img src="images/general/trait_grisclair.gif" width="3" height="60" alt="promo_du_mois"></div>
  </div>
  <div id="commande"><img src="images/general/commande.png" alt="commande" width="141" height="181" border="0" usemap="#Map">
  </div>
  <img src="images/index/main01.png" alt="" name="photo" id="photo" />
</div>
</div>
</div>
<div id="contacteznous"><img src="images/general/footer_image.gif" width="261" height="97"></div>
</body>


Voici quelques CSS (issus de "general.css"):

* {
	margin: 0;
	padding: 0;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
html {
	width: 100%;
	height: 100%;
}
body {
	z-index: 2;
	background-image: url(../images/general/fond.jpg);
	background-attachment: fixed;
	width: 100%;
	height: 100px;
	background-position: bottom;
}
img {
	border: 0;
}

#ombre {
	position: absolute;
	width: 766px;
	height: 800px;
	left: 50%;
	margin-left: -386px;
	margin-top: 10px;
	z-index: 0;
	background-image: url(../images/general/ombre.png);
}
#site {
	position: absolute;
	width: 766px;
	height: 800px;
	margin-top: -5px;
	margin-left: -388px;
	left: 50%;
	background-color: #FFFFFF;
	z-index: 2;
}
#visuel {
	margin-left: 44px;
	width: 676px;
	height: 800px;
}
#entete {
	height: 105px;
	width: 676px;
}
#separateurH01{
	height: 6px;
	width: 676px;
}
#menu {
	height: 147px;
	width: 676px;
}
#separateurH02{
	height: 6px;
	width: 676px;
}
#contenu {
	height: 436px;
	width: 676px;
}
#separateurH03{
	height: 6px;
	width: 676px;
}
#pied {
	height: 75px;
	width: 676px;
}
#recherche {
	color: #FFFFFF;
}
#menu_options {
	position: absolute;
	top: 111px;
	left: 87px;
	height: 147px;
	width: 83px;
	border: 0px;
}

#bienvenue {
	position: absolute;
	top: 0px;
	left: 595px;
	height: 103px;
	width: 121px;
	z-index: 110;
	text-align: right;
	padding-right: 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	line-height: 10px;
	padding-top: 2px;
	font-weight: bold;
	visibility: hidden;
}

Modifié par jytest (06 Jul 2012 - 21:03)
Oui, j'ai oublié de préciser cela.
Je souhaiterai le footer "contacteznous",
toujours en bas et à droite de la page du navigateur !

Merci pour ta future aide...
Modifié par jytest (22 May 2012 - 12:24)
J'ai presque trouvé :


#contacteznous {
	background-image: url(images/general/footer_fond.gif);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	position : fixed;
	bottom: 0px;
	right: 0px;
	width: 100%;
	text-align: right;
	height: 97px;
}


Mais, comme bien souvent, cela ne fonctionne pas bien sous... vous l'aurez deviné... IE !!!

Quelqu'un a une idée ?
Je viens de voir ton post...
Cela confirme que j'ai presque trouvé.

Oui, mais pas sous.. les capricieux IE5 et 6 !
C'est normal, position fixed n'existe pas sous IE 5 et 6 !
Alors, pour faire simple...
comment "supprimer" ce footer (uniquement) sous IE6 (et que les 5 et 6) ?

Mais comment faire ?
Parce que ce qui est proposé là n'a pas l'air de fonctionner...

Quel chinois... ce IE !!!
Modifié par jytest (22 May 2012 - 13:35)
jytest a écrit :
J
comment &quot;supprimer&quot; ce footer (uniquement) sous IE6 (et que les 5 et 6) ?


ici !

et un display none si IE 5/6
IE5 effectivement il vaut mieux éviter ce genre d'effet.

par contre le lien que je te donne est avec une règle (qui utilise les expressions) qui devrait fonctionner sous IE 6 non ?
si ça ne marche pas, essaies plutôt de passer celle-ci via une feuille de style dédiée avec un commentaire conditionnel comme te le suggère ssajuck plutôt que le hack css. c'est peut être ce dernier qui pose souci et qui ne fonctionne pas.
Modifié par o06 (22 May 2012 - 13:53)
Merci à tous les 2 !

Avant de "supprimer" ce footer sous IE5et6,
j'ai encore persévéré.

oO6, j'ai suivi ton idée...

Voilà, cela fonctionne avec :

* html #contacteznous { /* lte IE6 */
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: visible;
	top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}

Modifié par jytest (22 May 2012 - 14:08)
Sujet clos
Aller à