Compréhension sur le CSS

Version imprimable

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:

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>

20/10/2015, 17h13
Jacques Beauregard
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:

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

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.
20/10/2015, 19h01
NoSmoking

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
:faq: Comment appliquer plusieurs styles à un élément ?
23/10/2015, 12h18
eleydet
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:

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>
23/10/2015, 14h02
Muchos

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.
23/10/2015, 14h30
eleydet

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.
23/10/2015, 18h00
Invité
Bonjour,

Citation:

Envoyé par eleydet

Il me semble que le problème provient d'un bogue du navigateur Firefox.

Bien sûr ! Et personne ne l'avait remarqué avant toi ! :roll:

=> A partir du moment où tu utilises le doctype <!DOCTYPE html>, tu t'engages à respecter les recommandations du HTML5.

Cela implique entre autres de respecter la hiérarchie et la sémantique des balises HTML.

Si tu veux insérer un élément "inline-block" dans du texte, il faut utiliser une balise "neutre"* comme <span>.
* : span, b, em, sont des balises par défaut "inline", avec une faible valeur sémantique.

Quant à la hiérarchie :
- ne pas mettre de <div>, ni <ul> dans un <p>
- ... (voir les recommandations, et pratiques du HTML5)
Plus généralement, il n'est pas recommandé de mettre une balise "plus forte" dans une autre, "plus faible" (sémantiquement parlant).

Ce qui peut se traduire par : "Les plus forts mangent les plus faibles" ! ;)
23/10/2015, 19h33
eleydet
Bonsoir,

Pour ma part, je fais la distinction entre :
- une recommandation,
- le respect de la syntaxe.

Ci-dessous, Firefox accepte la première ligne mais trouve une erreur à la troisième. Je trouve cela étonnant...
Code:

1 2 3 <span>un<div>deux</div>trois</span> <br><br> <p>un<div>deux</div>trois</p>
24/10/2015, 08h09
Invité

http://www.w3.org/TR/html5/grouping-content.html