Sidebar et footer toujours en bas

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Kunt, 13 Octobre 2008.

Tags:
  1. Kunt
    Kunt WRInaute discret
    Inscrit:
    13 Octobre 2008
    Messages:
    77
    J'aime reçus:
    0
    Bonjour !

    J'annonce tout de suite, j'ai déjà regarder plein d'aide pour faire cela, mais rien ne marche.

    Voilà, mon site est www.dot-design.fr, je vous explique ce que j'ai fais :
    Tout d'abord je suis sous WP, j'ai pris le thème Kelabu-gray, que j'ai modifier (quand même pas mal) pour le mettre à mon goût, etc...

    Donc après beaucoup de modifications, j'ai décidé de changer la couleur de ma sidebar, et j'ai eu du mal car la seule chose dont je pouvais changer la couleur de fond se située juste en dessous du texte et non pas toute la partie gauche du site) jusqu'à me résigné à rendre ma sidebar transparente en ajoutant derrière un background qui se cale sous ma sidebar pour faire comme si elle été grise.
    Donc voilà, je voudrais savoir comment je pourrais faire pour que j'ai deux partie, la sidebar (qui représente une entrée dans mon fichier Css, de sorte à que je puisse changer la couleur juste en "background-color:#blabla") et le contenu.

    De plus, j'aimerais savoir si il est possible de faire en sorte que le footer soit toujours en pieds de page. J'ai déjà essayé beaucoup de méthode, la seule qui cale mon footer en bas, c'est "position:absolute", sauf qu'une fois que je mets ça, mon footer est à gauche, même si j'ai "margin-right:auto; margin-left:auto", sans absolute il est centré, avec, non.

    Troisième problème (hé oui), mais je pense qu'il serai résolu avec les changements précédents, c'est que quand une page n'est pas très grande en hauteur, (exemple), et ben... tout part en live !

    Voilà ! Le fichier css, j'espère que j'ai été clair (je crois que c'est tout le contraire !).

    Merci !
     
  2. Babylon
    Babylon WRInaute discret
    Inscrit:
    18 Octobre 2006
    Messages:
    170
    J'aime reçus:
    0
    Salut Kunt,

    Pour changer la couleur du sidebar tu change le background-color de la "div#wrap".
    Pour ton footer, si tu le passe en absolute tu le sors du flux de la page et de la même façon tu dois en tenir compte pour ton 3eme problème.

    Pour avoir de bonnes bases du css va faire un tour dans les tutos chez alsacréations et tu sauras tout du positionnement, du flux etc ...
    Bon courage !
     
  3. Kunt
    Kunt WRInaute discret
    Inscrit:
    13 Octobre 2008
    Messages:
    77
    J'aime reçus:
    0
    Oui c'est la solution à laquelle j'étais arrivée au début, changer la couleur du wrap et mettre le contenu blanc par dessus le wrap.

    Mais le probleme que j'avais rencontré c'est que le fond du wrap n'aille que sous le texte, alors que la hauteur de ma page est plus importante... Du coup, ça ne marcher pas parfaitement...

    J'ai fais des recherches pour le footer mais pas trouver ce qui marcher... SI quelqu'un a la solution ici...

    J'aimerais que mon site sépare parfaitement la partie left (sidebar) et la right(contenu), comme si il n'y avait plus besoin de wrap quoi.

    Merci en tout cas Babylon :) Je vais aller chercher dans alsacreation.
     
  4. natespritcabane
    natespritcabane WRInaute discret
    Inscrit:
    14 Décembre 2006
    Messages:
    218
    J'aime reçus:
    1
    Bonsoir Kunt,

    Il faut supprimer une fin de div </div> après ce code dans ton index
    <img src="http://www.dot-design.fr/wp-content/themes/kelabu-gray/images/bull2.gif" width="8" height="8" alt=""/> <a href="http://www.dot-design.fr/blog">&nbsp;Blog</a></font>
    c'est pour ça qu'une partie de la colonne glisse sous le contenu au centre.

    et en ajoutant au style #left

    #left { margin: 0; padding: 19px 0 8px 10px; float: left; height: auto; width: 200px; margin-bottom:0; background-color: #666600; }

    J'ai mis une couleur au hasard mais on peut changer... ça donne une couleur à la colonne gauche.

    En trouvant le style associé a la colonne grise et en passant sa background-color: #FFFFFF; en blanc, ça devrait aller mieux. Courage c'est dur au début les css mais ça vaut le coup :) et alsacréations est vraiment bien pour apprendre et améliorer ses styles
     
  5. Kunt
    Kunt WRInaute discret
    Inscrit:
    13 Octobre 2008
    Messages:
    77
    J'aime reçus:
    0
    Voilà, j'ai fais ce que tu m'a dit et :

    - Le fond s'arrete en bas du texte (sidebar) sur la page d'accueil.

    Mais sinon sur les autres page celà marche trés bien, merci!

    Mais le footer n'est pas calé en bas...

    Le footer quand à lui, n'est pas toujours en bas...

    Merci !

    EDIT : Mon footer se cale ne bas lorsque la page est plus petite que la hauteur du site, mais si je vais sur une page plus haute que la résolution de l'écran, mon footer vole dans le vide, à sa place initiale de lorsqu'on arrive sur le site. (pas clair tout ça...).
     
  6. NxtGen
    NxtGen WRInaute impliqué
    Inscrit:
    24 Octobre 2006
    Messages:
    563
    J'aime reçus:
    0
    si tu met un float:left, il faut que dans le style de ton footer, tu mettes un clear:both, ce qui annule le float et place le bloc en dessous dans tous les cas :)
     
  7. Kunt
    Kunt WRInaute discret
    Inscrit:
    13 Octobre 2008
    Messages:
    77
    J'aime reçus:
    0
    La page initialement chargée :
    [​IMG]

    Et si je descend dans la page... Le footer rester en bas... exactement à la même place...

    [​IMG]



    J'avais déjà mis un clear:both, donc je n'avais rien à changer Nxtgen ;)

    Donc voilà... Merci en tout cas !
     
  8. NxtGen
    NxtGen WRInaute impliqué
    Inscrit:
    24 Octobre 2006
    Messages:
    563
    J'aime reçus:
    0
    va faire un tour sur mon www
    j'ai fait exactement ce que tu veux faire je crois

    cherche dans -http://share.needforspeedcarbon.fr/global.css tout ce qui concerne #ads_bottom
     
  9. Kunt
    Kunt WRInaute discret
    Inscrit:
    13 Octobre 2008
    Messages:
    77
    J'aime reçus:
    0
    J'ai essayer de mettre la même chose en ajustant suivant mon site mais ça ne marche pas...
    Le footer se mets en haut, juste en dessous du header, si je mets un clear:both, il reste au même endroit, mais ne va pas tout en bas...
     
  10. NxtGen
    NxtGen WRInaute impliqué
    Inscrit:
    24 Octobre 2006
    Messages:
    563
    J'aime reçus:
    0
    J'ai essayé en local et j'ai réussi :)

    Déja dans ton css, rajoute la ligne
    body > #footer { position: fixed; }
    aprés les infos sur #footer

    ensuite, pour l'instant, la structure de ton site finie comme ca :

    ....
    <div id="footer">...</div>
    </div>

    il faut le remplacer par ca :
    ....
    </div>
    <div id="footer">...</div>

    En gros, mettre le footer en dehors de tout autre div :)

    et avec ca tout marche
     
  11. Kunt
    Kunt WRInaute discret
    Inscrit:
    13 Octobre 2008
    Messages:
    77
    J'aime reçus:
    0
    Je ne peux pas modifier les balises comme ça, avec Firebug on peut changer car c'est le résultat, mais sinon dans mon thème le footer est tjs en bas, mais ne se présente pas du tout comme ça... Quand je le fais sur Firebug, le footer ne se colle toujours pas en bas, et le contenu ne suis pas jusqu'en haut du footer...

    Ma sidebar quand à elle est à moitié grise dans les grandes pages, elle ne descends pas non plus...

    RRRRRRRH !

    body > #footer { position: fixed; } revient au même que si je taper dans #footer tout simplement pour ma part :/

    Merci en tout cas, j'espère trouver la solution quand même...
     
  12. Kunt
    Kunt WRInaute discret
    Inscrit:
    13 Octobre 2008
    Messages:
    77
    J'aime reçus:
    0
    Bon, pour la sidebar j'ai laisser tomber, j'ai changer la dispostion.

    Mais le footer tout en bas, j'y arrive toujours pas... :(
     
