[Résolu] 3 Background differents

[davzo]

Bonjour,

je vous passe l'éternel question du changement de la couleur du background pour vous solliciter sur une question plus poussée me semble-t-il.

Quelqu'un sais comment définir un "background" diffèrent pour la partie haute du site, le milieu du site et le bas du site ? (genre Header, page, footer sur toute la largeur, voir fichier-joint)

D'après les réalisation que j'ai observé (grâce à Firebug, la structure du site à été changé pour avoir de nouvelle classe... (exemple de site http://www.lesfillesalaviolette.com )

Donc si quelqu'un à une explication de comment faire ??

D'avance merci !

[minirj01]

Bonjour,
Il te faut 1 fond.jpg pour le header, 1 fond.jpg pour le body et 1 fond.jpg pour le footer.
A priori pas besoin de nouvelles classes, sauf si tu veux que tes fonds soient fullscreen (plein écran).

[davzo]

En effet, j'avais dans un premier temps testé la solution avec 3 jpg sur chaque éléments, mais cela ne me convient pas car j'aimerais avoir un effet en "Fullscreen".

Si quelqu'un a déjà un début de solution pour ajouter de nouvelles classes avec 3 styles différents ?

[minirj01]

Exemple pour le footer:
Ancien footer.tpl:

{if !$content_only}

<!-- Right -->

{$HOOK_RIGHT_COLUMN}

<!-- Footer -->

{$HOOK_FOOTER}

{/if}
</body>
</html>

Nouveau footer.tpl:

{if !$content_only}

{$HOOK_RIGHT_COLUMN}

<!-- Footer -->

{$HOOK_FOOTER}

{/if}
</body>
</html>

Et dans le global.css:

#footer {font-size:11px; background: red; clear:both; width:100% !important;}
#footer.inside{width:980px; margin:auto; }

[davzo]

Bonjour,

merci pour la reponse mais cela ne fonctionne pas. :down:

Lorsque je fais la modification dans le fichier footer.tpl, le "footer" continue de garder les propriétés de la page entière.
(voir attachement). la valeur width:100% reste bloqué dans la largeur de la Page qui est de 980px.

je pense qu'il fraudais rajouter une nouvelle Div ?

Si quelqu'un a déjà trouver une solution, je suis preneur !

a+

[davzo]

Personne ? :down:

[Atch]

Salut,

En gros, ton div footer se trouve encore dans le div page ( parent) qui a une largeur de 980 px.

Si tu souhaites que ton footer fasse tout l'écran en largeur il faut fermer la balise page avant le footer... tu me suis?
Regarde dans le fichier footer.tpl de ton theme et fait remonter un avant le

.

V++

Atch

[davzo]

Merci Atch, cela fonctionne !

Avant le code du footer etait ainsi :
------------

{if !$content_only}


<!-- Right -->

{$HOOK_RIGHT_COLUMN}

<!-- Footer -->

{$HOOK_FOOTER}

{/if}

</body>
</html>
----------

J'ai fais monter le /DIV de 2 lignes comme ceci :
-------

{if !$content_only}


<!-- Right -->

{$HOOK_RIGHT_COLUMN}

<!-- Footer -->

{$HOOK_FOOTER}

{/if}
</body>
</html>
---------


Maintenant, je pense que cette manipe ne fonctionne pas pour le header ?
Est ce que je me trompe Atch ? si tu a un solution pour le Heade ça serais cool...

Déjà merci pour le reste !! :cheese:

[Atch]

Bah pour le header c'est un peu pareil.

T'as deux solutions :

1°/ Tu appliques une image en background (que tu répètes en x) dans la balise body avec les deux premières couleurs ( header+central) sachant que ton header aura une hauteur fixe. n'oublie pas d'appliquer la couleur de fond de la ligne central.

2°/ Sortir le div header du div page comme tu as fait pour le footer... et ajouter un autre div dans le header pour centrer le contenu.

Tu me suis?


Bon courage.

V++

Atch

[davzo]

Merci Atch !

je creuserais tes solutions pour le header, mais cela devrais marcher !

Merci encore et très bonne journée !