28173 sujets

CSS et mise en forme, CSS3

Image de fond différente à gauche et à droite

Bonjour.

Da'bord un petit dessin pour expliquer mon problème:

upload/9971-exemple.gif

J'ai un contenu centré (en gris). Et à gauche j'aimerais un certain background (ici la bande rouge) en repeat-x pour remplir toute la marge gauche. Et idem à droite mais avec les 2 bandes bleues.

La seule solution que j'ai trouvé, c'est une image de 5000px de large, avec la moitié gauche en rouge, l'autre en bleu.

Auriez-vous une solution plus propre (et donc plus pratique) ?

Merci d'avance.
Modifié par <nicolas> (20 Feb 2007 - 11:05)
J'ai essayé avec 3 div. Mais le problème c'est que les largeurs des deux blocs extérieurs varient. J'ai essayé avec width:auto mais ça les fait disparaître.

Je vous mets mon code:
#a { 
width:auto;
height:200px;
background-color:#996666;
float:left;
}

#c {
width:auto;
height:200px;
background-color:#FF0000; 
loat:left;
}

#b {
margin:auto;
width:800px;
height:200px;
background-color:#99CC00;
float:left;
}


et
<body>
  <div id="a"></div>
  <div id="b"></div>
  <div id="c"></div>
</body>

Modifié par <nicolas> (20 Feb 2007 - 11:52)
Des conteneurs imbriqués :


<div id="wrapper">
  <div id="subwrapper">
    <div id="content">
    ...
   </div>
  </div>
<div>


Et enlevez-moi ces "height". Laissez le flux travailler à votre place. Il fait ça beaucoup mieux que n'importe quel auteur de feuille de style Smiley cligne
Modifié par Laurent Denis (20 Feb 2007 - 11:55)
Désolé d'insister mais avec des conteneurs imbriqués, le "subwrapper" est obligé de faire 100% de largeur pour que le "content" puisse être centré dans la page, non? Et donc le wrapper n'apparaître plus du tout.. Smiley decu

(Et pour les hauteurs c'était juste pour ma page de test ou je n'ai pas de contenu.. Smiley cligne )
<style type="text/css">
<!-- 
#wrapper {
background: url(...) repeat-x left top;
padding: 0 0 0 ...px;
width: ...px;
margin: 0 auto;
}
#subwrapper {
background: url(...) repeat-x right top;
padding: 0 ...px 0 0;
}
#content {
background: #...;
}
-->
</style>
</head>
<body>
<div id="wrapper">
  <div id="subwrapper">
    <div id="content">
			...
   </div>
  </div>
<div>
Oui mais mon site doit faire 100% de large. Et donc je ne connais pas la valeur des padding, puisqu'ils varient avec la largeur de la fenêtre.

Mais je crois que je vais essayer de m'en sortir avec ma première solution de l'image de 5000px. Mais c'est le 3e site cette semaine où j'ai ce même problème... Smiley decu

Merci quand même.
Les pourcentages, nom de Zeus, les pourcentages Smiley cligne 

<style type="text/css">
<!-- 
#wrapper {
background: url(...) repeat-x left top;
padding: 0 0 0 ...%;
}
#subwrapper {
background: url(...) repeat-x right top;
padding: 0 ...% 0 0;
}
#content {
background: #...;
}
-->
</style>
</head>
<body>
<div id="wrapper">
  <div id="subwrapper">
    <div id="content">
			...
   </div>
  </div>
<div>

Modifié par Laurent Denis (20 Feb 2007 - 12:42)
Les pourcentages ne vont pas non plus. Smiley decu (je sais je suis pénible mais ça fait un moment que je planche sur le problème...).

Le contenu doit faire 800px de large. Et mes 2 colonnes avec les fonds différents, c'est du remplissage pour aller jusqu'au bord.

Donc en affichage 800x600, elles ne doivent pas apparaître. Et en 1600x1200, chacune fera 400px...
<nicolas> a écrit :
je sais je suis pénible


Disons que ces précisions données dès le départ simplifieraient les choses Smiley cligne 

<style type="text/css">
<!-- 
#wrapper {
background: url(...) repeat-x left top;
}
#subwrapper {
background: url(...) repeat-x right top;
}
#content {
background: #...;
width: ...px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="wrapper">
  <div id="subwrapper">
    <div id="content">
			...
   </div>
  </div>
<div>
Euh... le background-position:left ou right n'a pas d'influence en cas de repeat-x non?

En tout cas chez moi le background du subwrapper vient recouvrir celui du wrapper.

Mais je veux pas t'importuner toute la journée non plus avec ça. Je vais utiliser mon image de 5000px pour l'instant et je laisse le sujet ouvert pour si jamais.

Merci quand même.
Finalement j'ai trouvé une solution...

J'ai 2 div en float:left et width:50% qui me font mon arrière-plan.

Et par-dessus mon contenu en position:absolute.

Par contre ça ne marche que dans le cas d'une image de fond en haut car le fond ne s'étend plus en hauteur.
Oui désolé j'ai un peu zappé. L'image n'est pas très lourde vu que c'est du gif. Environ 1.5ko dans mon cas je crois.
@ Laurent : je trouve pour ma part que la demande était compréhensible dès le premier message de ce sujet. Tu as dû lire de travers et partir sur de fausses bases, car le premier message dit bien qu'il s'agit de remplissage. Je cite :
a écrit :
J'ai un contenu centré (en gris). Et à gauche j'aimerais un certain background (ici la bande rouge) en repeat-x pour remplir toute la marge gauche. Et idem à droite mais avec les 2 bandes bleues.
(Remarque, c'est vrai que ça aurait pu être un poil plus explicite.)

@ Nicolas : si ton image de 5000px de large fait 1.5Ko, aucune réticence à avoir pour l'utiliser comme image de fond pour body. Si elle fait un peu plus, ça ira très bien aussi.
Toutefois, tu peux peut-être limiter à 2000px ? Je connais peu d'écrans en 2000+ px (sauf peut-être sur des écrans 23", mais les navigateurs qu'on y ouvre prennent rarement toute la largeur de l'écran).
Modifié par Florent V. (20 Feb 2007 - 16:57)
<nicolas> a écrit :
Oui désolé j'ai un peu zappé. L'image n'est pas très lourde vu que c'est du gif. Environ 1.5ko dans mon cas je crois.


Alors te prends pas la tête et garde ce que tu as fait.
Sujet clos
Aller à