AccueilRechercherGroupesS'enregistrerConnexion
Breaking News

Nouveau design : votre avis
De nouveaux Prédéfinis
Concours Estival
A venir : Concours de Votes

Awards
Jen Walker

Toubib de la CB !
Jensen Wicket

Flingueur de la CB !

Votez !
Topsite1 TopVelusia TopFiletduDiable




 

Partagez|

Tutoriel html : mise en forme des messages

Voir le sujet précédent Voir le sujet suivant Aller en bas
avatar

Law Abiding Citizen

Féminin

MESSAGES : 704
HUMEUR : Secrète
FEAT : Rose Leslie

Points : 468

Voir le profil de l'utilisateur http://reve-inverness.forumactif.com/

Want More ?


Killy Novak
Law Abiding Citizen
Message Sujet: Tutoriel html : mise en forme des messages | Mar 23 Juil - 20:09


Écrire dans des Cadres

Propositions de 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 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 2

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 Prédéfinis
Et voici quelques cadres par défaut qui pourront vous être utiles.

Et voici le premier !

Code:
<div class="boxy">Texte</div>

Et le second =)

Code:
<div class="cssactif_fiche"><blockquote>Texte</blockquote></div>


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.


Dernière édition par Killy Novak le Mar 23 Juil - 20:22, édité 2 fois
Revenir en haut Aller en bas
avatar

Law Abiding Citizen

Féminin

MESSAGES : 704
HUMEUR : Secrète
FEAT : Rose Leslie

Points : 468

Voir le profil de l'utilisateur http://reve-inverness.forumactif.com/

Want More ?


Killy Novak
Law Abiding Citizen
Message Sujet: Re: Tutoriel html : mise en forme des messages | Mar 23 Juil - 20:20

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>


Titres Prédéfinis
Code:
<span class="titre3">Titre</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'>






Revenir en haut Aller en bas
avatar

Law Abiding Citizen

Féminin

MESSAGES : 704
HUMEUR : Secrète
FEAT : Rose Leslie

Points : 468

Voir le profil de l'utilisateur http://reve-inverness.forumactif.com/

Want More ?


Killy Novak
Law Abiding Citizen
Message Sujet: Re: Tutoriel html : mise en forme des messages | Lun 29 Juil - 20:09

Alors, si vous avez des questions concernant les codes fournis ci-dessus, n'hésitez pas.

Si vous avez des suggestions de codes pour le tutoriel, n'hésitez pas non plus Laughing 
Revenir en haut Aller en bas





Want More ?


Contenu sponsorisé
Message Sujet: Re: Tutoriel html : mise en forme des messages |

Revenir en haut Aller en bas

Tutoriel html : mise en forme des messages

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Shut Down RPG :: Backstage :: Gallery-
TopBottom
Ouvrir la Popote