Bonjour,
J'avoue que je sèche lamentablement sur un petit problème de rendu sur un background. Et j'ai beau chercher, je ne trouve pas de solution me convenant (à moins que ça soit tellement simple que ça me passe sous le nez, parfois, plus c'est gros ...)
Ce que je tente de créer :
Une page HTML contenant un <div> ayant pour id "global" qui comme son nom l'indique, englobe la totalité de ma page.
J'ai fait le choix de faire tenir mon site dans du 1024px de large.
Ce <div> possède un background qui est une image (dégradé de couleur) de dimension 1024x1 px.
Donc pour faire simple :
Tout ça fonctionne très bien et je me retrouve donc avec mon site centré au milieu de la page html, moche à souhait (oui, je suis pas très doué en design mais là n'est pas le problème).
Le problème c'est que de chaque côté de mon site pour les résolutions d'écran supérieures à 1024px, j'ai deux bandeaux blancs à gauche et à droite de mon site.
Et je voudrais que le bandeau de gauche ait la couleur 1 du dégradé, tandis que le bandeau de droite ait la couleur 2 du dégradé, histoire d'avoir une certaine continuité.
Et j'y arrive pas ...
Je n'arrive pas à mettre 2 background-color au <body> qui ne soient pas des images.
Je n'arrive pas à mettre 2 images (carrés de 1x1px des 2 couleurs) pour qu'elles prennent chacune 50% de la largeur du <body>.
J'ai crée 2 <div> (appelées #Gauche et #Droite) de width 50% avec chacune la bonne couleur, avec un float:left et un float:right, et ça fonctionnerait bien si j'avais pas le pb de la hauteur :
- Les <div> ne contiennent pas de texte : pas de hauteur et ne sont pas visibles
- Je spécifie une hauteur : elle est obligatoirement fixe. Je mets 100%, le <div> prend bien 100% à l'écran, mais dès que je scrolle ça s'arrête (alors que mon #Global à une hauteur égale à environ 2 fois la résolution de mon écran). J'arrive bien avec un peu de jquery à fixer la taille de mes div (en faisant un truc du style : #Gauche.height(#Global.height)), mais la hauteur de ma page est dynamique et donc, en fonction des accordéons dépliés ou non, mon <div> #Global dépasse parfois mes <div> latéraux ou au contraire est plus petit.
Donc, je sèche et si quelqu'un a une idée, je prends.
D'avance merci.
Manu
P.S. : J'espère avoir été clair. J'ai tendance à trop parler et avoir du mal à être concis.
J'avoue que je sèche lamentablement sur un petit problème de rendu sur un background. Et j'ai beau chercher, je ne trouve pas de solution me convenant (à moins que ça soit tellement simple que ça me passe sous le nez, parfois, plus c'est gros ...)
Ce que je tente de créer :
Une page HTML contenant un <div> ayant pour id "global" qui comme son nom l'indique, englobe la totalité de ma page.
J'ai fait le choix de faire tenir mon site dans du 1024px de large.
Ce <div> possède un background qui est une image (dégradé de couleur) de dimension 1024x1 px.
Donc pour faire simple :
#global {
width:1024px;
height:100%;
margin:0 auto;
background:#Couleur2 url(Couleur1VersCouleur2.gif) repeat-y;
}
Tout ça fonctionne très bien et je me retrouve donc avec mon site centré au milieu de la page html, moche à souhait (oui, je suis pas très doué en design mais là n'est pas le problème).
Le problème c'est que de chaque côté de mon site pour les résolutions d'écran supérieures à 1024px, j'ai deux bandeaux blancs à gauche et à droite de mon site.
Et je voudrais que le bandeau de gauche ait la couleur 1 du dégradé, tandis que le bandeau de droite ait la couleur 2 du dégradé, histoire d'avoir une certaine continuité.
Et j'y arrive pas ...
Je n'arrive pas à mettre 2 background-color au <body> qui ne soient pas des images.
Je n'arrive pas à mettre 2 images (carrés de 1x1px des 2 couleurs) pour qu'elles prennent chacune 50% de la largeur du <body>.
J'ai crée 2 <div> (appelées #Gauche et #Droite) de width 50% avec chacune la bonne couleur, avec un float:left et un float:right, et ça fonctionnerait bien si j'avais pas le pb de la hauteur :
- Les <div> ne contiennent pas de texte : pas de hauteur et ne sont pas visibles
- Je spécifie une hauteur : elle est obligatoirement fixe. Je mets 100%, le <div> prend bien 100% à l'écran, mais dès que je scrolle ça s'arrête (alors que mon #Global à une hauteur égale à environ 2 fois la résolution de mon écran). J'arrive bien avec un peu de jquery à fixer la taille de mes div (en faisant un truc du style : #Gauche.height(#Global.height)), mais la hauteur de ma page est dynamique et donc, en fonction des accordéons dépliés ou non, mon <div> #Global dépasse parfois mes <div> latéraux ou au contraire est plus petit.
Donc, je sèche et si quelqu'un a une idée, je prends.
D'avance merci.
Manu
P.S. : J'espère avoir été clair. J'ai tendance à trop parler et avoir du mal à être concis.
)