18041 sujets

Questions générales et questions de débutants

[Résolu] Div -> Background-image qui se répète

Bonjour,

J'ai une page qui contient 3 divs principaux. Un à gauche et à droite qui répète une image et celui du centre où le contenu est. Le problème est que les images de gauches et de droites, ne veulent pas se répéter si je ne mets pas de "height", mais je veux qu'elles s'ajustent automatiquement en fonction du contenu au centre.

Voici le code Html :

<div id="page">
        <div class="left"></div>
        <div class="center">
            <div class="header">
            </div>
        </div>
        <div class="right"></div>
        <div class="footer"></div>
    </div>


Le css :

#page
{
    margin:0 auto;
    width:788px;
}

.left
{
    background:url(Image/leftside.jpg) repeat-y;
    float:left;
    width:22px;
}

.center
{
    float:left;
}

.right
{
    background:url(Image/rightside.jpg) repeat-y;
    float:right;
    width:22px;
}

.header
{
    background:url(Image/headerFPCCQ.jpg) no-repeat;
    height:133px;
    width:744px;
}

.footer
{
    clear:both;
}


Merci!
Modifié par Kiboumz (01 Feb 2008 - 15:39)
Salut,

J'avais esseyé, mais sans résultat ... je crois que peut-être avec un overflow ou position mis à la (les) bonne(s) place(s) aiderait peut-être, mais où les mettre ... ?
Bonsoir Kiboumz,

Sans les images, sans contenu, tu nous demandes ni plus ni moins que de construire ta page...chercher une image, quelle taille ? Choisir du texte, etc...il n'est pas dit que tu obtiendras une réponse pertinente rapidemment, sans qu'une bonne âme se dévoue (pour peu qu'elle ait du temps a y consacrer)... Smiley cligne
Là perso, j'ai la flemme Smiley lol
Pourrais-tu mettre ce que tu as fait en ligne et nous proposer une url ? Smiley cligne
Bonsoir,
Je pense que ce n'est pas une histoire d'image qui ne se répète pas.
Remplace l'image de fond par une couleur de fond, ajoute un texte dans les div de droite et de gauche, et tu verras que c'est plutôt une histoire de "trois colonnes de hauteur égale indépendamment du contenu".
Pour faire trois colonnes de hauteur égale, il y a plusieurs méthodes, dont certaines expliquées sur ce site.
De plus, si les colonnes de droite et de gauche servent juste à décorer, il faudrait trouver une meilleure méthode.
Bonjour,

Bien vu de la part de Lolololo. Ce n'est effectivement pas un problème d'images de fond qui ne se répètent pas. Les images de fond se répètent parfaitement (du moins je le suppose... il faudrait voir avec la page en ligne), mais uniquement sur la hauteur des blocs concernés. Or, rien n'oblige div.left et div.right à prendre la même hauteur que div.center ou bien la hauteur complète de div#page (moins celle de div.footer peut-être?).

Et comme le dit Lolololo, il ne s'agit pas de colonnes de contenu mais de simples décorations latérales, qui ne se gèrent pas de cette manière.
(En gros et pour simplifier, il faudrait faire une image unique de 788px de large -- c'est un peu trop large, mais passons -- et l'appliquer en image de fond répétée en hauteur de div#page.)
Salut,

Merci pour vos réponses, je pense que le mieux à faire serait de faire une image unique comme le propose Folrent V et Lololo. C'est ce que je vais esseyer.

Merci
Sujet clos
Aller à