[RESOLU] Couleur Sous Footer

[gijomloy]

Bonjour,

 

Nous modifions actuellement le theme jailbreak pour notre propre besoin et nous nous cassons les dents sur un detail. Savez-vous comment on pourrait obtenir une couleur uniforme uniforme sous le footer qui serait differente de celle du body (typiquement blanc). C'est de la zone symbolisee par une fleche a laquelle je fais reference (cf. piece attachee). Cette zone est visible sur les pages a faible contenu et donc peu haute (ex: panier). Comme notre footer est gris anthracite, ca fait un peu moche en l'etat. Auriez-vous une idee les experts ?

 

Merci d'avance,

Guillaume

 

[Jacques Biais]

Bonjour,

Je pense qu'il serait préférable de contacter Atchworks, qui est le mieux placé pour apporter une solution.

Cordialement

[a-prods]

firebug t'aurait aide.

voila ce qu'il faut que tu fasse:

dans fichier global.css tu rajoute au début

html{
background-color:#6f6c63;
}

 

et le tour est jouée. Sinon y a plus compliquer si tu veux

[gijomloy]

Bonjour, ce n'est malheureusement pas aussi simple... Je repete en effet une image verticalement pour creer le backgroung entre le header et le footer. Pas moyen a priori de le faire arreter au footer... Je vais mettre mon site en production d'ici quelques jours. Ce sera plus simple pour vous de comprendre le probleme.

 

A bientot et merci en tout cas !

[gijomloy]

Au passage, si on adopte cette solution sur le theme jailbreak d'origine, je pense que la zone centrale sera elle-aussi grisee, non ?

[Divine]

Bonjour,

 

Un peu compliqué sans voir le site mais tu peux essayer cette solution :

 

Dans ton fichier global.css, ajoutes au footer les propriétés suivantes :

 

position:absolute;
bottom:0;
width:100%;

 

Cela devrait forcer le footer à se placer systématiquement en bas de la page et donc éviter cet espace blanc.

[gijomloy]

Merci Divine,

 

Ce n'est malheureusement pas si simple que ca : avec cette methode, pour les pages qui remplissent naturellement plus d'un ecran (ex : listes de produits), le footer se retrouve en bas d'ecran et "barre" la liste des produits. Dommage. J'ai regarde des solutions de "sticky footer", il faut etre astucieux et avec les contraintes d'agencement du code Presta, c'est un cauchemar.

En tout cas, je vais reouvrir la boutique dans le courant de la journee, ca sera plus facile pour vous faire une idee.

 

Merci a tous pour votre gentillesse !

Guillaume

[Divine]

Exact je n'avais pas pensé à cela...

 

Effectivement cela sera plus simple si on peut avoir accès au site.

[gijomloy]

Voila, assez souffert... Apres quelques frayeurs hier soir, le site est enfin en ligne (www.ganda.fr). Ca pourra vous permettre de comprendre le souci que j'ai avec la zone blanche sous le footer quand les pages ont peu de contenu (ex: page d'info). Si quelqu'un trouve une solution elegante, je lui serai immensement reconnaissant.

 

Merci !

[Divine]

Bonjour,

 

Apparemment tu as trouvé une solution car même en allant sur la page d'info, je ne vois pas de zone blanche sous le footer.

 

Au passage jolie adaptation du template

[gijomloy]

Merci beaucoup pour ce retour qui nous fait reellement plaisir.

Sinon je n'ai rien corrige pour le footer et le probleme est toujours visible. Quand tu regardes la page info tu n'as peut-etre pas ouvert ta fenetre de navigateur en grand, ou alors tu as un ecran a la resolution vraiment petite...

[Divine]

Exact en virant mes 40 barres d'outils je vois le problème lol

 

Alors si le problème ne concerne que les pages à faible contenu, tu pourrais peut-être ajouter une hauteur minimum à la div page ?

 

Comme ça les pages à faible contenu auront une hauteur minimum qui permettra de ne pas avoir cette zone blanche sous le footer.

 

Dans ton fichier global.css, ajoutes ceci à la div page:

 

min-height:500px

 

J'ai mis 500px mais tu peux mettre la valeur qui te semble la plus convenable.

[gijomloy]

C'est pas mal ca. C'est une solution a laquelle on a pense au debut mais on ne l'avait pas adopte parce qu'on pensait pouvoir faire mieux. Je reflechirai a quelle valeur a le plus de sens (en analysant les stats Google Analytics sur les tailles d'ecran de nos visiteurs par exemple) et je mettrai ca en place.

+1 de reputation pour toi

[Divine]

Sinon j'ai une autre solution à te proposer qui est un peu moins simple à mettre en place mais qui à l'avantage d'être plus propre et de ne pas poser de problème par rapport aux résolutions d'écran.

 

En gros le principe c'est de rajouter une div qui va englober ton header, ta page et ton footer et à laquelle tu va appliquer le fond que tu as actuellement appliqué au body.

Ensuite tu pourra du coup appliquer la couleur ou l'image que tu souhaites au body pour pouvoir remplir la zone blanche sans impacter le reste du site.

 

Bon je sais mon explication n'est pas très claire mais si tu veux je peux t'aider à mettre ça en place, moi je peux te faire ça en 30 secondes

[gijomloy]

Ben ouais, tu as raison, c'est ca qu'il faut faire ! On s'etait noye dans la complexite du "sticky footer"... J'avoue que ta proposition est allechante. On se contacte en message prive ?

[a-prods]

je ne vois pas en quoi ma solution ne fonctionne pas, j'avais essaye avec le theme d'orinine.

maintenat je l'ai refait avec ton site via firebug et voila ce que j'ai (cf piece jointe)

 

jai mis la couleur sur le htmal et rajouter #ffffff sur le background du body pour que le centre reste blanc

html {
   background-color: #2B2D33;
}
body {
   background: url("http://www.ganda.fr/themes/gandatheme/css/../img/fond-body.png") repeat-y scroll center center #FFFFFF;
   color: #5B646D;
   font-family: Arial,Helvetica,Sans-Serif;
   font-size: 12px;
   text-align: center;
}

 

Maintenant ce que dit Divine marche aussi et reviens au même que d'utiliser la balise html

En gros le principe c'est de rajouter une div qui va englober ton header, ta page et ton footer et à laquelle tu va appliquer le fond que tu as actuellement appliqué au body.

Ensuite tu pourra du coup appliquer la couleur ou l'image que tu souhaites au body pour pouvoir remplir la zone blanche sans impacter le reste du site.

[gijomloy]

Oh dis donc !!! ca marche !!! Sincerement desole d'avoir mis en doute ta suggestion, ca demontre bel et bien mon manque de maitrise. La solution est magnifique et tellement elegante.

+1 de reputation pour toi aussi. Sinon je ne sais pas comment vous remercier tous. En tout cas si un jour vous voyez un truc a acheter sur mon site, faites-moi signe !

Ce forum marche encore vraiment bien et je vais tacher moi aussi de continuer a apporter mon aide (a mon niveau) pour ce qui debutent vraiment.

 

Bonne journee !

[Divine]

Effectivement a-prods ta solution revient au même que la mienne mais est plus simple à mettre en place.

 

gijomloy penses à passer ton post en [RESOLU]

 

Bonne continuation

[gijomloy]

Pour info, il y a quand meme un petit truc bizarre. Quand j'active l'option de "smart cache" pour les feuilles de style, lorsque la page a un faible contenu alors on ne voit pas le fond blanc avec les ombres, mais juste le fond blanc. Sous le footer ca reste toujours gris. Bon, pour moi ca ne pose pas de pb, j'activerai juste pas cette option...