pb de position de footer (Créer un compte)

  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 16)
  • Auteur
    Messages
  • #478327
    romk
    Participant
    Padawan WordPress
    60 contributions

    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 ^^

    #711683
    sushi
    Membre
    Chevalier WordPress
    268 contributions

    Bonjour,

    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; */

    ^^

    #711684
    romk
    Participant
    Padawan WordPress
    60 contributions

    Merci, 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.

    #711685
    Polygones
    Membre
    Padawan WordPress
    75 contributions

    L’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*/

    #711686
    sushi
    Membre
    Chevalier WordPress
    268 contributions

    Ajoute

    bottom: 0px;

    si j’ai bien compris ce que tu voulais faire.. ^^


    @polygones
    il l’a bien mis en dessous du footer 🙂

    #711687
    Polygones
    Membre
    Padawan WordPress
    75 contributions

    Ah 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^^.

    #711688
    romk
    Participant
    Padawan WordPress
    60 contributions

    Merci à 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.

    #711689
    Polygones
    Membre
    Padawan WordPress
    75 contributions

    Je 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 😉

    #711690
    Polygones
    Membre
    Padawan WordPress
    75 contributions

    Alors, 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>
       

    #711691
    sushi
    Membre
    Chevalier WordPress
    268 contributions

    Si tu t’y connais en jQuery, tu peux utiliser ce code:

    http://www.maifith.com/news/use-jquery-to-automatically-size-your-footer-height

    #711682
    romk
    Participant
    Padawan WordPress
    60 contributions

    Merci 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.

    #711681
    Polygones
    Membre
    Padawan WordPress
    75 contributions

    Je 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 :D

    #711677
    romk
    Participant
    Padawan WordPress
    60 contributions

    pour 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>
       

    #711678
    Polygones
    Membre
    Padawan WordPress
    75 contributions

    Dans 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.

    #711679
    romk
    Participant
    Padawan WordPress
    60 contributions

    oui c’est bien celui qui est en ligne à cette adresse : http://rom.romain3.free.fr/annabirgit/

    Merci ! 😉

15 sujets de 1 à 15 (sur un total de 16)
  • Le forum ‘Utilisation spécifique de WordPress’ est fermé à de nouveaux sujets et réponses.