[Tutoriel] Base du html : modifier présentation des messages

Ecrire dans des cadres

Pourquoi ne pas écrire son texte dans un cadre ? A vous de choisir les contours, la couleur de fond, bref, toute la présentation =)

ㄨ Cadre numéro 1
Description : Un cadre donc le code est tout préparé, il ne vous reste plus qu'à écrire à l'intérieur !

ET HOP C'EST FAIT !

Code:: <div style="border: dotted 1px"><blockquote><table cellspacing="5" cellpadding="0" width="" border="0"><tr><td>VOTRE TEXTE</td></tr></table></blockquote></div>

ㄨ Cadre numéro 2
Description : Un cadre donc le code est tout préparé, il ne vous reste plus qu'à écrire à l'intérieur !

VOUS EN VOULEZ ENCORE ?

Code:: <div class="vignette">VOTRE TEXTE</div>

ㄨ Cadre numéro 3
Description : Cette fois-ci, il s'agit d'un cadre où vous pouvez incorporez un titre/une sorte de légende.

Ca gère hein ?
ENCORE PLUS LA CLASSE !

Code:: <FIELDSET><LEGEND>LE TITRE</LEGEND>
PUIS LE TEXTE</FIELDSET>

Cadres Personnalisés
Description : Même chose que ci-dessus, seulement, cette fois-ci, c'est à vous de personnaliser votre cadre. Après, c'est selon votre goût et vos connaissances en codage !

Explications :
- dotted 1px,double 10px ou encore solid 1px -> Ici, il s'agit de la forme que vous voulez donner au cadre en lui même. "dotted" correspond à un cadre pointillé, "double" à un cadre double tandis que "solid" est un cadre continu. Pour régler l'épaisseur du cadre on modifie le nombre de pixels (px).
- border-radius: 15px; -> Ce bout de code vous permet de modifier les arrondis de votre cadre (0px = bout non arrondis/carré)
- FONT color=#FFFFFF -> cette partie correspond à la couleur de votre texte, il suffit de mettre la valeur hexadécimale (6 valeurs) de la couleur que vous souhaitez.
Pour le reste, il vous suffit d'ajouter le lien de votre image de fond, la couleur et le texte là où c'est indiqué (si vous ne voulez pas d'image de fond, mettez simplement "#" à la place du lien).

Code:: <div style="background-image: url(LIEN DE VOTRE IMAGE DE FOND); border-radius: 15px;"><FONT color=#VOTRE COULEUR> VOTRE TEXTE </FONT></div>

Ps : J'essayerais de proposer d'autres modèle de cadres. En attendant, n'hésitez pas à poster les votre avec quelques explications au besoin.

Agencement Image/Texte

Image à côté d'un Texte
C'est facile, il suffi de créer un tableau avec deux colonnes et une seule ligne. Dans une colonne on met l'image, dans l'autre le texte. Je vous propose deux versions, l'une en BBcode (le code de base proposé dans les messages) et l'une en Html (le langage proposé jusque là dans ce tuto). L'avantage de la version html est qu'elle est entièrement personnalisable (fond, tailles, cadres, ect.).

Exemple :
Elle a vraiment une tête de shoutée n'est ce pas ? On se demande ce qu'elle a bien pu prendre. Qu'elle idée d'utiliser de telles images me direz-vous...

Version BBcode :

Code:

[table][tr] [td][img]LE LIEN DE L'IMAGE[/img][/td] [td]
[list]LE TEXTE[/list][/td] [/tr][/table]

Version Html :

Code:

<table><tr><td><img src="LE LIEN DE L'IMAGE" /></td>
<td>LE TEXTE</td></tr></table>

Texte Ombré
Explications : text-shadow: #000000 0px 0px 5px; -> Voici la partie du code qui vous permet de créer une ombre pour le texte. Vous pouvez la modifier à votre guise. La plupart du temps, j'utilise "text-shadow: #3D3D3D 0px 0px 2px;"

Code:

<span style="font-family: POLICE ; text-align: ALIGNEMENT TEXTE (RIGHT/CENTER/LEFT) ; color: #COULEUR; letter-spacing: ESPACEMENT DES LETTRES (CHIFFREpx); font-size: TAILLE DU TEXTE (CHIFFREpx) ; text-shadow: #000000 0px 0px 5px;"> TEXTE </span>

Ajouter une barre de défilement sur un bloc de texte
Vous souhaitez ajouter une barre de défilement sur un bloc de texte plutôt que de poster un grand pavé ? Rien de plus simple, il s'agit en réalité de modifier le style de votre division en ajoutant un "overflow: auto". Attention, il vous faut également définir une hauteur à cette division. Ainsi, lorsque le texte est trop grand, une barre de défilement apparaît automatiquement =D

En bref ca donne ça :
blabla

blablabla
blablabla

blablabla
blablabla

pouêt !
pouêt !

prout =O

Dans ce code, ne pas oublier de remplacer la valeur "XX" par la hauteur souhaitée en pixels ! x)

