Repositionnement curieux des balises

**exe2bin** · 24/01/2016, 18h41

Bonjour à tous et bonne année ,
voici un code html :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<HTML>
<HEAD><link rel="stylesheet" type="text/css" href="styles.css"></link><TITLE>Calendrier</TITLE>
</HEAD>
<BODY>
<div class="verhisto">
	<section>
		<span>0%--</span>
		<span>10%-</span>
		<span>20%-</span>
		<span>30%-</span>
		<span>40%-</span>
		<span>50%-</span>
		<span>60%-</span>
		<span>70%-</span>
		<span>80%-</span>
		<span>90%-</span>
		<!--<span>100%-</span>-->
		<div style="height:10em;clear:left;">100%-</div>
		<div class="graphe">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</section>
</div>
</BODY>
</HTML>

et voici sa feuille de style :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
.verhisto div {
	float:left;
}
.verhisto span {
	display:block;
	height:10em;
	clear:left;
}
.verhisto {
	margin:1em;
}
.graphe {
	height:100em;
	border-left:thin solid black;
	margin-top:-99.25em
}
.graphe div {
	width:50px;
	height:32em;
	background-color:#040404;
}

Maintenant, si j'enlève les commentaires de la dernière balise et que j'ajoute ceux
ci à la balise <div> qui la suis j'obtiens tout autre chose !?
C'est comme si toutes les balises fonctionnaient bien sauf la dernière ??
J'aimerais savoir pourquoi ?
Merci d'avance ....

**laurentSc** · 24/01/2016, 20h00

La différence vient du fait que span est une balise inline alors que div est de type block...

**exe2bin** · 24/01/2016, 20h19

La différence vient du fait que span est une balise inline alors que div est de type block...

Certes et c'est pour cette raison que j'introduis

Code :

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

display:block;

dans
la feuille de style. De plus, ta réponse n'explique pas pour quoi le problème se
pose uniquement avec la dernière balise .... autre chose ?

**Inikaam** · 25/01/2016, 10h35

Bonjour exe2bin,

Tu as défini un float: left sur toutes les div de .verhisto, float que tes spans n'ont pas. Nécessairement, ils auront un comportement différent.

**exe2bin** · 25/01/2016, 16h01

Bien sûr ! Et c'est ce que je veux ! Les sont situés les uns sous les autres ; ainsi je leur attribut un clear:left à chacun.
D'ailleurs ,le code fait ce que je désire ;le problème survient lorsque j'enlève la ligne

Code :

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

<div style="height:10em;clear:left;">100%-</div>

en
la remplaçant par

Code :

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

<<span>100%-</span>

. Cela montre que c'est bien le dernier qui fout la merde alors que les autres
fonctionnent comme je m'y attend !

**Inikaam** · 25/01/2016, 17h26

J'entends par là que c'est pas le span, mais bien le div qui pose problème. Avec un float, il déplace ton flux. Essaie de mettre un float: left sur ton dernier span et tu verras que tu as le même résultat qu'avec ta div.

J'ignore à quoi doit ressembler le résultat recherché cependant, j'avais imaginé des barres horizontales mais ce n'est pas ce que je vois, peut-être pourrais-tu préciser ton souhait avec un schéma ?

Repositionnement curieux des balises <span>

CSS

Vue hybride

Discussions similaires

Partager

Partager