Problème de footer
Résolu
TOONIE
Messages postés
130
Date d'inscription
Statut
Membre
Dernière intervention
-
TOONIE Messages postés 130 Date d'inscription Statut Membre Dernière intervention -
TOONIE Messages postés 130 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J’ai une site (pas encore en ligne) à 3 colonnes, dont la première est en position fixed (c’est le menu qui ne bouge pas), et je n’arrive pas à mettre mon footer aligné sur les colonnes 2 et 3 :
I colonne 1 I I colonne 2 I I colonne 3 I
I footer I
Pour aligner le footer sur les colonnes 2 et 3, j’ai mis la margin-left identique à celle de la colonne 2 (pour qu’il commence au même niveau qu’elle). Le width du footer est inférieur à celui du body qui fait 845px, donc il ne dépasserait pas et devrait être contenu dedans. Je n’ai pas mis de height de sorte qu’il prenne la taille totale de toutes les images qui sont dedans. Et pourtant ça ne fonctionne pas : le footer se met à gauche (comme une colonne), avant les 3 colonnes, ou les superpose (selon comment je bidouille mon css pour tenter de le mettre en pied de page : réduire ou augmenter le width, l’enlever, réduire les photos).
Pouvez-vous m’aider ?
Voici les paramétrages CSS et HTML :
#col1
{
margin-top: 10px;
position: fixed;
width: 210px;
float:left;
}
#col2
{
width: 295px;
margin-top: 10px;
position: absolute;
margin-left: 230px;
padding-left: 10px;
padding-right: 10px;
float:left;
}
#col3
{
width: 300px;
margin-top: 10px;
position: absolute;
margin-left: 545px;
padding-left: 10px;
padding-right: 10px;
float:left;
}
#footer
{
float:left;
font-family:Arial;
font-size: 12px;
margin-left: 230px;
padding: 0;
text-align: center;
width: 600px;
}
<div id="footer">
<div class="textefooter">
<p><img src="image1.jpg" alt="" align="center" width="230" height="334"> <img src="image2.jpg" alt="" align="center" width="233" height="334"></p>
<p><img src="image3.jpg" alt="" align="center" width="228" height="212"></p>
<p> </p>
<img src="image4.jpg" width="451" height="127" border="0" />
</div>
</div>
D’avance merci
tOOnie
J’ai une site (pas encore en ligne) à 3 colonnes, dont la première est en position fixed (c’est le menu qui ne bouge pas), et je n’arrive pas à mettre mon footer aligné sur les colonnes 2 et 3 :
I colonne 1 I I colonne 2 I I colonne 3 I
I footer I
Pour aligner le footer sur les colonnes 2 et 3, j’ai mis la margin-left identique à celle de la colonne 2 (pour qu’il commence au même niveau qu’elle). Le width du footer est inférieur à celui du body qui fait 845px, donc il ne dépasserait pas et devrait être contenu dedans. Je n’ai pas mis de height de sorte qu’il prenne la taille totale de toutes les images qui sont dedans. Et pourtant ça ne fonctionne pas : le footer se met à gauche (comme une colonne), avant les 3 colonnes, ou les superpose (selon comment je bidouille mon css pour tenter de le mettre en pied de page : réduire ou augmenter le width, l’enlever, réduire les photos).
Pouvez-vous m’aider ?
Voici les paramétrages CSS et HTML :
#col1
{
margin-top: 10px;
position: fixed;
width: 210px;
float:left;
}
#col2
{
width: 295px;
margin-top: 10px;
position: absolute;
margin-left: 230px;
padding-left: 10px;
padding-right: 10px;
float:left;
}
#col3
{
width: 300px;
margin-top: 10px;
position: absolute;
margin-left: 545px;
padding-left: 10px;
padding-right: 10px;
float:left;
}
#footer
{
float:left;
font-family:Arial;
font-size: 12px;
margin-left: 230px;
padding: 0;
text-align: center;
width: 600px;
}
<div id="footer">
<div class="textefooter">
<p><img src="image1.jpg" alt="" align="center" width="230" height="334"> <img src="image2.jpg" alt="" align="center" width="233" height="334"></p>
<p><img src="image3.jpg" alt="" align="center" width="228" height="212"></p>
<p> </p>
<img src="image4.jpg" width="451" height="127" border="0" />
</div>
</div>
D’avance merci
tOOnie
A voir également:
- Fixer footer en bas de page
- Impossible de supprimer une page word - Guide
- Mettre google en page d'accueil - Guide
- Traduire une page en français - Guide
- Numéro de page word - Guide
- Imprimer tableau excel sur une page - Guide
6 réponses
J'ai essayé avec unclear : left et both, ça marche toujours pas...
Un petit up pour une petite aide...
Un petit up pour une petite aide...
Bonjour,
J’ai apporté quelques modifications après plus de 24h00 de prise de tête (je ne suis pas unpro, certes) … et j'ai encore un petite difficulté que je n'arrive pas à dépasser.
Le footer est bien en bas maintenant, mais je trouve que c’est un peu du bricolage, car si j’enlève du rédactionnel, mon footer sera toujours à la même place. J’aimerai qu’il puisse être à XX pixels du paragraphe le plus bas de la colonne 2 ou de la colonne 3. Et là, je n’y arrive toujours pas.
Une idée ?
le code modifié :
#body
{
margin: 0;
text-align: center;
overflow:hidden; j'ai relu des notes où il est question de mettre ça pour FF ou un autre navigateur, mais je ne sais plus pourpourquoi
position: relative;
}
#footer
{
float:left;
font-family:Arial;
font-size: 12px;
margin-top: 3400px;
margin-left: 290px;
padding: 0;
text-align: center;
position:absolute;
clear: both;
}
Au plaisir de vous lire...
tOOnie
J’ai apporté quelques modifications après plus de 24h00 de prise de tête (je ne suis pas unpro, certes) … et j'ai encore un petite difficulté que je n'arrive pas à dépasser.
Le footer est bien en bas maintenant, mais je trouve que c’est un peu du bricolage, car si j’enlève du rédactionnel, mon footer sera toujours à la même place. J’aimerai qu’il puisse être à XX pixels du paragraphe le plus bas de la colonne 2 ou de la colonne 3. Et là, je n’y arrive toujours pas.
Une idée ?
le code modifié :
#body
{
margin: 0;
text-align: center;
overflow:hidden; j'ai relu des notes où il est question de mettre ça pour FF ou un autre navigateur, mais je ne sais plus pourpourquoi
position: relative;
}
#footer
{
float:left;
font-family:Arial;
font-size: 12px;
margin-top: 3400px;
margin-left: 290px;
padding: 0;
text-align: center;
position:absolute;
clear: both;
}
Au plaisir de vous lire...
tOOnie
Bonjour,
enlève le overflow:hidden, sinon ça enlève la barre de défilement.
Pour ton footer il faut le mettre dans un div qui contient tes 2 colonnes.
Ton fichier html doit etre comme ça
<div id="col1">ta premiere colonne</div>
<div id="page">
<div id="col2">ta deuxieme colonne</div>
<div id="col3">ta troisieme colonne</div>
<div id="footer">ton footer</div>
</div>
le div page avec la largeur de tes 2 colonnes.
col2 et col3 en float:left et footer avec clear:both;
voilà :)
enlève le overflow:hidden, sinon ça enlève la barre de défilement.
Pour ton footer il faut le mettre dans un div qui contient tes 2 colonnes.
Ton fichier html doit etre comme ça
<div id="col1">ta premiere colonne</div>
<div id="page">
<div id="col2">ta deuxieme colonne</div>
<div id="col3">ta troisieme colonne</div>
<div id="footer">ton footer</div>
</div>
le div page avec la largeur de tes 2 colonnes.
col2 et col3 en float:left et footer avec clear:both;
voilà :)
Bonsoir,
Je réponds avec un peu de décalage, je m’en excuse.
J’ai du mal travailler tes indications parce que le footer est en haut et a gauche des colonnes 2 et 3… J’arrive pas à voir ce que j’ai mal fait…
<body>
<div id="col1"></div>
<div id="alignfooter">
<div id="col2"></div>
<div id="col3"></div>
</div>
</body>
#alignfooter
{
width: 680px;
font-family:Arial;
font-size: 12px;
padding: 0;
text-align: center;
}
#footer
{
float:left;
font-family:Arial;
font-size: 12px;
padding: 0;
text-align: center;
clear: both;
}
#col1
{
margin-top: 10px;
position: fixed;
width: 210px;
float:left;
}
#col2
{
width: 295px;
margin-top: 10px;
position: absolute;
margin-left: 230px;
padding-left: 10px;
padding-right: 10px;
float:left;
}
#col3
{
width: 300px;
margin-top: 10px;
position: absolute;
margin-left: 545px;
padding-left: 10px;
padding-right: 10px;
float:left;
}
D'avance merci pour l'aide apportée.
tOOnie
Je réponds avec un peu de décalage, je m’en excuse.
J’ai du mal travailler tes indications parce que le footer est en haut et a gauche des colonnes 2 et 3… J’arrive pas à voir ce que j’ai mal fait…
<body>
<div id="col1"></div>
<div id="alignfooter">
<div id="col2"></div>
<div id="col3"></div>
</div>
</body>
#alignfooter
{
width: 680px;
font-family:Arial;
font-size: 12px;
padding: 0;
text-align: center;
}
#footer
{
float:left;
font-family:Arial;
font-size: 12px;
padding: 0;
text-align: center;
clear: both;
}
#col1
{
margin-top: 10px;
position: fixed;
width: 210px;
float:left;
}
#col2
{
width: 295px;
margin-top: 10px;
position: absolute;
margin-left: 230px;
padding-left: 10px;
padding-right: 10px;
float:left;
}
#col3
{
width: 300px;
margin-top: 10px;
position: absolute;
margin-left: 545px;
padding-left: 10px;
padding-right: 10px;
float:left;
}
D'avance merci pour l'aide apportée.
tOOnie
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
salut,
je n'ai pas le temps de tester mais je pense que tu devrais mettre tes colonnes 2 et 3 et le footer dans un <div>, ce qui te permettrai de les traiter tous les trois comme un bloc et ensuite tu pourrais organiser les colonnes 2 et 3 et le footer à l'intérieur de ce <div>.
qu'en penses-tu ?
je n'ai pas le temps de tester mais je pense que tu devrais mettre tes colonnes 2 et 3 et le footer dans un <div>, ce qui te permettrai de les traiter tous les trois comme un bloc et ensuite tu pourrais organiser les colonnes 2 et 3 et le footer à l'intérieur de ce <div>.
qu'en penses-tu ?
Bonsoir Dalida,
Bonsoir,
Pourtant ça ne marche pas : le footer est passer en haut à la place des colonnes 2 et 3, qui elles, sont passée à droite.
Bref, j’ai maintenant à peu près ceci :
I col1 I I footer I I col 2 I I col3 I
Il est clair que j’ai fait au moins une bêtise, mais je ne vois pas où…
<body>
<div id="kko">
<div id="col1"></div>
<div id="alignfooter">
<div id="col2"></div>
<div id="col3"></div>
<div id="footer"></div>
</div>
</div>
</body>
#alignfooter{width: 680px; font-family:Arial; font-size: 12px; padding: 0;text-align: center;}
#footer {float:left; font-family:Arial; font-size: 12px; padding: 0; text-align: center; clear: both;}
#col2 {width: 295px; margin-top: 10px; position: absolute; margin-left: 230px; padding-left: 10px; padding-right: 10px; float:left; }
#col3 { width: 300px; margin-top: 10px; position: absolute; margin-left: 545px; padding-left: 10px; padding-right: 10px; float:left; }
Et je ne sais pas si c’est utile :
#body
{
margin: 0; /* pour éviter les marges */
text-align: center; /* je corrige le bug de centrage IE */
overflow:hidden;
position: relative;
}
#kko
{
margin : 0 auto;
width: 845px; /* pour être centré il me faut une largeur*/
text-align: left; /* je rétablis l'alignement normal du texte */
}
D’avance merci pour l’aide apportée,
tOOnie
Bonsoir,
Pourtant ça ne marche pas : le footer est passer en haut à la place des colonnes 2 et 3, qui elles, sont passée à droite.
Bref, j’ai maintenant à peu près ceci :
I col1 I I footer I I col 2 I I col3 I
Il est clair que j’ai fait au moins une bêtise, mais je ne vois pas où…
<body>
<div id="kko">
<div id="col1"></div>
<div id="alignfooter">
<div id="col2"></div>
<div id="col3"></div>
<div id="footer"></div>
</div>
</div>
</body>
#alignfooter{width: 680px; font-family:Arial; font-size: 12px; padding: 0;text-align: center;}
#footer {float:left; font-family:Arial; font-size: 12px; padding: 0; text-align: center; clear: both;}
#col2 {width: 295px; margin-top: 10px; position: absolute; margin-left: 230px; padding-left: 10px; padding-right: 10px; float:left; }
#col3 { width: 300px; margin-top: 10px; position: absolute; margin-left: 545px; padding-left: 10px; padding-right: 10px; float:left; }
Et je ne sais pas si c’est utile :
#body
{
margin: 0; /* pour éviter les marges */
text-align: center; /* je corrige le bug de centrage IE */
overflow:hidden;
position: relative;
}
#kko
{
margin : 0 auto;
width: 845px; /* pour être centré il me faut une largeur*/
text-align: left; /* je rétablis l'alignement normal du texte */
}
D’avance merci pour l’aide apportée,
tOOnie
salut,
désolé, je tarde un peu à te répondre et je remarque au passage que Joy_^ t'avait déjà donné la même réponse en <4>.
regarde cet exemple et dis moi si c'est ce que tu souhaites faire.
à plus.
désolé, je tarde un peu à te répondre et je remarque au passage que Joy_^ t'avait déjà donné la même réponse en <4>.
regarde cet exemple et dis moi si c'est ce que tu souhaites faire.
à plus.
