28172 sujets

CSS et mise en forme, CSS3

CSS - Footer extensible en 3 parties

Bonjour à toutes et à tous !

Je suis nouveau sur le forum, mais ça fait déjà un moment que je le consulte régulièrement lorsque je suis confronté à un problème.

Aujourd'hui je n'ai pas réussi à trouver ma réponse alors voilà :

Je réalise un site très simple (quelques images et un peu de texte) en HTML,CSS et avec un zeste de JS.
Je m'attaque au footer du site que j'aimerai voir s'adapter aux différentes résolutions d'écran.

J'ai donc découpé ce footer en 3 parties :

1 - La partie gauche qui servira de bouton de retour à l'index
2 - La partie du milieu qui est un simple trait (qui devra donc s'adapter en largeur pour coller aux 2 autres parties)
3 - La partie de droite qui servira de bouton de "contact"

J'espère avoir été assez clair pour décrire ce que j'aimerais faire.

Maintenant le problème est que j'arrive à mettre la partie 1 à gauche avec un float:left, j'arrive à mettre la partie 2 au milieu avec un text-align-center ; mais je n'arrive pas à mettre la partie 3 à droite sur la même ligne. Elle se fout en dessous alors que je lui ai simplement appliqué un float:right...


Voilà mon CSS :

#splash1 {
position : relative;
margin : auto;
height : auto;
max-height : 1080px;
max-width : 1440px
}
#center {
position : relative;
margin : auto;
height : auto;
max-height : 1080px;
max-width : 1440px
}
#footer
{}
#footerleft
{float:left}
#footermiddle
{text-align:center}
#footerright
{float:right}


Et mon HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>blablabla</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript" src="js/splash.js"></script>
</head>
<body>
<div id="splash1"><img src="img/intro1.png"></div>
<div id="center"><img src="img/intro2.png"></div>
<div id="footer">
<div id="footerleft"><img src="img/footerleft.png"></div>
<div id="footermiddle"><img src="img/footermiddle.png"></div>
<div id="footerright"><img src="img/footerright.png"></div>
</div>
</body>
</html>



Merci pour votre aide Smiley smile


PS : et si par la même occasion vous pouvez m'expliquer pourquoi ma div center ne veut pas réduire sa taille sans être obligé de scroller (utiliser l'ascenseur de la fenêtre pour ceux qui préfèrent) se serait top ! Smiley smile
Merci pour ta réponse.

J'y ai pensé effectivement, mais ça me rappel mes premières heures d'apprentissages du html et css à galérer pour faire tenir un menu à base de <table> <tr> <td> centré, aligné et beau.
Ben c'était pas la joie ^^

En plus j'ai trouve que ça fait beaucoup plus propre (et moins long) d'utiliser presque uniquement du css sans avoir à ajouter de balises html de tableau. (le lien que tu as indiqué abonde dans mon sens)

Mais si c'est vraiment la seule solution alors je m'y pencherai dès que possible.

Merci encore
Bon alors j'ai progressé.

J'ai ajouté des "position:absolute" à "footerleft" et "footermiddle" et les 3 div sont alignés ! Youhouuu !

Maintenant, est-ce que quelqu'un sait comment faire pour que mon "footermiddle" (qui est un trait horizontale tout bête) puisse s'élargir pour rejoindre le "footerleft" et le "footerright" ?

J'ai essayé de lui appliquer "width:100%" et ça ne marche pas. Il garde la taille du fichier...
J'ai essayé de lui appliquer "width:auto" et il va se mettre à gauche de la page en masquant le "footerleft"...

Si quelqu'un peut m'aider ce serait cool Smiley smile

Merci d'avance.


Ah oui et aussi : JOYEUX NOËL à toutes et à tous !
Bon appétit et ne mangez pas trop de code quand même Smiley smile

