[Résolu] Border : c'est si gros que je ne vois rien...

... depuis hier !

Bonjour,

Lorsque je mets le court et simple code pour faire de simples bordures, celui-ci fonctionne avec les balises mais pas avec une classe. J'obtiens alors un cadre autour de chaque ligne (et les côtés n'affichent pas de trait vertical) !!!
Exemple :
CSS

h1{
  text-align: center;
  color: red;
  border-style: dashed;
}
 .paragraphe_cadre{
  text-align: center;
  color: red;
  border-style: dashed;
}

HTML
<h1>TITRE ENCADRÉ
</h1>
<p><span class="paragraphe_cadre">CADRE ENGLOBANT TOUT LE PARAGRAPHE : la lalal la lalalalala la lala la lalalla llalala llala lalaalalal lal lalala la lalalalalal la lalal la lalalalala la lala la lalalla llalala llala lalaalalal lal lalala la lalalalalal la lalal la lalalalala la lala la lalalla llalala llala lalaalalal lal lalala la lalalalalal la lalal la lalalalala la lala la lala la.</span>
</p>

Résultats :


Après avoir tout essayé, et plus, je donne ma langue au chat !
Il a un truc de base que je ne vois pas. Ce n'est pas possible !
Merci d'avance.
Firefox, Chrome et IE à jour ne rendent pas ce qu'ils devraient rendre...

Petite précision : un titre sur plusieurs lignes avec h1 par exemple affiche correctement le cadre autour de lui.


C'est à ne rien y comprendre !

slt

en mettent la class sur la balise <p class="paragraphe_cadre" ></p>
ça fonction, du mois chez moi

html

	
<h1>TITRE ENCADRÉ</h1>
<p class="paragraphe_cadre"><span >CADRE ENGLOBANT TOUT LE PARAGRAPHE : la lalal la lalalalala la lala la lalalla llalala llala lalaalalal lal lalala la lalalalalal la lalal la lalalalala la lala la lalalla llalala llala lalaalalal lal lalala la lalalalalal la lalal la lalalalala la lala la lalalla llalala llala lalaalalal lal lalala la lalalalalal la lalal la lalalalala la lala la lala la.</span>
</p>

le css

h1{
  text-align: center;
  color: red;
  border-style: dashed;
}
 .paragraphe_cadre{
  text-align: center;
  color: red;
  border-style: dashed;
}

le résultat


pour t'évité d'écrire des "lalalalala alala lalal" dans tes test et faire des mis en situation plu crédible tu as ce site qui génère du faut texte :
http://fr.lipsum.com/

a écrit :
C'est à ne rien y comprendre !

Et pourtant... C'est tellement simple. Les span sont par défaut des éléments de type en ligne et ce rendu est tout à fait normal.

.paragraphe_cadre {display:inline-block} /* ou display:block */

et la magie opère

Zelalsan a écrit :

Et pourtant... C'est tellement simple. Les span sont par défaut des éléments de type en ligne et ce rendu est tout à fait normal.

.paragraphe_cadre {display:inline-block} /* ou display:block */

et la magie opère

Tout simplement

Ce qui fait que dans l'exemple de camox, en déplaçant la classe directement sur le paragraphe (qui lui a un rendu de type block) cela fonctionne
À quoi sert ce span d'aiileurs ?

Merci pour vos réponses.
La proposition de Camox fonctionne. J'ai en plus enlevé les balises span inutiles (et vides).
Pour la proposition de Zelalsan, je n'ai pas réussi à la faire fonctionner.
Que je garde ou non la balise span dans le html, ça ne donne rien :

<p><span class="paragraphe_cadre_deux">Autre variante

ou

<p class="paragraphe_cadre_deux">Autre variante pour un CADRE

Décidément, il y a des gens peut doués pour l'informatique...

slt a tous

la balises <span></span> et une balise de type inline tout comme <strong></strong> et <em></em> elles sont faite pour ciblé du texte dans des paragraphes et en suite on les style a l'aide du CSS.

plus d'info http://en.wikipedia.org/wiki/Span_and_div

Si ça y est !
J'ai réussi. J'avais oublié de reporter les balises text-align, color et border-style.
Je suivais pourtant un manuel qui n'est pas clair sur ce point.
En fait, span qui fonctionne avec les éléments en ligne ne peut être utilisé à l'intérieur d'une balise bloc comme P donc ?

Merci à vous.
Rosa

Je croyais avoir coché la case résolution.

a écrit :
En fait, span qui fonctionne avec les éléments en ligne ne peut être utilisé à l'intérieur d'une balise bloc comme P donc ?

en mettent un span a l’intérieur d'un paragraphe tu pourras interagir sur ce qui est al'intérieur du span

exemple

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc posuere arcu blandit lobortis elementum. Sed mi sem, rutrum volutpat sollicitudin non, consequat at est. Fusce ultrices <span>consequat nunc eget luctus</span>. Suspendisse potenti. Mauris justo massa, <span>euismod sit amet sapien sit amet</span>, placerat aliquam dolor. In feugiat felis nec dapibus pretium. Sed laoreet, lorem non euismod convallis, 
</p> 

p{color:green;
	font-weight:bold;
}
span{ color:royalblue; 
	font-style:italic;
}

a+

Or un border est, par définition, à l'extérieur d'un span, c'est ça ?
Dit autrement, la propriété border est réservée aux éléments de type bloc ?
Les guides et autres manuels devraient indiquer ce genre de... caractéristique sur les propriétés pouvant prêter à quiproquo.

Rosa_Luxembourg a écrit :
Or un border est, par définition, à l'extérieur d'un span, c'est ça ?
Dit autrement, la propriété border est réservée aux éléments de type bloc ?
Les guides et autres manuels devraient indiquer ce genre de... caractéristique sur les propriétés pouvant prêter à quiproquo.

Non.
Comme expliqué plus haut :
span (balise neutre) a un aspect de rendu en ligne
p a un aspect de rendu block
Tu peux garder le span "en modifiant son mode de rendu" (via la propriété "display"), ce que te proposait Zelalsan :

.paragraphe_cadre {display:inline-block} /* ou display:block */

Ce qui te permettait d'avoir le rendu que tu souhaitais.

Oui, tu peux mettre des span dans des paragraphes pour modifier certaines propriétés par exemple, mais dans l'exemple que tu présentes, cela n'a aucun intérêt, autant appliquer directement la classe au paragraphe.