Mise en page des messages

[cassy85]

Coucou,

Je cherche comment mettre des encadrés remplis où l'on peut mettre du texte dans mes messages sur le forum.

On m'a dit que c'était des balises pré-codées mais j'ai beau chercher je ne trouve pas et je suis nulle sur ce thème là ^^.

Merci.

[ge80]

bonjour

Quelques précisions.

Voulez-vous écrire un message dans un cadre comme les messages du STAFF sur ce forum ?

Quelle genre de mise en forme voulez-vous ?

Cordialement
ge

[cassy85]

Enfaite ça serait mettre juste un titre pour séparer les différentes parties du messages.

Je sais pas si c'est clair ce que je dis ^^'.

[ge80]

Je pense comprendre : un titre esthétique dans les messages.

[cassy85]

Oui je pense que c'est ça.

[ge80]

Dernière question ; savez-vous utiliser la CSS (feuille de style) qui est bien pratique pour la mise en forme dans les titres ?

Ceci va m'orienter vers des solutions différentes.

[cassy85]

Un peu :s

[ge80]

OK

Je vous propose différentes solutions et vous choisirez.


La première et Sans CSS

à placer dans un message de votre forum.

Code:

<center><div style="width: 85%; height: 80px; border: 1px solid rgb(8, 7, 7); background-color: CornFlowerBlue;" align="center"> <font style="font-size: 35pt; font-family: georgia; text-shadow: rgb(0, 0, 0) 1px 1px 1px; letter-spacing: 2px;"><font color="Black"><br/>TITRE<br/><br/></font></font><div style="height: 7px; border: 1px solid rgb(80, 70, 70); background-color: green;" align="center"></div></div></center>


Vous devez avoir autorisé l'HTML dans votre message.

La deuxième toujours Sans CSS
Mon avatar pourrait être une lettrine,
L'image de fond pourrait être un dégradé de couleur,

Code:

<center><table border="1px" width="80%" background="http://img48.xooimage.com/files/3/e/4/lc-204a6f4.png"> <tr> <td width="150px"><img src="http://r24.imgfast.net/users/2913/10/00/00/avatars/22828-74.jpg"></td><td><center><font style=" font-size: 70pt; font-family: georgia; text-shadow: rgb(0, 0, 0) 15px 15px 15px; letter-spacing: 2px;"><font color="Red">V</font><font color="Black">otre super titre</font></font></center></td></tr></table></center>

Suis-je sur la bonne piste et ai-je bien compris votre question ?

TITRE ( à adapter ) serait le texte séparateur dans votre message...

[cassy85]

Oui, c'est tout a fait dans le style de la première solution proposée.

Merci.

[ge80]

Alors par rapport à la première solution, que souhaitez-vous en plus ou de différent ?

Solution sans CSS

Fond de message modifiable
Images de chaque côté sont aussi modifiables

Code:

<table border="0" style="background-image:url(http://2img.net/i/fa/admin/header.png);  text-align:center; width:80%; height: 100px;">
<tr>
<td valign="center" align="left" style="width:10%;"> <img src="http://r22.imgfast.net/users/2212/78/75/05/smiles/404421.gif"/></td><td valign="center"><span style="font-size: 60px; font-weight: bold; text-shadow:20px 20px 8px black; color:#abbdeb;"><font face="Comic Sans Ms"><br/>Mon titre original<br/><br/><br/></font></span></td><td valign="center" align="right" style="width:10%;"> <img src="http://r22.imgfast.net/users/2212/78/75/05/smiles/487470.gif"/></td>
</tr>
</table>

[cassy85]

Par rapport au premier c'était la barre verte que je voulais enlever.

Pour le fond es t-ce possible de mettre une image ?

[ge80]

Tout à fait, mais dans ce cas : une solution plus simple utilisable.

Donner moi le lien de l'image (hébergée avec votre bouton servimg par exemple)

l'image de fond unicolore:

Le codage:

[cassy85]

Voici l'adresse :

Code:

http://www.servimg.com/image_preview.php?i=142&u=14353183

[ge80]

Code:

<table style="background-image:url(http://i65.servimg.com/u/f65/14/35/31/83/sans_t12.png);  text-align:center; width:50%; height: 80px;">
<tr>
<td valign="center"><span style="font-size: 60px; font-weight: bold; text-shadow:30px 10px 5px yellow; color:#000000;"><font face="Comic Sans Ms"><br/>Mon titre original<br/><br/><br/></font></span></td>
</tr>
</table>

[cassy85]

Merci beaucoup ^^.

[ge80]

Cela vous convient-il ?
Avez-vous besoin de renseignements pour modifier le codage ?

[cassy85]

Est ce que c'est possible d'avoir l'image sur une seule ligne ?

[ge80]

Votre image de fond est à agrandir dans ce cas.

La taille du texte va tenir sur une hauteur minimale et l'image sera montrée telle qu'elle est (elle est sur deux lignes).

Réaliser une image avec un seul motif horizontal (qui se répète) et sur une hauteur de 80px ou plus.

Je réalise cette image...

[cassy85]

D'accord j'en demande beaucoup ^^'

[ge80]

C'est avec plaisir

Code:

<table style="background-image:url(http://img63.xooimage.com/files/0/e/6/f-24049c2.jpg);  text-align:center; width:50%; height: 100px;">
<tr>
<td valign="center"><span style="font-size: 60px; font-weight: bold; text-shadow:30px 10px 5px yellow; color:#000000;"><font face="Comic Sans Ms"><br/>Mon titre original<br/><br/><br/></font></span></td>
</tr>
</table>


font-size: 60px -> fixe la taille de la police

[cassy85]

D'accord ^^.

Merci.

[ge80]

Ci dessus : Tiens un vote négatif :lol!:
Ma solution n'a pas dû plaire

Joyeuses fêtes et meilleurs voeux.

Ge