problème de footer
Dernière réponse : dans Programmation
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 :
{
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 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 :
Citation :
#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;
}
Citation :
<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
Autres pages sur : probleme footer
Lassé par la pub ? Créez un compte
Bonjour,
Cela ne suffisait pas. A dire vrai, ça ne changeait rien à la situation. Je sais que c'est pourtant le "code magique" à entrer (je l'ai donc remis), mais la situation restait identique.
J’ai donc encore apporté quelques modifications après de longues heures de prise de tête (je ne suis pas un pro, 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 (je l'ai placé à X pixels du haut de la page). 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 <gras>modifié</gras> :
#body
{
margin: 0;
text-align: center;
<gras>overflow:hidden;</gras> j'ai relu des notes où il est question de mettre ça pour FF ou un autre navigateur, mais je ne sais plus pourpourquoi
<gras>position: relative;</gras>
}
#footer
{
float:left;
font-family:Arial;
font-size: 12px;
<gras>margin-top: 3400px;</gras>
margin-left: 290px;
padding: 0;
text-align: center;
position:absolute;
clear: both;
}
Au plaisir de vous lire...
tOOnie
Cela ne suffisait pas. A dire vrai, ça ne changeait rien à la situation. Je sais que c'est pourtant le "code magique" à entrer (je l'ai donc remis), mais la situation restait identique.
J’ai donc encore apporté quelques modifications après de longues heures de prise de tête (je ne suis pas un pro, 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 (je l'ai placé à X pixels du haut de la page). 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 <gras>modifié</gras> :
#body
{
margin: 0;
text-align: center;
<gras>overflow:hidden;</gras> j'ai relu des notes où il est question de mettre ça pour FF ou un autre navigateur, mais je ne sais plus pourpourquoi
<gras>position: relative;</gras>
}
#footer
{
float:left;
font-family:Arial;
font-size: 12px;
<gras>margin-top: 3400px;</gras>
margin-left: 290px;
padding: 0;
text-align: center;
position:absolute;
clear: both;
}
Au plaisir de vous lire...
tOOnie
Bonsoir,
C'est un petit up, que je commente :
voici où j'en suis :
le footer est maintenant 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
C'est un petit up, que je commente :
voici où j'en suis :
le footer est maintenant 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
Lassé par la pub ? Créez un compte
