28173 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde!
Je suis en train de bosser sur les styles de ma page (http://www.daoudonek.net/v3/) pour notemment essayer de faire un menu de liens propre en css (mais ça c'est pas le problème) ; le truc c'est que sur ladite page le contenu est au centre, sur fond blanc, avec une ombre à 90° de chaque côté. Seulement l'ennui c'est que le fond est en fait une image transparente d'une largeur fixe avec ombres sur les côtés. Je cherche à rendre les marges (et la largeur de la bande centrale) proportionnelles aux dimensions de la fenêtre, mais si j'applique juste un pourcentage à la colonne centrale, la portée des ombres de chaque côté ne va pas être fixe.
Ça m'avait effleuré l'esprit de passer par un tableau pour faire une petite colonne (de largeur fixe) de chaque côté qui aurait pour fond seulement l'ombre, répétée verticalement, mais j'ai le sentiment que c'est pas vraiment une solution propre... Smiley biggrin
Donc là je sèche. Peut-être en positionnant des boîtes avec le fond d'ombre par dessus les autres de façon à ce qu'elles restent colleés à la colonne de contenu, mais ça ne me dit rien...
Quelqu'un a-t-il une idée?
Merci d'avance
Bonjour,

Tu peux éventuellement travailler avec deux div imbriqués, la div parente dessinant uniquement la bordure de gauche et ayant un padding-left de la largeur de cette bordure, et la div enfant dessinant le fond central et la bordure de droite (image répétée en hauteur, à bord blanc perdu à gauche et alignée à droite). Ou en inversant les côtés, bien sûr.

Problèmes:
- ça risque de ne pas être évident pour le support de la transparence PNG dans IE6 (un peu la flemme de détailler le pourquoi du comment mais en gros je vois un soucis plus ou moins important);
- seul le div parent aura un min-height: 100% efficace... on ne peut pas imbriquer deux éléments en leur donnant à chacun un min-height: 100%, enfin on peut mais le deuxième ne marchera pas...

Bref, ça me semble mal barré pour du relatif. Je vois bien une astuce très tarabiscotée mais ça risque d'être chiant à mettre en place et de limiter les possibilités de dimensionnement du contenu. Donc je n'en parle même pas. Smiley cligne

Verdict (pour ma part): tableau à trois cellules (ou deux, mais dans ce cas on retrouve le problème pour la transparence PNG dans IE6).