28172 sujets

CSS et mise en forme, CSS3

[Résolu] Faire un dégradé centré

Bonjour à tous,

Je suis en train de préparer une page web avec un contenu qui reste centré dans toutes les résolutions d'écran.
Dans la partie centrale, là où se trouve le contenu, j'ai un dégradé horizontal qui part d'un gris clair à gauche pour arriver à un gris foncé à droite.

Pas de probleme juste là, j'ai une ligne d'1 pixel de haut que je mets en background avec un repeat sur toute la hauteur.

Ce qui me gene, c'est que le contenu étant centré, j'ai une marge à gauche et une à droite du contenu et la taille de cette marge dépend de la largeur de l'écran.

Dans ces deux zones, le fond doit etre uni et faire un raccord avec les extrémités du dégradé. Comment donc gérer ces zones ?

Pour résumer
[zone1: Uni gris clair][zone2 dégradé de clair à foncé][zone3: Uni gris foncé]

La zone 2 largeur fixe, centrée
Zone 1 et zone 3 de largeur inconnue, l'espace pour combler la place libre sur l'écran.

Si la zone 2 était calé à gauche, j'aurais le gris foncé comme couleur générale de page mais là, ça revient presque à gérer deux couleurs d'arriere plan.

Une idée ?

Merci
Modifié par wAx (16 Apr 2010 - 10:53)
La solution que j'utiliserai, serait de faire une image d'un px de haut (comme tu as fais) sur 2500 px de large.
Il y a peu de résolution avec plus de 2500 px de large.

Sinon tu peux faire deux div flottantes de chaque côté, avec pour background-color, la couleur que tu as à chaque extrémité de ton dégradé actuel.
J'ai en effet pensé à la solution du background trop large, centré pour pouvoir tenir dans de grandes résolutions
C'etait ma solution de replis Smiley smile Smiley smile

Mais je pensais qu'il pouvait exister plus propre.

Peux tu me détailler ton idée des div flottants ? J'ai peur de ne pas tout saisir de suite Smiley smile

Merci de ta réponse
Salut, Smiley smile

La solution de l'image extra-size est effectivement la plus courante et la plus simple à mettre en place.

Sinon, si tu veux bricoler je viens de faire ça en vitesse et ça a l'air de fonctionner :
<body>

     <div id="full_height">

          <div id="fond_gauche" class="fonds_styles"></div> <!-- Fond gauche -->
          <div id="fond_droite" class="fonds_styles"></div> <!-- Fond droite -->

          <div id="global">
                    <!-- Conteneur principal centré -->
          </div>

     </div>

</body>
html, body { height:100%; } /* Toute la hauteur de la page */
div#full_height { position:relative; min-height:100%; } /* idem, pour permettre le positionnement absolu des fonds */

div.fonds_styles { position:absolute; top:0; width:50%; height:100%; } /* Styles communs aux deux fonds */

div#fond_gauche { background:blue; left:0; } /* Styles propre au fond gauche */
div#fond_droite { background:green; right:0; } /* Styles propre au fond droite */

div#global { position:relative; z-index:1; } /* Et un z-index pour passer au dessus */
Reste plus qu'à corriger le min-height:100% sur IE6 avec un height:100%.

Beaucoup de code pour pas grand chose au final... Smiley ohwell
Un grand merci pour cette nouvelle solution.
Effectivement, dans le principe, c'est tout simple, on place deux div de 50% de large sous le dégradé central. Je n'y avais pas pensé

Je vais voir quelle solution des deux utiliser mais désormais, j'ai le choix Smiley smile

Encore merci
Arf, en fait c'est un peu plus compliqué que prévu.

Donc une question de plus

Dans la méthode des div flottants, 100% de haut correspond à la taille de l'écran.
Si, dans mon div central j'ai du contenu au point de mettre un ascenseur vertical, les div gauche et droite ainsi que le background du div central s'arrêtent à la hauteur initiale de l'écran.
Je veux dire que si je fais défiler ma page, tout ce qui n'était pas visible initialement se retrouve en fond blanc....

Est ce normal et peut on y remédier.

Merci
wAx a écrit :
Dans la méthode des div flottants
Hein ? Des flottants ? Où ça ? Smiley confus

wAx a écrit :
Si, dans mon div central j'ai du contenu au point de mettre un ascenseur vertical, les div gauche et droite ainsi que le background du div central s'arrêtent à la hauteur initiale de l'écran.
J'ai vérifié ce comportement avant de te proposer la solution, si tu as un problème c'est que tu as mal recopié quelque chose (tu as le height:100% sur html et body, tu as la <div> #full_height et les styles associés ?).

Une page en ligne à montrer, peut-être ?
Sujet clos
Aller à