Chargement...
Similar Threads - Sidebar footer Forum Date
Enlever le H3 sur wordpress sidebar Problèmes de référencement spécifiques à vos sites 8 Juin 2020
Liens externes sidebar Débuter en référencement 2 Juin 2012
Impact Sidebar SEO Débuter en référencement 29 Mai 2012
[Wordpress] personnaliser la sidebar en fonction de la catégorie de la page consultée Le café de WebRankInfo 14 Mars 2012
Sidebar fixe après le contenu dans le html Débuter en référencement 7 Mars 2012
Wordpress grouper les articles de catégories dans la sidebar ? Développement d'un site Web ou d'une appli mobile 10 Août 2009
Sidebar flottante Développement d'un site Web ou d'une appli mobile 16 Octobre 2008
Un décallage dans mon sidebar dans internet explorer Développement d'un site Web ou d'une appli mobile 16 Octobre 2005
Mention "Site créer par ..." dans le footer Netlinking, backlinks, liens et redirections 28 Janvier 2022
Texte SEO en footer Débuter en référencement 19 Octobre 2021
Lien footer - agence web Débuter en référencement 6 Octobre 2021
SEO et liens footer de template "Propulsé par XX" Netlinking, backlinks, liens et redirections 30 Octobre 2020
Etanchéité cocon sémantique et liens menus footer Netlinking, backlinks, liens et redirections 25 Octobre 2020
Footer Random SEO ? Référencement Google 22 Octobre 2020
Stuffer keywords en pré-footer en 2020 ? Développement d'un site Web ou d'une appli mobile 12 Août 2020
Optimisation liens footer Netlinking, backlinks, liens et redirections 3 Janvier 2020
WordPress Cocon sémantique et CMS : liens menu et footer Référencement Google 18 Novembre 2019
WordPress Optim SEO - Quoi mettre dans un Footer ? Débuter en référencement 25 Octobre 2019
Comment modifier le lien dans copyright ( footer ) dans prestashop 1.7 Développement d'un site Web ou d'une appli mobile 1 Octobre 2019
Intérêt des balises header, nav, main et footer en SEO Référencement Google 12 Janvier 2019