ingeni Posté(e) le 31 août 2005 Partager Posté(e) le 31 août 2005 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... Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sentinel Posté(e) le 31 août 2005 Partager Posté(e) le 31 août 2005 Je pourrais sans doute t'aider, mais j'ai un peu de mal à comprendre exactement ce que tu veux... Tu pourrais faire un croquis et mettre un lien sur ta page ? Lien vers le commentaire Partager sur d’autres sites More sharing options...
ingeni Posté(e) le 31 août 2005 Auteur Partager Posté(e) le 31 août 2005 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sentinel Posté(e) le 31 août 2005 Partager Posté(e) le 31 août 2005 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) : 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
ingeni Posté(e) le 31 août 2005 Auteur Partager Posté(e) le 31 août 2005 Merci pour ton aide. J'ai trouvé une solution. Je la vérifie ce soir et la posterai si c'est bon... Lien vers le commentaire Partager sur d’autres sites More sharing options...
ingeni Posté(e) le 31 août 2005 Auteur Partager Posté(e) le 31 août 2005 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 @+ Lien vers le commentaire Partager sur d’autres sites More sharing options...
Messages recommandés
Archivé
Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.