Problème d'affichage repeat-y

Bonjour,
Parcourant le site depuis de nombreux mois je me décide enfin a m'inscrire pour vous écrire car malgré tout vos excellents tuto un problème me résiste

J'ai un soucis avec le corps de mon site web, en faite ce corps est composé de 3 éléments :

- une div "corps_top" qui contient l'image du haut du corps
- une div "corps_contenu" qui contient comme son nom l'indique le contenu du corps ainsi qu'une image qui me sert de cadre au corps et qui se répète avec repeat-y.
- une div "corps_bas" qui contient l'image du bas du corps.

Jusque la tout va bien, mon problème vient de l'image centrale du corps, celle censé se répéter sur l'axe des y, voici mon image centrale :



Comme vous le voyez cette image ne possède pas de bords rectiligne, or étant donné qu'avec repeat-y l'image s'adapte au contenu ... je ne peux pas l'adapter a l'image du bas de mon corps étant donné que suivant la longueur du contenu les bords ne seront pas au même endroit, j'espère être assez clair :S.

Concrètement qu'est ce que je souhaite faire :

Mon image qui se répète fait 203 pixel de haut, j'aimerai qu'a partir de la 1ère ligne de contenu l'image s'affiche entièrement, ce que le comportement de repeat-y ne permet pas visiblement :S

En gros imaginons que le texte fasse 20 pixel de haut.
A partir de la 1ère ligne l'image de 203 pixel s'affiche complètement, en faite elle s'affiche complètement même si la hauteur des lignes ne fait pas la hauteur de l'image.
Dès que le nombre de lignes de texte dépasse la hauteur de l'image (donc a partir de la 11ème ligne de texte dans notre cas) , alors l'image se répète et s'affiche elle aussi en entier, jusqu'à la 21ème ligne etc.

Voili voilou , tout mon design repose sur cette image qui se répète, je serai bien embêté si aucune solution n'existait :S

Merci d'avance pour vos idées et conseils

Coucou !

Bon pour moi, j'ai une petite idée mais celle-ci ferait recours à du JS...
1) Récupérer la taille de ta div "corps_contenu"
2) Tester cette taille :
- var = hauteur_recupere % 203;

3) Affecter une nouvelle hauteur à ta div
- nouvelle_hauteur = (var+1) * 203) px;

(J'ai pas testé, mais je pense que l'algo est bon)


Mais peut-être que quelqu'un aura une meilleure solution en CSS

Merci beaucoup pour ta réponse Zulie494
Je ne maitrise pas le Javascript mais je vais me renseigner sur ta méthode

Voila un screen du design au cas ou mon explication ne soit pas très clair :



Comme vous le voyez changer d'image de répétition ferait perdre tout son intérêt au design de mon site :S

EDIT : Un grand Merci a toi Zulie494 !

J'ai changé l'algo de calcul mais j'ai suivi le principe que tu me donnais pour en arriver au script suivant :

<script type="text/javascript"> 
 
             var hauteur = document.getElementById("corps_contenu").offsetHeight;
             var i = 0; 
             var new_hauteur = 0; 
			 
             while(hauteur > 203) { 
 
                 hauteur = hauteur - 203; 
                 i++; 
 
             } 
             i++; 

             new_hauteur = i * 203; 
             document.getElementById("corps_contenu").style.height = new_hauteur+"px"; 
			 
         </script> 

Après 4h a me prendre la tête et a chercher pourquoi celui-ci ne fonctionnait pas j'ai fini par remarquer que ma div corps-contenu était une class et non un id -_-

Enfin au final tout marche très bien
Merci encore pour ton aide !
Modifié par Helba (22 Jun 2010 - 14:09)