EDIT :
Mon nouveau css (le html n'a pas changé lui) :
body
{
margin:auto;
padding:0
}
#splash1
{
position:relative;
margin:auto;
height:auto;
max-height:1080px;
max-width:1440px
}
#center
{
position:relative;
margin:auto;
height:auto;
max-height:1080px;
max-width:1440px
}
#footer
{}
#footerleft
{
position:absolute;
float:left;
width:5.25em
}
#footermiddle
{
position:absolute;
text-align:center;
width:100%
}
#footerright
{
float:right;
margin:auto
}

Modifié par timtim (24 Dec 2011 - 14:03)
Hello,
Essaye peut-être en spécifiant la largeur de chacune des parties du footer (en %).
#footer
{
width: 100%
}

#footerleft
{
position:absolute;
float:left;
width: 20%;
}

#footermiddle
{
position:absolute;
display: block;
text-align:center;
width:60%
}

#footerright
{
float:right;
margin:auto
width: 20%;
}
Salut, essaye de reprendre ton premier css et html et d'inverser l'ordre de footermiddle et de footerright.

<div id="footerleft"><img src="img/footerleft.png"></div>
<div id="footermiddle"><img src="img/footermiddle.png"></div>
<div id="footerright"><img src="img/footerright.png"></div>


deviendrait

<div id="footerleft"><img src="img/footerleft.png"></div>
<div id="footerright"><img src="img/footerright.png"></div>
<div id="footermiddle"><img src="img/footermiddle.png"></div>


Le bloc mis en "float" doit être inséré avant les éléments qu'il va "déranger", qui seront mis à côté de lui.
En le mettant après, ton footerright se plaçait naturellement en dessous.
@Menubestof : j'ai essayé et ça n'a pas marché. Le "footermiddle" reste identique.

@Gothor : C'est au poil pour l'alignement. J'ai repris le css de base, j'ai juste modifié le html comme tu me l'as indiqué et ça marche, les 3 div du footer sont alignées.

Maintenant, existe-t-il un moyen pour que la barre centrale du footer s'étire en largeur jusqu'à joindre la div du début et la div de fin ?

J'ai bien essayé de combiner l'astuce de Menubestof avec celle de Gothor, mais ça ne marche toujours pas. Si j'attribue une largeur en pourcentage à chaque div, celle du centre reste de même largeur

Avec un visuel (bien compressé et joliment retouché pour garder le secret sur le site (hahaha)), ce sera sûrement plus explicite.
J'aimerais que le trait du milieu s'allonge pour rejoindre les 2 div extérieures.
Peut-être une piste avec un repeat-x dans le html ?
upload/42504-Sans-titre.gif

Merci pour votre aide !

EDIT : l'image de preview à l'air de merder un peu (il suffit de cliquer sur le bandeau noir).
Oui, pour le footermiddle, mets ton image en background...

Exemple (si tes images font 30px de haut) :
#footermiddle {
    background : url('img/footermiddle.png') repeat-x;
    height : 30px;
}
Bonne idée donc. Cependant, je viens d'essayer et ça ne marche pas.
J'ai même tenté un 
#footermiddle {
background-image : ('img/footermiddle.png');
background-repeat : repeat-x;
}

Comme on voit sur w3schools.com, mais rien n'y fait.
Du coup si on fait un repeat-x, j'ai mis une image de 1px de largeur (mais toujours avec la même hauteur) et le résultat est le même Smiley ohwell


Faut-il ajuster quelque chose dans mon html ?

Merci
Modifié par timtim (02 Jan 2012 - 17:32)
Penses bien à mettre la hauteur dans ton code.

#footermiddle {
    height : /*hauteur de ton image*/ ;
    background-image : ('img/footermiddle.png');
    background-repeat : repeat-x;
}


L'image qui suit correspond par exemple au rendu du code qui la suit (le css est mis dans le fichier html...) :

upload/42565-rendu.png

avec ces trois images :

upload/42565-footerleft.png upload/42565-footermidd.png upload/42565-footerrigh.png 

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            body {
                margin : auto;
                width : 800px;
            }
            .footerleft {
                float : left;
                width : 40px; height : 40px;
                background : url('img/footerleft.png') no-repeat;
            }
            .footerright {
                float : right;
                width : 40px; height : 40px;
                background : url('img/footerright.png') no-repeat;
            }
            .footermiddle {
                height : 40px;
                background : url('img/footermiddle.png') repeat-x;
            }
        </style>
    </head>
    <body>
        <footer>
            <div class="footerleft"></div>
            <div class="footerright"></div>
            <div class="footermiddle"></div>
        </footer>
    </body>
</html>

Modifié par Gothor (02 Jan 2012 - 20:31)
Merci Gothor de suivre mon projet avec autant d'intérêt.

Je viens d'essayer de modifier mon code avec les informations que tu m'as donné et ... (roulement de tambour) ... Rien Smiley ohwell
Ça n'a rien changé par rapport à mon dernier post.

Alors voilà ce que j'ai en css :
body{
height:auto;
width:auto;
margin:auto
}
#splash1 {
position : relative;
margin : auto;
height : auto;
max-height : 1080px;
max-width : 1440px
}
#center {
position : relative;
margin : auto;
height : auto;
width:auto;
max-height : 1080px;
max-width : 1440px
}
.footerleft{
float:left;
height:81px;
width:84px;
background:url('img/footerleft.png')no-repeat;
}
.footermiddle{
height:81px;
background:url('img/footermiddle.png')repeat-x;
}
.footerright{
float:right;
height:81px;
width:201px;
background:url('img/footerright.png')no-repeat;
}


Et en html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>blablabla</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript" src="js/splash.js"></script>
</head>
<body>
<div id="splash1"><img src="img/intro1.png"></div>
<div id="center"><img src="img/intro2.png"></div>
<footer>
<div class="footerleft"><img src="img/footerleft.png"></div>
<div class="footerright"><img src="img/footerright.png"></div>
<div class="footermiddle"><img src="img/footermiddle.png"></div>
</footer>
</body>
</html>


Hmmmm Smiley ohwell
Pas évident évident ... Je rame en tripatouillant ça, mais je ne trouve pas de solution.

Merci encore
Sujet clos
Aller à