Discussion :

[Haoru]

Bonjour tout le monde,

Je me retrouve avec un problème sur le développement d'un site, et je m'énerve dessus depuis ce matin, sans trouver d'explication.

Je vous explique ce que c'est :

Tout le long de mon site sur la gauche je veux avoir une image de bamboo.
Elle commence avec le haut du bamboo qui est une image, et ensuite j'ai une autre image du tronc. Je veux donc répéter cette-dernière en fonction de la hauteur de la page, donc je dois la placer sous ma première image, et à une certaine place pour que l'on ne voit pas une cassure.

Cette frise se retrouve sur tout le site, et comme toutes les pages ne sont pas de la même taille je veux pouvoir générer dynamiquement cette répétition d'images du tronc du bamboo.

Je recherche donc la hauteur générale de la page, à laquelle je soustrait la hauteur du haut du bamboo, ce qui devrait me laisser la hauteur que le tronc devrait occuper.

Le problème c'est que lorsque je regarde sur mon site le script s'exécute , mais la valeur de ma hauteur (height) est nulle.

Lorsque que je modifie manuellement la hauteur, via Firebug, l'image est bien là, avec la bonne largeur, le bon placement.... donc le script écrit bien ce qu'il faut dans le fichier css, mais ne récupère pas ma variable height.

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<img src="img/bamboo.png" alt="bamboo" width="158" height="660" style="position: absolute; left: 0; top: 0" />
 
 	<div id="bamboo-infinite">		
	       <script language="javascript">
		var height = document.body.offsetHeight-660;
		document.styleSheets[0].insertRule("#bamboo-infinite {position: absolute;top: 660px;width: 78px;background: url(../img/bamboo-infinite.png) -2px 0 repeat-y;z-index: 1;height :"+height+";}",document.styleSheets[0].cssRules.length);
		</script>
	</div>

Une idée ?

Merci

[SpaceFrog]

heu pourquoi pas juste une image raccordable en background repeat ?

[Haoru]

Heuuu... pardon ?

[SpaceFrog]

pourquoi tenter de faire avec force javascript ce qui se fait tout simplement avec css ..... ???
mets ton image en background de ton div avec un repeat-x ou repeat-y pour que ton image se répète à l'infini sur l'axe des x ou des y ...
http://plambert.developpez.com/tutor...s/images-fond/

[Haoru]

Oui solution envisagée auparavant... sans succès je ne sais pas pourquoi, enfin si je pense savoir pourquoi, mais rien ne s'affichait.

Voici mon code avant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#bamboo-infinite {
	position: absolute;
	top: 660px;
	width: 78px;
	background: url(../img/bamboo-infinite.png) -2px 0 repeat-y;
	z-index: 1;
}

mais comme il n'y avait pas de hauteur spécifiée, cela revenait au même, la div se créait, lorsque je changeait la hauteur sur firebug l'image était belle et bien là.
Mais j'ai besoin de spécifier une hauteur de l'image que je ne peux pas faire seulement grâce au CSS, puisque la hauteur va changer pour chaque page.

[SpaceFrog]

peu importe que la hauteur change pour chaque page, le repeat assure le remplissage quelle que soit la hauteur ?...