Jump to content

[RESOLU][CSS]: image en background


Recommended Posts

Mon problème est le suivant:

Je voudrais afficher deux zones graphiques cote à cote pouvant contenir des textes et des images. Le contenu de ces deux zones étant dynamique, leur hauteur évoluera suivant le contenu affiché.

Cependant, je ve que leurs fonds aient la même hauteur.

Comme solution, j'ai essayé 2 balises div contenues dans une autre. Ceci fonctionne bien si l'on utilise une couleur en fond (cela crée un fond uni).

Or, je veux placer un motif (comprendre un jpg) pour faire apparaitre les deux colonnes...

J'ai testé avec différentes solutions telles que les positionnement en absolu et relatif, les float...

Rien n'y fait, Le rendu sous Firefox n'est pas celui attendu...

Avez-vous déjà eu ce cas de figure ?

Merci

PS: j'ai testé pas mal de solutions venant de Alsa Créations. Je m'approche du résultat attendu sans jamais l'atteindre...

Link to comment
Share on other sites

Le but est d'avoir deux colonnes verticales positionnées l'une à coté de l'autre.

Ces deux colonnes sont de hauteurs différentes à cause de leur contenu qui changent suivant les demandes des visiteurs du site.

Le but est d'avoir un back ground englobant les deux colonnes est donnant l'impression que les deux colonnes sont de taille identique.

Le résultat attendu est plus ou moins expliqué ici.

Link to comment
Share on other sites

Ah d'accord !

hé ben c'est pas dur, il suffit d'utiliser la technique dite des "fausses colonnes" ("faux columns" comme disent les anglais).

Le technique consiste à avoir deux conteneurs transparents (par ex.deux <div> flottés l'un à droite, l'autre à gauche), englobés par un conteneur qui, lui, possède un background (généralement très large et haut de 1 ou 2 px, et répété en Y).

Va voir l'article sur ala (a list apart) :

:francais:http://www.alistapart.com/articles/fauxcolumns/

Si tu dessines ton image de fond de manière à avoir deux colonnes de taille égale, le tour est joué :)

Tu peux voir d'ailleurs cette technique en action sur ma page de liste de DVD, je l'utilise pour avoir une page centrée avec un background à motif (des lignes diagonales).

regarde : http://mlogrus.free.fr/dvd/index.html

et le css : http://mlogrus.free.fr/dvd/style.css

Link to comment
Share on other sites

Donc ayé ça marche....

Le html:

<body>
 <div id ="general">
   <div id="gauche">
        zone gauche
   </div>
   <div id="droite">
        zone droite
   </div>
 </div>
</body>

Le css:

.global {
margin: 0px auto 0px auto;
width: 906px;
height:100%;	
text-align: left;
background: url(../design/bas2.gif) repeat-y;
}

.gauche {
margin:0px auto 0px auto;
float: left;
width: 674px;
height: auto;
background-color:#99FFCC;
}

.droite {
margin:0px auto 0px auto;
float: right;
width: 224px;
height: auto;
background-color:#9999FF;
}

Le background est répété sur toute la page et il suffit de modifier celui des zones différentes.

Voilou

@+

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...