28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Ayant creer un tableau a 9 cellules (3 colonnes, 3 lignes) afin de mettre en forme du texte entoure de bordures imagees, je cherche a rendre ces bordures duplicables en largeur et hauteur par un multiple entier.

Je m'explique: j'ai tout d'abord dessine sous photoshop le cadre en entier. Puis j'ai decoupe les 4 coins et les 4 bordures. Je les ai respectivement inserees dans mon tableau html/css, la derniere des 9 cellules restant libre pour inserer du texte. La taille, largeur, hauteur du texte va varier et donc mes bordures vont varier de meme.

Ces bordures sont basees sur une image de taille 128px x 20px qui est repetee afin qu'elles s'adaptent a la taille du texte. Le probleme est que, si la repetition de l'image pour la bordure du haut est de 4.5 fois par exemple, il n'y aura pas de continuite entre cette bordure et le coin haut droit (la bordure du haut etant alignee sur le coin haut gauche). Il faudrait donc que la repetition de cette image soit de 4 ou 5 ou un nombre entier tout simplement, qui varie en fonction de la largeur du texte tout en restant entier afin de conserver la continuite de mes bordures et coins..

Les fonctions repeat-x, repeat-y en CSS ne repetent pas l'image par un multiple entier, et j'ai beau recherche sur les forums une propriete specifique, effort en vain..

Merci pour votre aide
Modérateur
bonjour,

heu le tableau , c'est pour faire les "cadres" ?

on peut probablement s'en passer .

Sinon , sans avoir un aperçu de l'image ni du code html/css employé , il est difficile de comprendre ton probleme , s'agit il d'un probleme de raccord ou de fond qui va "trop loin" ?? ou autre ?

++

<edit> or la repetition c'est repeat ou no-repeat , il n'y a pas encore la possibilité de faire autre chose
Modifié par gcyrillus (15 Nov 2006 - 18:28)
C'est vrai que ce serait un peu plus simple avec une image:
upload/9506-tablebottom.jpg

Cet apercu est le bas du tableau, le haut n'etant pas important puisque les bordures sont calees sur les coins du haut, donc pas de probleme de raccord..

Par contre, comme on peut le voir sur l'apercu, les bordures laterales ne se calent pas correctement sur les coins du bas car l'image constituant la bordure n'est pas repetee par un nombre entier..
Modérateur
en reprenant l'image en gif , et en lui donnant un fond transparent , le proble de raccord ne devrait plus posé de probleme.
La difficulté est d'avoir une qualité acceptable et pas de difference de couleurs entre le jpg et le gif a l'affichage.
l'image jointes est pour illustre mon idée et les parties blanches seraient transparentes .

++

upload/2857-9506-tableb.GIF
Modifié par gcyrillus (15 Nov 2006 - 19:57)
merci gcyrillus pour cette idee.. encore est il que je ne vois pas bien comment mettre cela en oeuvre. Mettre les parties blanches de ton image en transparent, ok mais alors il y aura une nette cassure puisqu'a la place du blanc je verrai le background qu'il y a derriere.

il n'y a vraiment aucune commande permettant de multiplier l'image constituant la bordure par un nombre entier?
Modérateur
non, je ne crois pas que ce soit possible, sinon , generé l'image en php a la volée au chargement et redimensionement de la page , c'est plutot lourd et demandes des ressources et de la bande passante.

pour l'image du bas , si elle est superposé aux bordures , on devrait voir le bas des bordures par transparence.

Je conçoit que cela est faisable a partir de balise block mais que le tableau est lui plus "rigide" en effet.

++