28220 sujets

CSS et mise en forme, CSS3

bonjour
voila ma demande :
j'ai un bloc div "menu" à gauche, un bloc div "texte" à droite et au milieu un bloc div "image" vide, avec une image en background ds la CSS.
j'aimerais que ce bloc "image" s'étire selon la hauteur relative des 2 autres blocs. Mais en mettant 100% ca ne l'affiche pas ???
merci pour les conseils
Modifié par franzen (21 Jan 2006 - 15:42)
J'aime bien cette question, ces temps-ci elle sort environ une fois par jour sur le forum...

Si ce que tu veux faire c'est « des blocs de même hauteur » mais « sans tableaux » :
1/ c'est pas possible ;
2/ ou alors en utilisant une ruse :
Des blocs de même hauteur sans tableaux
édit par Igor: merci de faire de vrai liens pour les url à rallonge
Smiley lol
Modifié par Igor (21 Jan 2006 - 12:30)
merci mpop pour ton lien mais ca n'est pas vraiment mon probleme car mon post indique "div vide", or la solution indiquée place du texte ds tous les blocs.
Et je veux que mon bloc soit rempli avec une image répétée et non une couleur...
tu met un div qui englobe le tout ( donc ton menu, ton div texte) et tu supprime ton div image vide...ce div qui englobe le tout tu le fais assez grand pour qu'il prenne aussi la place de ton précédent div vide...et tu lui applique un background la ou était ton div vide...Ce qui fait que quand ton contenu va s'agrandir, ton div conteneur va sagrandir aussi, et ton background se repetera...

Bon je sais c'est pas clair mais je pense que çà peut marcher Smiley smile
Modifié par ologram (21 Jan 2006 - 11:51)
franzen a écrit :
merci mpop pour ton lien mais ca n'est pas vraiment mon probleme car mon post indique "div vide", or la solution indiquée place du texte ds tous les blocs.
Et je veux que mon bloc soit rempli avec une image répétée et non une couleur...

Tu fais exactement la même chose, mais avec une image en background plutôt qu'une couleur.
Je te conseille de réviser le positionnement des images de fond en CSS, tu verras que ça permet de faire pas mal de choses.
tout a fait d accord avec Mpop qui m a donné un bon coup de main pour le meme genre de probleme recemment d ou le
a écrit :
J'aime bien cette question, ces temps-ci elle sort environ une fois par jour sur le forum
... Smiley cligne

un div conteneur avec un background-repeat: repeat-y

sam/



......
papillon je pense pas que ca règle son problème...

a écrit :
j'aimerais que ce bloc "image" s'étire selon la hauteur relative des 2 autres blocs


Il ne peut pas spécifier de hauteur vu que celle ci doit ce caller sur les hauteurs des autres div...

Donc comme tout le monde la dit, le div conteneur Smiley smile
Salut, Smiley smile

ologram a écrit :
tu met un div qui englobe le tout ( donc ton menu, ton div texte) et tu supprime ton div image vide...ce div qui englobe le tout tu le fais assez grand pour qu'il prenne aussi la place de ton précédent div vide...et tu lui applique un background la ou était ton div vide...Ce qui fait que quand ton contenu va s'agrandir, ton div conteneur va sagrandir aussi, et ton background se repetera...

Bon je sais c'est pas clair mais je pense que çà peut marcher Smiley smile

Je confirme que ça marche très bien ologram. J'appliques très souvent cette méthode. Il faut penser en terme de recouvrement de motif pour obtenir l'effet voulu, c'est-à-dire l'illusion que le bloc s'adapte suivant les variations des autres blocs. Après de nombreux tests et tatonnements, c'est la méthode la plus simple que j'ai pu trouvé Smiley biggrin
a écrit :
Et si tu donnais à ton div les mêmes dimensions que ton image "background" ?

je ne peux pas car mon image fait 10px de haut (ca fait en qq sorte une jolie bordure) qui doit se trouver au milieu des 2 autres blocs.
Sinon la méthode du container qui englobe le tout me parait inadaptée car mon bloc image ne doit se répéter que ds celui-ci et pas ds les autres blocs.
Bon j'essaie quand meme Smiley cligne
j'ai changé mes blocs : un container, un bloc en float left, un autre en float right, et au milieu ca me laisse un espace inutilisé.
donc je mets maintenant un background image pour le container (qui est en 100% pour la hauteur), cette image fait la largeur du container.
l'image représente, on va dire, un carré avec un trait noir au milieu : le trait apparaitra donc exactement ds l'espace vide entre les 2 blocs.
Géniaaaal

Smiley lol