Compréhension sur le CSS

**eleydet** · 20/10/2015, 16h39

Bonjour,

Dans le code ci-dessous, je ne comprends pas pourquoi <span class="div"> n'est
pas équivalent à <div>... Si l'un de vous a la solution, je suis preneur.

Cordialement,
Eric Leydet

Code html :

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
<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8">
<style>
.sur { display: inline-block; vertical-align:middle; }
.div { display: block; }
</style>
</head>
 
<body>
<p>Sur cette ligne suit <span class="sur"><span class="div">un texte sur</
span><span class="div">un autre texte</span></span> C'est réussi!</p>
<p>Sur cette ligne suit <span class="sur"><div>un texte sur</div><div>un autre
texte</div></span> C'est raté, pourquoi?</p>
</body>
 
</html>

**Jacques Beauregard** · 20/10/2015, 17h13

Bonjour,

Bon d'une part : il faut éviter de nommer ses classes avec des noms de balise HTML : cela peut porter à confusion.
De plus :

Code :

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

1
2
<span class="divtest">test</span>
<div>test à la ligne suivante</div>

Code :

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

1
2
3
4
5
.divtest 
{
     display: block; 
     background-color:silver;
}

Mon <span> se comporte bien comme un block : le background met en avant la largeur du block qui occupe tout son conteneur (comportement d'un élément block).

Enfin retravailler ta structure HTML car là c'est le bordel...
Cordialement.

**NoSmoking** · 20/10/2015, 19h01

Bonjour,
en plus d'être non conforme ton code, prend l'habitude de bien l'indenté cela devrait te sauter aux yeux, tu peux tirer avantage à lire la

Comment appliquer plusieurs styles à un élément ?

**eleydet** · 23/10/2015, 12h18

Bonjour,

Il me semble que le problème provient d'un bogue du navigateur Firefox.
Si je tape sur les touches crtl et u du clavier pour obtenir le code source de la page, j'obtiens du rouge sur la ligne 11, indiquant une erreur.
Je n'ai lu nulle part qu'il était interdit d'insérer <div>...</div> à l'intérieur de <p>...</p>.

Cordialement,
eleydet

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
 
<!DOCTYPE html>
<html>
 
<head><meta charset="utf-8"></head>
 
<body>
 
<span>un<div>deux</div>trois</span>
<br><br>
<p>un<div>deux</div>trois</p>
 
</body>
 
</html>

**Muchos** · 23/10/2015, 14h02

Peut-être en ne fermant pas la balise P, comme indiqué dans la doc officielle.
Néanmoins, votre structure me semble assez absurde - notamment les DIV dans SPAN et dans P.

**eleydet** · 23/10/2015, 14h30

Bonjour,

La documentation officielle précise que la balise fermante P peut éventuellement être omise dans certains cas. Enfin, c'est ce que je comprends.

> votre structure me semble assez absurde...

Oui et non. L'objectif est de placer un élément de type inline-block dans un texte. Pour l'instant, j'ai choisi SPAN pour cet élément, parce que je ne sais pas trop quoi choisir comme autre élément.

Avec mes salutations.

Compréhension sur le CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager