Prb d'afffichage d'un pied de page avec FF + position absolu

j'ai un souci averc FF

j'ai un pied de page qui se bloque en bas de mon site. Lorsque le contenu de mon div "centre " est important, mon pied de page devient transparent et mon contenu passe en dessous
le souci vient de mon css ou avec position: absolute; si je supprime cet attribut Internet explorer interprete bien mais FF bug!!!!
voila mon code css pour le pied de page :

.pieddepage{
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: #F7931E;
text-align: center;
}

et voila mon site avec dans mon css "position:absolute;" enlevé
IE interprete bien FF bug.
http://www.revuevertigo.com

Comment fait-on pour que FF ne bug pas qd j'enleve position:absolute;?
Modifié par greench (29 Jun 2006 - 14:09)

peut etre que mon prb viendrait de mon div centre:

#centre{
background-color: #000000;
width: 100%;
height: auto ;
}

Ou je mets un height:auto; que ff interprete mal
jai regarde le faq
http://forum.alsacreations.com/faq/#item60
mais rien y fait tjrs un prb d'affichage sur ff en ce qui concerne mon pied de page

rajoute clear:both; dans #pieddepage

merci a toi ceci fonctionne tres bien
je cours de suite sur les tutoriaux pour comprendre cette fonction

au fait ce n'est pas resolu voila le souci :
http://www.revuevertigo.com
qd je mets peu de contenu dans mon div "center" mon pied de page remonte
alors que je voudrais qu'il reste en bas de page, le souci c si je rajoute
position: absolute;
si là j'ai du contenu important dans mon div "center" le contenu traverse mon pied de page
je ne vois pas comment resoudre ce prb

Voila exactement mon souci :

1- je voudrais que mon site soit graphiquement comme ceci:

ici mon div "centre" ou se trouve les images et mon texte se placent correctement
et mon pied de page aussi
voila mon code css pour ces deux div :

#centre{
background-color: #000000;
width: 100%;
height: auto;
}

.pieddepage{
position : absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: #F7931E;
text-align: center;
}

Le probleme de ce code c que si je rajoute du texte dans le div "centre" mon bloc dépasse et traverse mon pied de page comme ceci:

bien sur ceci est du a ma position absolute de mon pied de page donc je supprime de mon code css cet attribut ce qui me donne :

#centre{
background-color: #000000;
width: 100%;
height: auto;
}

.pieddepage{
bottom: 0;
width: 100%;
height: 20px;
background-color: #F7931E;
text-align: center;
}

et voici un lien pour visionner le résultat :

Tout fonctionne très bien avec Internet explorer mais pas avec Mozilla Firefox ou mon pied de page se place en haut de mon div center !!!!!!

2- On me conseille donc de rajouter l'attribut clear: both; ce qui me résoud le prb avec ff

#centre{
background-color: #000000;
width: 100%;
height: auto;
}

.pieddepage{
clear: both;
bottom: 0;
width: 100%;
height: 20px;
background-color: #F7931E;
text-align: center;
}

et voici un lien pour visionner le résultat :

pas de prb sur ie comme sur FF

LE SOUCI C QUE SI J'ENLEVE TOUT CE TEXTE MON PIED DE PAGE VIENT SE PLACER JUSTE APRES MON DIV CENTRE ET NON PAS EN BAS
Voici le resultat


JE TOURNE EN ROND

je voudrais obtenir graphiquement ce resultat :

mais en ayant possibilité de rajouter un contenu important dans mon div centre sans que cela traverse mon pied de page

J'espere avoir ete clair

Desole je le remets mes liens n'etant pas passé!!!!!!


Voila exactement mon souci :

1- je voudrais que mon site soit graphiquement comme ceci:
http://www.revuevertigo.com/test/
ici mon div "center" ou se trouve les images et mon texte se placent correctement
et mon pied de page aussi
voila mon code css pour ces deux div :

#centre{
background-color: #000000;
width: 100%;
height: auto;
}

.pieddepage{
position : absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: #F7931E;
text-align: center;
}

Le probleme de ce code c que si je rajoute du texte dans le div "centre" mon bloc dépasse et traverse mon pied de page comme ceci:
http://www.revuevertigo.com/test1/
bien sur ceci est du a ma position absolute de mon pied de page donc je supprime de mon code css cet attribut ce qui me donne :

#centre{
background-color: #000000;
width: 100%;
height: auto;
}

.pieddepage{
bottom: 0;
width: 100%;
height: 20px;
background-color: #F7931E;
text-align: center;
}

et voici un lien pour visionner le résultat :
http://www.revuevertigo.com/test2/
Tout fonctionne très bien avec Internet explorer mais pas avec Mozilla Firefox ou mon pied de page se place en haut de mon div center !!!!!!

2- On me conseille donc de rajouter l'attribut clear: both; ce qui me résoud le prb avec ff

#centre{
background-color: #000000;
width: 100%;
height: auto;
}

.pieddepage{
clear: both;
bottom: 0;
width: 100%;
height: 20px;
background-color: #F7931E;
text-align: center;
}

