Réaliser ce cadre, cette forme..

[Ashlee]

Re-bonjour !
Je suis tombée sur deux forums arborant ce genre de cadre avec texte, qui me plait bien:



J'ai essayé de trifouiller mon CSS, mais rien n'y fait. Quelqu'un n'aurait-il pas le code, la solution ?
Bien à vous

[Invité]

Re
Auriez-vous l'adresse d'un des forums en question, svp?

Merci, d'avance.

Bien à vous,

[Bad Girl]

Bonjour ,
Voici ce que j'ai :
J'espère que ça répondra à tes attentes

Code:

<blockquote><FIELDSET style="border:#514554 3px solid;">
<LEGEND>[font=Georgia][size=28][color=#8c878c]Ton texte[/color][/size][/font]</br></br></LEGEND> Ton autre texte ...</div>

[vpeybernes]

le </div> est faut. C'est </blockquote>.
Les </br> aussi, c'est <br/>. Mais il sont à enlever si on veux que le texte soit centré sur la ligne.
Il faut fermer <fieldset>.
Le bbCode est à renplacé par du HTML si le bloc n'est pas utiliser dans un endroit ou il est compris.

Au final, de manière basique, ça devient

Code:

<blockquote><FIELDSET style="border:#514554 3px solid;">
<LEGEND>Ton texte</LEGEND> Ton autre texte ...</FIELDSET></blockquote>

Si tu en utilise plusieur avec la même mise en forum je te conseil d'enlever style="border:#514554 3px solid;" et de le configurer dans la CSS.

[Ashlee]

Merci, les deux marchent parfaitement ! Par contre, comment réduire la largeur du "cadre" ?

[Threax]

Bonjour,

Vous devez rajouter width: 500px; dans le style de l'élément, ainsi :

Code:

<blockquote><FIELDSET style="border:#514554 3px solid; width: 500px;">
<LEGEND>Ton texte</LEGEND> Ton autre texte ...</FIELDSET></blockquote>

Naturellement vous pouvez modifier 500px par la valeur de votre choix.

[Bad Girl]

Est-ce possible d'avoir des bords arrondis ?

[Threax]

Oui, il suffit de rajouter les 3 codes CSS qui visent à arrondir les angles :

Code:

<blockquote><FIELDSET style="border:#514554 3px solid; width: 500px; -moz-border-radius: 10px; border-radius: 10px; webkit-border-radius: 10px;">
<LEGEND>Ton texte</LEGEND> Ton autre texte ...</FIELDSET></blockquote>

[Bad Girl]

Merci beaucoup ♥

[Ashlee]

Wouhaaa, qualité et rapidité ! Merci énormément ! Clos !

[Bad Girl]

Je n'arrive pas a changer la couleur du cadre ... pourtant je sais comment faire mais ça ne marche pas ...

[Threax]

Il suffit de modifier le code couleur #514554.