AccueilMembresGroupesS'enregistrerConnexionRechercherFAQ

Poster un nouveau sujetRépondre au sujetPartagez|

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

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


Nombre de messages : 2466
Âge : 25

Voir le profil de l'utilisateur http://abysse-yclette.deviantart.com/


Abysse Yclette
Représentante de l'Equilibrium
Message Sujet: [Tutoriel] Base du html : modifier présentation des messages | Sam 5 Nov 2011 - 23:46


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.



Spoiler:
 


Dernière édition par Abysse Yclette le Ven 19 Sep 2014 - 16:52, édité 19 fois
Revenir en haut Aller en bas
avatar


Nombre de messages : 2466
Âge : 25

Voir le profil de l'utilisateur http://abysse-yclette.deviantart.com/


Abysse Yclette
Représentante de l'Equilibrium
Message Sujet: Re: [Tutoriel] Base du html : modifier présentation des messages | Sam 5 Nov 2011 - 23:48


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'>









Spoiler:
 


Dernière édition par Abysse Yclette le Mar 23 Juil 2013 - 19:48, édité 11 fois
Revenir en haut Aller en bas
avatar


Nombre de messages : 2466
Âge : 25

Voir le profil de l'utilisateur http://abysse-yclette.deviantart.com/


Abysse Yclette
Représentante de l'Equilibrium
Message Sujet: Re: [Tutoriel] Base du html : modifier présentation des messages | Dim 6 Nov 2011 - 0:06


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 ? =)



Spoiler:
 
Revenir en haut Aller en bas
avatar

Dirigeant du Cam Serarna

Nombre de messages : 14917
Âge : 25

Voir le profil de l'utilisateur http://viederoliste.fr


Marek
Dirigeant du Cam Serarna
Message Sujet: Re: [Tutoriel] Base du html : modifier présentation des messages | Dim 6 Nov 2011 - 15:21


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





Héhéhé:
 



Revenir en haut Aller en bas
avatar


Nombre de messages : 5435
Âge : 21

Voir le profil de l'utilisateur


Kylar Stern
Message Sujet: Re: [Tutoriel] Base du html : modifier présentation des messages | Dim 6 Nov 2011 - 15:23


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




Revenir en haut Aller en bas
avatar


Nombre de messages : 2665
Âge : 24

Voir le profil de l'utilisateur


Liv de Sula
L'Oeil
Message Sujet: Re: [Tutoriel] Base du html : modifier présentation des messages | Dim 6 Nov 2011 - 15:32


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 !


Revenir en haut Aller en bas
avatar


Nombre de messages : 2466
Âge : 25

Voir le profil de l'utilisateur http://abysse-yclette.deviantart.com/


Abysse Yclette
Représentante de l'Equilibrium
Message Sujet: Re: [Tutoriel] Base du html : modifier présentation des messages | Dim 6 Nov 2011 - 21:55


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 =)



Spoiler:
 
Revenir en haut Aller en bas
avatar


Nombre de messages : 575
Âge : 36

Voir le profil de l'utilisateur http://www.lesguerresinfinies.1fr1.net


Locke D'Arkan
Message Sujet: Re: [Tutoriel] Base du html : modifier présentation des messages | Dim 27 Nov 2011 - 20:28


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


Pourquoi craindre tes dernières paroles Invité ? Tu ne seras plus là pour en subir les conséquences...
Revenir en haut Aller en bas
avatar

Dirigeant du Cam Serarna

Nombre de messages : 14917
Âge : 25

Voir le profil de l'utilisateur http://viederoliste.fr


Marek
Dirigeant du Cam Serarna
Message Sujet: Re: [Tutoriel] Base du html : modifier présentation des messages | Lun 28 Nov 2011 - 12:02


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





Héhéhé:
 



Revenir en haut Aller en bas
avatar


Nombre de messages : 575
Âge : 36

Voir le profil de l'utilisateur http://www.lesguerresinfinies.1fr1.net


Locke D'Arkan
Message Sujet: Re: [Tutoriel] Base du html : modifier présentation des messages | Lun 28 Nov 2011 - 13:19


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 ^^


Pourquoi craindre tes dernières paroles Invité ? Tu ne seras plus là pour en subir les conséquences...
Revenir en haut Aller en bas
avatar

Dirigeant du Cam Serarna

Nombre de messages : 14917
Âge : 25

Voir le profil de l'utilisateur http://viederoliste.fr


Marek
Dirigeant du Cam Serarna
Message Sujet: Re: [Tutoriel] Base du html : modifier présentation des messages | Lun 28 Nov 2011 - 13:46


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





Héhéhé:
 



Revenir en haut Aller en bas
avatar


Nombre de messages : 2466
Âge : 25

Voir le profil de l'utilisateur http://abysse-yclette.deviantart.com/


Abysse Yclette
Représentante de l'Equilibrium
Message Sujet: Re: [Tutoriel] Base du html : modifier présentation des messages | Sam 27 Avr 2013 - 16:10


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)



Spoiler:
 
Revenir en haut Aller en bas
avatar


Nombre de messages : 5435
Âge : 21

Voir le profil de l'utilisateur


Kylar Stern
Message Sujet: Re: [Tutoriel] Base du html : modifier présentation des messages | Mar 30 Avr 2013 - 23:20


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




Revenir en haut Aller en bas
avatar


Nombre de messages : 2466
Âge : 25

Voir le profil de l'utilisateur http://abysse-yclette.deviantart.com/


Abysse Yclette
Représentante de l'Equilibrium
Message Sujet: Re: [Tutoriel] Base du html : modifier présentation des messages | Mer 1 Mai 2013 - 11:49


Je suis contente que ca ait pu t'aider Wink



Spoiler:
 
Revenir en haut Aller en bas
avatar


Nombre de messages : 2466
Âge : 25

Voir le profil de l'utilisateur http://abysse-yclette.deviantart.com/


Abysse Yclette
Représentante de l'Equilibrium
Message Sujet: Re: [Tutoriel] Base du html : modifier présentation des messages | Mar 23 Juil 2013 - 19:57


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



Spoiler:
 
Revenir en haut Aller en bas
avatar

Dirigeant du Cam Serarna

Nombre de messages : 14917
Âge : 25

Voir le profil de l'utilisateur http://viederoliste.fr


Marek
Dirigeant du Cam Serarna
Message Sujet: Re: [Tutoriel] Base du html : modifier présentation des messages | Mar 23 Juil 2013 - 20:03


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





Héhéhé:
 



Revenir en haut Aller en bas
avatar


Nombre de messages : 2466
Âge : 25

Voir le profil de l'utilisateur http://abysse-yclette.deviantart.com/


Abysse Yclette
Représentante de l'Equilibrium
Message Sujet: Re: [Tutoriel] Base du html : modifier présentation des messages | Mar 23 Juil 2013 - 20:09


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



Spoiler:
 
Revenir en haut Aller en bas






Contenu sponsorisé
Message Sujet: Re: [Tutoriel] Base du html : modifier présentation des messages |


Revenir en haut Aller en bas

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

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

Page 1 sur 1

Permission de ce forum:Vous pouvez répondre aux sujets dans ce forum
Brisingr, Chroniques de l'Alagaësia - Forum roleplay :: Préambule :: Grand-Place-
Poster un nouveau sujetRépondre au sujet
Ouvrir la Popote