Sidebar et footer toujours en bas

[Kunt]

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 !

 

[Babylon]

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 !

 

[Kunt]

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.

 

[natespritcabane]

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

 

[Kunt]

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

 

[NxtGen]

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

 

[Kunt]

La page initialement chargée :

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

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

Donc voilà... Merci en tout cas !

 

[NxtGen]

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

 

[Kunt]

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

 

[NxtGen]

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

 

[Kunt]

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

 

[Kunt]

Bon, pour la sidebar j'ai laisser tomber, j'ai changer la dispostion.

Mais le footer tout en bas, j'y arrive toujours pas...