28172 sujets

CSS et mise en forme, CSS3

<p> a l'intérieur d'un <code> incompatible avec Firefox

Bonjour !

J'ai un petit souci qui me tarabuste : J'ai ce code :

[...]
<style type="text/css">
code {display:block; border-style: solid;}
</style>



</head>
<body>
<code>
texte un<br/>
texte deux
</code>
</body>


Je m'attends donc logiquement à voir mon code encadré. C'est effectivement ce qui se passe, dans tous les navigateurs.

Mais si je m'aventure à ajouter un paragraphe à la place des sauts de ligne, c'est à dire si j'écris :


<p>texte un</p>
<p>texte deux</p>


à la place de 


texte un <br/>
texte deux


Alors, dans Google Chrome et Internet Explorer 8, ça va toujours bien, mais Firefox me dessine un cadre tout vide (et donc tout plat, style une grande ligne horizontale qui traverse l'écran), et il écrit mon texte un et texte deux EN DESSOUS de l'encadrement...

ça m'ennuie parce que j'ai bien besoin de mettre des balises de type block, comme <p> a l'intérieur de mes <code>...

Mais qu'est ce qu'il se passe-t-il donc ? Suis je rentré dans CSS version quatrième dimension ? Smiley smile
Modifié par Frouppy2 (16 Sep 2009 - 00:58)
Salut,

si tu avais eu la curiosité de regarder le source de la page sur laquelle on se trouve tu aurais pu voir quelque chose du style :
<pre><code>blabla</code></pre>
L'élément PRE permet de formater du texte (espaces, sauts de lignes) sans utiliser de balises.

Pour ce qui est du code que tu veux afficher, il faut remplacer les chevrons < et > des balises par leurs entités html &lt; et &gt; pour qu'elles ne soit pas interprétées par le navigateur (avec php il suffit d'utiliser la fonction htmlspecialchars).
Modifié par Heyoan (16 Sep 2009 - 06:29)
Heyoan a écrit :

L'élément PRE permet de formater du texte (espaces, sauts de lignes) sans utiliser de balises.
[...]
il faut remplacer les chevrons < et > des balises par leurs entités html < et >[...]


En fait, je ne désire pas afficher textuellement les balises, mais bien utiliser des balises de bloc à l'intérieur même de ma balise de bloc <code>.

En l'occurrence, j'ai juste mis l'exemple d'une balise <p> à l'intérieur d'une balise <Code> définie en block.

Il est bien évident que je peux m'en tirer avec un <div class="code"> ou avec des balises <pre>, mais ce qui me chicane c'est que je n'ai pas l'impression d'avoir contevenu à aucune règle avec mon exemple, et Chrome et Internet Explorer affichent un résultat correct, mais Firefox, qui est pourtant censé mieux respecter les standards, me donne ce résultat incompréhensible :

Si vous ouvrez cette page dans IE ou Chrome, ça marche, mais pas Firefox :
[url http://www.info-3000.com/firefoxmarchepas.php
Modifié par Frouppy2 (16 Sep 2009 - 09:30)
Voilà; En fait il n'y a pas beaucoup d'exceptions... Y'a surtout 2 types d'éléments, les blocks et les inlines. On peut pas mettre de block dans des inlines, et c'est tout Smiley smile
FlorentG a écrit :
[...]On peut pas mettre de block dans des inlines, et c'est tout Smiley smile


Si seulement tu avais raison !!! Mais ça c'est dans le CSS version "Disneyland" malheureusement Smiley decu

Laurie-Anne a écrit :
Sauf que ça c'est PAS une exception. C'est la règle de base.


Oui mais ce que je veux dire, c'est que pour moi, ça me parait naturel d'imbriquer des éléments blocs dans d'autres éléments block, et que quand je constate que ça marche dans certains navigateurs et pas d'autres, tu comprends bien que c'est rébarbatif...
Modifié par Frouppy2 (17 Sep 2009 - 16:32)
Frouppy2 a écrit :
Si seulement tu avais raison !!! Mais ça c'est dans le CSS version "Disneyland" malheureusement Smiley decu
Bah, il a raison, je pense que c'est toi qui vois des méchantes sorcières partout.

Frouppy2 a écrit :
Oui mais ce que je veux dire, c'est que pour moi, ça me parait naturel d'imbriquer des éléments blocs dans d'autres éléments block, et que quand je constate que ça marche dans certains navigateurs et pas d'autres, tu comprends bien que c'est rébarbatif...
Bah oui, c'est normal de mettre des éléments blocs dans des éléments blocs... Ce qui ne l'est pas c'est de mettre des éléments blocs dans des éléments inlines.

Le gros problème c'est que tu pense que parce que tu chance l'apparence d'un élément via CSS cela va changer sa nature. Ca c'est pas possible, point.

Bon après HTML c'est pas comme s'il y avait beaucoup d'exceptions à retenir (et le gentil validateur (c'est un peu un bon géni) est là pour te montrer le bon chemin).
Modifié par Laurie-Anne (18 Sep 2009 - 09:36)
Frouppy2 a écrit :
Si seulement tu avais raison !!! Mais ça c'est dans le CSS version "Disneyland" malheureusement Smiley decu