Code:

<div style="overflow:auto; height: XXpx;">blabla</div>

Utiliser des polices qui ne sont pas définies sur le forum
Vous pouvez utiliser d'autres polices que celles définies par défaut. Pour cela, il faut vous rendre sur google font et sélectionner les polices qui vous plaisent. Vous devrez poster le code ci-dessous à chaque nouveau message où vous voudrez utiliser une police particulière. Après, il vous suffira d'utiliser les balises "font" classiques en mettant le nom de la police souhaitée (attention, il faudra respecter la casse). Il ne vous reste plus qu'à copier l'url de la police et à remplir correctement le code suivant :

Code:

<link rel="stylesheet" type="text/css" href="LIEN GOOGLE FONT">

Voici quelques polices que vous pouvez utiliser :
Tangerine font, Annie Use Your Telescope, Marcellus SC, Euphoria Script, Dynalight & Satisfy

Code:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope">
<link href='http://fonts.googleapis.com/css?family=Euphoria+Script' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Marcellus+SC' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Dynalight' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>

Hum grosse boulette ! Je voulais mettre ce message dans la Libre-Tribune. Je me suis magistralement trompée (pour une fois que je voulais être utile XD). Hum serait-il possible pour un gentil administrateur de déplacer ce sujet dans l'endroit approprié, de me distruber 50 coups de fouets et de supprimer ce dernier message s'il vous plait ? =)

Mais bien sur, mais comme punition je laisserais les deux derniers message pour montrer ta faute.

Je sais que j'ai pas vraiment à poster ici, mais ce serait pas bien de le mettre en post-it ou annonce parce que dans la LT le topic va descendre dans la page et plus personne ne le verra =S
Quand vous aurez vu ce post supprimer le Wink

C'est postité, mais par contre j'ai pas fait gaffe au mode d'édition et ça a comme annulé le HTML de ta première page, désolée Mr. Green

(Du coup je t'épargne les 50 coups de fouets)

EDIT : J'ai essayé de réparer un peu, mais mes connaissances étant encore imparfaite je pense qu'il faudra que tu finisse de corriger mon erreur ! Encore pardon !

Arg, bon c'est pas grave. J'essayerais de reprendre ça au plus vite dès que j'aurais un peu de temps =)

Edit : Voilà qui devrait être corrigé. Si vous avez la moindre question ou même remarque, n'hésitez pas =)

Abysse, tu pourrais expliquer comment tu fais les cadres avec ascenseurs comme dans ta pres stp ?

Je pense qu'un "overflow: scrolled;" dans le "style" de la div devrait marcher Smile

Ben quand je "cite" son message, ça à l'air plus compliqué que ça. Bien sur je pourrais simplement copier le truc et le modifier mais j'aimerais bien comprendre un peu en fait ^^

Ecoute je vais voir et je tente de t'expliquer à ton passage sur la CB Smile

Ah mince je n'avais pas vu la question de Locke. Bin du coup je réponds ici au cas où ca puisse servir à quelqu'un.
Comme l'a justement expliqué Marek il faut rajouter un "overflow:auto;" dans le style de ta division. Il faut aussi y indiquer la hauteur de ta division. Ainsi, quand le texte devient trop grand pour la hauteur donnée, une barre de défilement apparaît Wink

Du coup ca donne ça dans le style :

Code:: <div style="overflow:auto; height: XXpx;">blabla</div>

Bien entendu, il faut modifier la valeur en pixels (les XX) pour la hauteur x)

En tout cas un grand merci à toi, j'ai pu me faire une fiche un peu plus belle avec ton aide ^^
C'est vraiment bien expliqué et même si je comprend pas tout ça marche quand même et c'est génial Mr. Green

Je suis contente que ca ait pu t'aider Wink

Mise à jour du tutoriel ! Désormais, vous avez des explications pour utiliser des polices qui ne sont pas définies par défaut Wink

Avoue t'as pensé à mettre ça à cause de mon article sur les Gardiens Mr.Gold

Euh c'est la remarque de Charlie sur le jhp à propos du sujet oui =)