- Statut : non résolu
- Ce sujet contient 15 réponses, 3 participants et a été mis à jour pour la dernière fois par
sushi, le il y a 12 années et 10 mois.
-
AuteurMessages
-
25 mars 2010 à 11 h 43 min #478327
Bonjour,
Je souhaiterai mettre en dessous de mon footer un background qui s’afficherai sur toute la largeur de la page et la hauteur du reste de la page. Seulement, je n’arrive pas à bien le positionner.
Je ne vois pas trop comment bien l’afficher.J’ai créé dans le fichier footer.php une autre div en dessous celle du footer.
</div>
<div id="footer"> ici le bas arrondi blanc du site </div>
<div class="bottom"> ici la barre que je souhaiterai afficher </div>
<?php wp_footer(); ?>
</body>
</html>> http://rom.romain3.free.fr/annabirgit/
Merci ^^
25 mars 2010 à 11 h 53 min #711683Bonjour,
Je vois déjà une erreur CSS ici:
.bottom {
background:#3A5167;
border-top:1px solid #6C8396;
clear:none;
<!-- height:30px; -->
left:0;
position:absolute;
width:100%;
z-index:10000;
}Les commentaires en CSS ne se font pas de la même manière qu’en HTML.
Tu dois utiliser /* height: 30px; */
^^
25 mars 2010 à 12 h 02 min #711684Merci, mais j’ai honte ! 😳
Alors voilà le problème de la largeur réglé, maintenant pour la hauteur ?
En fait, l’idée est que le footer vienne combler l’espace vide du reste de la page sans créer de scroll.
Je pensais à un min-height mais ça ne correspond pas à ce que je recherche.25 mars 2010 à 12 h 07 min #711685L’autre erreur, à mon avis, vient du fait que la div « .bottom » est intégrée dans le footer, lors qu’à priori vous dites vouloir la mettre en dessous.
Du coup ça donnerait plus quelque chose comme ça:
ID-ou-CLASS du footer {
width: votre largeur en px ou %;
height: hauteur en px ou % si il y en a une imposée;
overflow:hidden;/*on oblige le footer à s’adapter au contenu, on n’est donc pas obligé d’indiquer une hauteur. A adapter selon les cas*/
}
.bottom {
width:100%;
background:votre background;
height:la hauteur voulue en px ou %;Une précision au sujet de la hauteur de ce « .bottom »: attention si vous précisez la hauteur qui sépare l’élément précédent du bas de votre page sur votre écran personnel Si c’est le cas, ne pas oublier que certains peuvent avoir un écran plus grand et plus haut. Conséquences: le .bottom s’affichera correctement sur un écran de la même dimension que le vôtre et sur un plus grand, une fois les xxx px de hauteur atteints, la page reprendra comme background celui definit en début de CSS dans la propriété « body ».
Je peux vous donner une astuce si vous voulez pour que le .bottom prenne toute la taille restante de l’écran quoiqu’il arrive?
/* Edit: vous avez posté entre temps^^. J’attends votre réponse pour poursuivre si besoin*/
25 mars 2010 à 12 h 08 min #711686Ajoute
bottom: 0px;
si j’ai bien compris ce que tu voulais faire.. ^^
@polygones il l’a bien mis en dessous du footer 🙂25 mars 2010 à 12 h 12 min #711687Ah pardon, j’avais pas vu la en fin de ligne. huhhu^^. Décidément, j’ai pas les yeux en face des trous (cf un autre post où j’ai fait la même bourde^^).
Cela dit, ça tient toujours pour l’astuce permettant un affichage impecc^^.
25 mars 2010 à 12 h 25 min #711688Merci à vous deux.
Je viens de rajouter un bottom:0px; il se cale bien en bas en effet mais dès que je réduit ma fenêtre, ce n’est plus bon
Je souhaite en fait que ce soit le footer qui se répète en Y lorsque l’on change la taille de la fenêtre et non la taille de ce qu’il y a entre le footer et la bordure blanche.
Je n’ai pas encore vu l’astuce de Polygones mais ça m’intéresse.
25 mars 2010 à 12 h 26 min #711689Je suis en train de la rédiger, j’avais commencé parce que c’est long à mettre à en forme^^. Je reposte dès que j’ai fini 😉
25 mars 2010 à 12 h 46 min #711690Alors, l’astuuuuuuuce:
En fait, pour que le .bottom s’affiche sur tout le reste de la page, il faut en fait définir le « body » avec le background souhaité pour le « .bottom ». Ensuite, construire la page en fonction de ça, en feintant sur les div et leurs dimensions. Concrètement:
(J’intègre le CSS au code HTML qui suit, exemple à ne pas reproduire en situation réelle sous peine de se faire fâcher par le W3C^^)
body {
width:100% /*Prend toute la largeur de l’écran*/
background: le background souhaité pour le .bottom;
margin:0 /*on oblige le contenu du body à venir se coller en haut, à droite et à gauche, pour que le fond n’apparaisse qu’en bas de la page*/
}
<div id="maincontainer"><!--On créé une div venant recouvrir toute la partie du body qu'on ne veut pas voir, toujours pour réserver le background au .bottom. Je choisi cette ID là, mais ça peut être une autre ;) -->
#maincontainer {
width:100%; /*toute la largeur de l’écran*/
background:le background souhaité pour le fond. Actuellement sur votre site, c’est un gris foncé;
overflow:hidden; /*On ne précise pas de hauteur, mais on force la div à s’adapter à ce qu’elle contient*/
margin:0; /*on oblige le maincontainer à se coller au body, sans marges indésirables*/
}
NB: on ne referme pas le maincontainer tout de suite, on attend d’y avoir inséré la ou les div du contenu principal du site.
<div id="container"><!--On créé une div qui contiendra le site: header, zone d'affichage des pages et articles, sidebar etc.-->
#container {
width:950px; /*on limite la largeur à celle souhaitée pour le contenu du site. En principe, ne pas dépasser les 980px, parce que ça génère une barre de défilement horizontal car les dimensions dépassent celles d’un écran en 1024px*/
margin:auto; /*on oblige le contenu du site à se centrer quelque soit la taille des écrans*/
overflow:hidden; /*comme précédemment, on oblige la div à s’adapter à la hauteur de son contenu et on ne précise pas de hauteur fixe*/
background:le background souhaité. Sur votre site actuel, c’est blanc. Si rien n’est précisé, prendra le background défini pour le #maincontainer*/
}
</div><!–On referme le container quand on y a inséré tout ce qu'on souhaitait (pages, articles, sidebar etc)
</div><!--On referme le maincontainer, sans y intégrer le footer, qui viendra en dessous. Du coup, le background du maincontainer s'arrête pour laisser la place à celui du "body", qui n'est autre que celui qu'on veut pour le ".bottom". Magique non? ^^-->
<div id="footer"><!--On ouvre le footer -->
#footer {
width:100% /* toute la largeur de l’écran*/
background:transparent/*laisse apparaître le background du « body »*/
overflow:hidden; /* on l’oblige à s’adapter au contenu du « .bottom »*/
margin:0;/*Vient se coller en bas du #maincontainer*/
margin-bottom: à adapter en fonction de l’écart minimum souhaité entre les dernières lignes du « .bottom » et le bas du navigateur*/
}
<div class="bottom">
<!--Le contenu du .bottom-->
.bottom {
width:950px;/*on prend la même taille que celle du #container, pour donner l’illusion d’un seul et même bloc*/
margin:auto;/*on centre le « .bottom », qui vient se caler dans l’alignement du #container*/
overflow:hidden;/*on oblige la div à s’adapter en hauteur à son contenu, donc pas de hauteur définie (sauf si vous souhaitez en mettre une spécialement là, je ne sais pas ce que vous avez à mettre dedans^^) */
</div><!--On referme le bottom-->
</div><!--On referme le footer-->
<!--on referme le body-->Et voilààààààà! Normalement, votre footer prend toute la taille de l’écran, et le background souhaité se répètera à l’infini selon la hauteur de la page de votre visiteur.
J’ai essayé de faire le plus simple et le plus clair possible…dites moi si jamais ça coince quand même 😉
/edit: pour un meilleur aperçu de la seule structure, sans les CSS associés:*/
Construction HTML de l’astuce:
<div id="maincontainer">
<div id="container"><div>
</div>
<div id="footer">
<div class="bottom"></div>
</div>
25 mars 2010 à 13 h 16 min #711691Si tu t’y connais en jQuery, tu peux utiliser ce code:
http://www.maifith.com/news/use-jquery-to-automatically-size-your-footer-height
25 mars 2010 à 13 h 30 min #711682Merci Polygones pour cette proposition. Je vais devoir modifier l’architecture alors. Je regarde ça.
@ sushi : je ne comprend pas trop le jQuery donc je garde la solution de coté.
Merci.
25 mars 2010 à 13 h 35 min #711681Je ne sais pas comment sont architecturées vos pages, mais a priori ça ne devrait pas être très long. Juste rajouter quelques balises aux endroits adéquats en fait^^.
Pour le jquery, efficace certes, mais je déconseille, pour cause d’accessibilité: si javascript est désactivé sur le navigateur du visiteur, la mise en page définie avec le script sautera. Il faut donc, de toute façon, prévoir une solution en dur pour palier à ce problème 😉
Si vous avez besoin d’un coup de main, suffit de demander
25 mars 2010 à 13 h 39 min #711677pour mon architecture, elle ressemble à ça :
<div id="top"></div>
<div id="container"><div>
<div id="footer"></div>
<div class="bottom"></div>
et il faudrait qu’elle ressemble à cela, si j’ai bien compris…
<div id="top">
<div id="container"><div>
</div>
<div id="footer"></div>
<div class="bottom"></div>
25 mars 2010 à 13 h 41 min #711678Dans le maincontainer, il y a quoi? Juste le header?
Question supplémentaire: est ce qu’on parle de l’architecture du site actuellement en ligne et accessible sous votre pseudo ici? Parce que si oui, je peux regarder avec Web developper, pour voir exactement quelle div contient quel élément.
25 mars 2010 à 13 h 45 min #711679oui c’est bien celui qui est en ligne à cette adresse : http://rom.romain3.free.fr/annabirgit/
Merci ! 😉
-
AuteurMessages
- Le forum ‘Utilisation spécifique de WordPress’ est fermé à de nouveaux sujets et réponses.