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
MESSAGES : 704 HUMEUR : Secrète FEAT : Rose Leslie
Points : 468
Want More ?
Fiche Roleplay AGE: 24 ans PROFESSION: Etudiante CAPACITES/MUTATION:
Killy Novak
Law Abiding Citizen
Sujet: Re: Tutoriel html : mise en forme des messages | Mar 23 Juil - 20:20
Agencement Image/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>
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;"
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)
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