et voici un lien pour visionner le résultat :
http://www.revuevertigo.com/test3/
pas de prb sur ie comme sur FF

LE SOUCI C QUE SI J'ENLEVE TOUT CE TEXTE MON PIED DE PAGE VIENT SE PLACER JUSTE APRES MON DIV CENTRE ET NON PAS EN BAS
Voici le resultat
http://www.revuevertigo.com

JE TOURNE EN ROND

je voudrais obtenir graphiquement ce resultat :
http://www.revuevertigo.com/test/
mais en ayant possibilité de rajouter un contenu important dans mon div centre sans que cela traverse mon pied de page

J'espere avoir ete clair

salut,
Regarde içi, il me semble que cela peut t'aider.

+

heu,
désolé, j'ai oublié le lien : http://pompage.net/pompe/pieds/
Modifié par lav_01 (29 Jun 2006 - 17:15)

lav_01 a écrit :
heu,
désolé, j'ai oublié le lien : http://pompage.net/pompe/pieds/[/url]

Attention, le lien est mal rédigé et ne fonctionne pas (relire l'aide )

j'ai bien parcouru ce lien
http://pompage.net/pompe/pieds/ " rel="nofollow noopener" > http://pompage.net/pompe/pieds/
mais je n'arrive toujours pas a trouver la solution je ne comprends pas pourquoi
help me please mon post d'avant resume bien mon probleme
je rajoute ici mon css (peut etre que le souci se trouve ici)

html, body {
height: 100%;
}

body {
margin: 0;/* sans marges, la page sera collée aux bords */
padding: 0;
font-family: arial, verdana, sans-serif; /* on définit la police de base dans la page */
font-size: 12px; /* on définit la taille de police de base dans la page */
color: #ffffff;
background-color: #000;
}

#container {
position: relative;
min-height: 100%;
}

.head1 {
background-image: url('../image/haut1.jpg');
width: 100%;
height: 58px;
text-align: center;
font-size: 1px;
}

.menu {
background-image: url('../image/fond-menu.jpg');
width: 100%;
height: 30px;
text-align: center;
}

.textemenu{
text-align: center;
font-family: arial, verdana, sans-serif; 
font-size: 10pt;
font-weight: bold ;
color: #F7931E;
}

.textemenu1{
text-align: center;
font-family: arial, verdana, sans-serif; 
font-size: 10pt;
font-weight: bold ;
color: #ffffff;
}

.recherche {
width: 100%;
background-color: #000000;
text-align: right;
font-family: arial, verdana, sans-serif;
font-weight: bold ;
font-size: 8pt;
font-variant:uppercase;
color: #ffffff;
}

.espace {
width: 100%;
height: 30px;
background-color: #000000;
}

form {
display: inline;
}

.texte1{
font-family: arial, verdana, sans-serif; 
font-size: 8pt;
font-weight: bold ;
font-variant:small-caps;
color: #F7931E;
}

.titre1{
font-family: arial, verdana, sans-serif;
font-weight: bold ;
font-size: 11pt;
font-variant:small-caps;
color: #F7931E;
}

#centre{
background-color: #000000;
width: 100%;
height: auto;
}

div.float {
float: left;
width: 22%;
}

div.float1{
float: left;
width: 40%;
}

div.float2{
float: left;
width: 18%;
}

div.float3{
float: left;
width: 19%;
}

.pieddepage{
bottom: 0;
width: 100%;
height: 20px;
background-color: #F7931E;
text-align: center;
}
.textepieddepage{
font-family: arial, verdana, sans-serif; 
font-size: 8pt;
font-weight: bold;
color: #000000;
text-align: right;
}

greench a écrit :
j'ai bien parcouru ce lien
http://pompage.net/pompe/pieds/ " rel="noopener" > http://pompage.net/pompe/pieds/

Attention à l'écriture des liens, il n'y a pourtant rien à faire !

merci pour l'aide!!!!
desole faute de frappe
puis concernant vos liens il y a un souci
qd tu tapes sur lien , tu rentre ton url et apres il faut refermer la balise lien en retapant sur lien, et ben qd tu fais ca ton lien n'apparait pas

bon ok je viens de cerner pour le lien
mais tu dis que je ne peux rien faire a mon prb ?

il voulait juste dire que pour le lien il suffit de le coller sans balisage "lien "
donc il n'y a rien à faire
Au fait je crois pourtant que ta solution est bien dans le lien que je t'ai donné.
Relis l'article.
En clair tu ne peut pas avoir un pied de page en bas de ta fenetre sans avoir le probleme que tu constate, pour pallier a cela il faudra ajouter du javascript.

La deuxieme solution etant de "coller" ton pied de page a ton contenu en le laissant dans le flux mais je ne crois pas que ce soit l'effet que tu recherche car il sera poussé vers le bas par ton contenu.
Tu peut aussi faire un tour dans la galerie des gabarits de page de ce site,
par exemple : http://css.alsacreations.com/modeles/modele11.htm
+
Modifié par lav_01 (30 Jun 2006 - 12:28)