fond extensible

Sujet résolu

18 septembre 2006 à 11:37:12

Bonjours à tous !
J'ai un problème avec mon site. J'ai voulu faire pour la première fois un design extensible. Je m'en suis pas trop mal sortit avec la bannière, mais j'ai un problème avec le fond de la partie centrale du site.

Ce que j'aimerai faire, c'est donner un fond blanc au texte, et mettre à gauche et à droite de ce fond un dégradé (une image) qui se répéterai autant qu'il y a de texte. Le problème, c'est que les deux dégrader (à gauche et à droite) ne s'affichent pas si je ne leur donne pas une taille précise (ce qui est impossible vu que je ne connais pas la longueure du texte).

Voici le code xHTML :

   <div id="centre">
   <div id="centre_gauche"></div>
   <div id="centre_droite"></div>

   partie centrale qui "pousse" les colones vers le bas.<br />

   partie avec du contenu occupant le reste de la largeur<br />

   partie avec du contenu occupant le reste de la largeur<br />
   partie avec du contenu occupant le reste de la largeur<br />
   partie avec du contenu occupant le reste de la largeur<br />
   partie avec du contenu occupant le reste de la largeur<br />
   partie avec du contenu occupant le reste de la largeur<br />

   partie avec du contenu occupant le reste de la largeur<br />

   partie avec du contenu occupant le reste de la largeur<br />
   partie avec du contenu occupant le reste de la largeur<br />
   partie avec du contenu occupant le reste de la largeur<br />
   partie avec du contenu occupant le reste de la largeur<br />
   partie avec du contenu occupant le reste de la largeur<br />
</div>

Et voici le code CSS :

#centre {
margin-left: 243px;
margin-right: 20px;
background-color: #fff;
}

#centre_gauche {
float: left;
width: 7px;
background-image: url("corps_gauche.png");
background-repeat: repeat-y;
}

#centre_droite {
float: right;
width: 7px;
background-image: url("corps_droite.png");
background-repeat: repeat-y;
}

Merci d'avance.

Candygirl

18 septembre 2006 à 11:46:31

Tu peux faire une imbrication de div, de cette manière ton fond occupera la même place que le texte. Quelque chose du genre (ça peut varier selon tes besoins en matière de tranparence):

<div id="centre">
<div id="centre_droite">
partie centrale qui "pousse" les colones vers le bas.<br />

partie avec du contenu occupant le reste de la largeur<br />

partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />

partie avec du contenu occupant le reste de la largeur<br />

partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
</div>
</div>

#centre {
margin-left: 243px;
margin-right: 20px;
padding-left: 7px; /* largeur de ton image de fond de gauche */
background:url("corps_gauche.png") repeat-y;
}

#centre_droite {
padding-right: 7px;
background: #fff url("corps_droite.png") repeat-y top right;
}

celenor

18 septembre 2006 à 12:02:48

Merci beaucoup !
Ca fonctionne parfaitement bien. Par contre, je ne comprend pas pourquoi il faut mettre un padding-right; et un padding-left;

Candygirl

18 septembre 2006 à 18:53:47

Ben en fait tout dépend de ta configuration. Tu peux t'en passer si tu n'as pas de png transparent en appliquant la couleur au #centre. J'ai fait un exemple juste pour donner quelques pistes.

celenor

18 septembre 2006 à 19:17:35

Ok parfait merci.

fond extensible

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

fond extensible

fond extensible

Supprimer

Modérer

Signaler le message aux modérateurs