div/span.

1 pièce(s) jointe(s)

div/span.

Bonjour,

Avant mes explications, voici le code ainsi qu'un screenshot du résultat.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
	<div style="display: block; float: left; height: 100px; width: 500px;" >
		<!--  pour chaque processus -->			
			<span style="height: 27px; display: inline;">
				<span style="background-image: url('gauche.gif'); float: left; width: 8px; height: 27px; float: left; background-repeat: no-repeat; ">
					<!-- <img src="../../ui/images/pixel.gif" width="8" /> -->
				</span>
 
				<span style="	background-image: url('centre.gif'); height: 27px;  float: left; background-repeat: repeat-x; font-family: Arial; font-weight: bold; font-size: 9pt;  padding-top: 5px;">
				  Test de processus
				</span>
 
				<span style="background-image: url('droite.gif'); float: left; width: 30px; height: 27px; float: left; background-repeat: no-repeat; ">
					<!-- <img src="../../ui/images/pixel.gif" width="30" /> -->
				</span>			
			</span>
		<!-- fin pour chaque processus -->		
(....)
	</div>

Le problème, c'est que lorsqu'il y a dépassement de la longueur du div principal (width: 500px) (exemple quand j'ajoute PLUSIEURS processus), ce n'est pas le span englobant un processus qui descend, mais plutôt le sous-span d'un processus (celui de gauche ou droite) qui descend. J'espère que je suis assez clair.

Avez-vous une piste?

Si ton span "conteneur" est toujours de taille identique, mets alors un width dessus, passe-le en display:block et en float:left.

Après de nombreuses recherches et une bonne nuit de sommeil.

Ajouter width: auto; dans le style du conteneur règle le problème! Merci pour tes infos.