Attention, j'ai parlé de blocks et inlines dans un contexte HTML Smiley smile C'est différent du CSS.

En HTML, block et inline définissent des types d'éléments. Block est un espèce de conteneur. Inline par contre sert juste pour des éléments au sein du texte.

En CSS, block et inline définissent le rendu des éléments. Un block créer une boîte avec dimensions fixables, et provoque un retour à la ligne après. Un inline a des dimensions correspondants au contenu qu'il entoure, et se place sur la ligne courante de texte.

Note qu'en CSS y'a un hybride inline-block, mais pas super-bien géré par tout le monde Smiley lol
FlorentG a écrit :

En HTML, block et inline définissent des types d'éléments. [...] En CSS, block et inline définissent le rendu des éléments.


Ah OK ! Donc quand je redéfinis la balise prédéfinie <code> avec CSS comme ceci :
code {display:block}

Je "contrarie" les deux "pays limitrophes" html et css... Du coup, je commence à comprendre que certaines propriétés de certaines balises prédéfinies, il faut leur fiche la paix...
Je l'ai appris à mes dépens puisque effectivement j'ai osé ce sacrilège, et le résultat ne s'affiche correctement que dans certains navigateurs...

FlorentG a écrit :

Note qu'en CSS y'a un hybride inline-block, mais pas super-bien géré par tout le monde Smiley lol

"Pas super bien géré" ... J'adoooooooooooooore Smiley biggol Je dois dire que cette propriété m'a paru tellement étrange que je n'ai pas eu le courage de l'expérimenter de peur que mon navigateur me saute à la figure Smiley lol
Frouppy2 a écrit :
Je "contrarie" les deux "pays limitrophes" html et css...

En fait nan pas trop. Ils auraient dû utiliser des termes différents. Définir un inline HTML en block CSS ne le transforme pas en block HTML.

J'aurais préféré un truc du style display: container; et display: text; par exemple
FlorentG a écrit :

[...]J'aurais préféré un truc du style display: container; et display: text; par exemple


Ben oui, mais du coup, la balise <code> définie en block par html à laquelle on "greffe" une classe définie en "display : container", ça va merder tout autant dans mon exemple... On retire une confusion pour y adjoindre une autre...

J'aurais préféré qu'il eut été simplement impossible de redéfinir une balise "html inline" en "css block" (Que ça reste sans effet)... Heureusement qu'il y a ce forum et des gens comme toi qui prennent la peine d'expliquer, sinon, tu vois les migraines qu'on se tape
Smiley biggol
Heyoan a écrit :
[...]je ne vois pas bien l'intérêt de rouspéter parce que les spécifications ont été rédigées de cette façon et pas d'une autre... et encore moins alors que tu es en phase d'apprentissage... [...] Peut-être une tournure d'esprit un brin rebelle ? Smiley lol


HA HA ! Non non pas du tout rebelle... mais quand il y a quelque chose qui me chicane, et que je ne comprends pas bien, j'aime bien parfois "couper les cheveux en quatre", mais c'est seulement pour être sûr de bien comprendre... C'est justement parce que que suis en phase d'apprentissage et que je parle avec des spécialistes qui ont visiblement de l'expérience que je m'exprime comme ça...

Mais il est vrai que quand j'étais petit, je posais déjà des questions à mes profs, et au bout d'un moment ils s'énervaient et finissaient par me dire "Parce que c'est comme ça !", du coup, je me la suis coincé le reste de ma scolarité... Smiley bawling ... C'était la minute de psy de Frouppy
Smiley cligne
Frouppy2 a écrit :
Mais il est vrai que quand j'étais petit, je posais déjà des questions à mes profs, et au bout d'un moment ils s'énervaient et finissaient par me dire "Parce que c'est comme ça !", du coup, je me la suis coincé le reste de ma scolarité...
Smiley ravi Ça me rappelle des souvenirs à moi aussi...
Quoi qu'il en soit, le cas d'usage qui consiste à placer un élément P dans un élément CODE me semble très douteux. Je ne vois pas que contenu pourrait correspondre à ça.

Je dirais que le problème ne vient pas des règles du W3C (que Firefox applique ici strictement), mais d'une mauvaise utilisation (et donc d'une méconnaissance) des éléments HTML disponible. Smiley cligne

Frouppy2 a écrit :
Si seulement tu avais raison !!! Mais ça c'est dans le CSS version "Disneyland" malheureusement Smiley decu

Non, c'est dans le HTML version 4.01.

Frouppy2 a écrit :
je constate que ça marche dans certains navigateurs et pas d'autres

C'est une conséquence de la récupération des erreurs. Tu fournis un code faux, et les navigateurs tentent de s'en dépatouiller. Les choix qu'ils font pour cela peuvent être différents; voilà pourquoi il est préférable de ne pas commettre d'erreur. Smiley smile
Sujet clos
Aller à