28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
je suis nouveau sur le forum et cale sur un problème qui vous semblera certainement facile à résoudre.
Je souhaite faire une mise en page comme montrée sur l'image jointe.
Le cadre vert englobe le tout, sa taille est fonction:
- en largeur, de la taille de la fenêtre du navigateur
- en hauteur, du texte qu'il contiendra.
Les cadres marqués 1 sont en fait des images, chacune de tailles différentes, mais fixes et connues. Elles doivent se loger dans chaque angle du cadre vert.
Les cadres marqués 2 sont constitué d'une image répétée suivant X, ils s'adaptent à la largeur.
Les cadres marqués 3 sont également constitués d'une image répétée, mais suivant Y, ils s'adaptent à la hauteur.
Voilà mon problème, j'espère trouver une solution car cela me bloque pour la suite.
Merci pour vos futures réponses.

upload/10450-cadre.jpg
Modifié par mich (23 Jan 2007 - 15:37)
J'ai oublié un point qui peut avoir son importance: les images marquées 1, 2 et 3 sont transparentes.
Bonjour,
C'est là que le positionnement absolue rend un grand service
mais que l'on regrette l'absence de support et de propriété CSS pour
pouvoir attribuer 2 backgrounds à un élément comme peut le faire Safari.

Ton image de gauche répétées sur l'axe des Y peut être intégré en
background du block initial contenant le texte, celle-ci pourra alors
s'adapter a la hauteur défini par le texte.

Ceci dit je n'ai pas de solution à ta donner pour l'image de droite qui
nécessiterait que tu donnes une hauteur à ton block conteneur vert...
Tes 2 image haute et basse répété en x doivent se loger dans un div auquel
tu dois donner un background avec un repeat-x.
Le block du bas devra avoir on position absolue et un bottom:0.

Les 4 images d'angles puevnt toutes être positionnées en abolue
avec les propriété de positionnement adéquat (top, left, right, bottom)
et avec un z-index supérieur à 1 pour pouvoir passer au dessus du reste.
Modifié par Hermann (17 Jan 2007 - 16:30)
Merci pour la réponse,
mais comme je l'ai précisé dans le deuxième message, j'avais oublié de préciser que les images étaient transparentes donc même si je les fais passer au dessus du reste, je vois toujours les autres images par transparence.
J'ai essayé en décalant l'origine des images répétées, ça marche en partie mais pas pour la fin de la répétition qui va se loger sous les images d'angle.
Bonjour,
j'ai quasiment résolu le problème, c'est un peu tarabiscoté mais ça marche nickel avec Firefox. Par contre, il me reste un petit problème lié à un bug Internet Explorer (comme d'hab). J'ai le fameux petit décalage de 3px à côté de mes flottants contenant des images. J'ai trouvé une évocation de ce problème là:
http://www.positioniseverything.net/explorer/threepxtest.html[/url]
mais je n'ai pas tout compris et ça n'a pas l'air de résoudre mon problème.
Si quelqu'un sait comment résoudre ce pb, ça serait vraiment sympa...