Index du Forum




 FAQFAQ   RechercherRechercher   MembresMembres   GroupesGroupes   S’enregistrerS’enregistrer 
 ProfilProfil   Se connecter pour vérifier ses messages privésSe connecter pour vérifier ses messages privés   ConnexionConnexion 

Tutoriel: Bordures.

 
Poster un nouveau sujet   Répondre au sujet     Index du Forum -> Le monde est composé de mots. [Autres.] -> Guides. -> Tutoriels.
Sujet précédent :: Sujet suivant  
Auteur Message

Mélodie Hinuki


Admin'.

Hors ligne

Inscrit le: 02 Mai 2010
Messages: 462
Starter: Evoli [F]
Région de départ: Johto.
Pokédollars: 990 120

MessagePosté le: Sam 18 Juin - 19:50 (2011)    Sujet du message: Tutoriel: Bordures. Répondre en citant

Hello tout le monde !

Ce que je fais ici ? Et bien c'est simple je vais vous apprendre à faire des bordures. Enfin essayer du moins...
Vous êtes prêts ? C'est partit alors !

 

Quelques explications pour débuter



  • Un code bordure est constitué ainsi :
Code:



border: épaisseur type couleur; 




Border
est la bordure, il en existe quatre types : border-top [Bordure supérieure], border-bottom [Bordure inférieure], border-left [Bordure de gauche] et bordure-right [Bordure de droite]. Mais vous pouvez laisser border sans "direction" faisant que tout sera encadré.
Épaisseur est la taille en pixel, vous n'êtes pas obligé d'en mettre en fait cela dépend de ce que vous recherchez. Pixel s'écrit  px et juste devant vous devez mettre un nombre comme 4px par exemple.
Type est la façon dont est faite la bordure : border: solid [Bordure normale], border: dotted [Bordure en pointillé], border: dashed [Bordure en petit tiret], border: groove [Bordure en relief double], border: inset [Bordure en relief intérieur], border: outset [Bordure en relief extérieur] et border: double [Bordure double].
Couleur est le code html de la couleur utilisée.

  • Au début du code vous devez ajouter :
 
Code:




 <p style="..."> Texte </p>



  • Oui, mais que peut-on mettre en plus ?

L'alignement du texte noté text-align, il y en a quatre : text-align: left [Texte aligné à gauche], text-align: right [Texte aligné à droite], text-align: center [Texte centré] et text-align: justify [Texte justifié].
Un background est un fond, on en dénombre trois : background: #XXXXXX [Fond coloré], background-image: url('url de l'image') [Fond avec une image] et background: transparent [Fond transparent].
Un padding ou plutôt un remplissage est ce qui correspond à la distance entre le texte et les bords. Il existe le padding-bottom [Remplissage inférieur], padding-top [Remplissage supérieur], padding-left [Remplissage de gauche] et le padding-right [Remplissage de droite.]. Étant donné qu'il y a une "taille" à mettre vous devrez ajouter px après les deux points que l'on ne voit pas ici. Tout comme le border vous pouvez laisser padding sans "direction".

  • Et si on ne désire pas que l'encadrement fasse toute la longueur de la page ?

Donc, sachant que le code pour toute la longueur est :
 
Code:




 <p style="border: ...;"> Texte </p>



Pour un mot se sera :
 
Code:




 <span style="border: ...;"> Mot </span>



Et pour un texte entier :
 
Code:




 <div style="border: ...;"> Texte </div>



   
   

_________________
"Vivre chaque jour telle une nouveauté..."


Dernière édition par Mélodie Hinuki le Sam 18 Juin - 21:33 (2011); édité 1 fois
Revenir en haut
Visiter le site web du posteur

Publicité








MessagePosté le: Sam 18 Juin - 19:50 (2011)    Sujet du message: Publicité

PublicitéSupprimer les publicités ?
Revenir en haut

Mélodie Hinuki


Admin'.

Hors ligne

Inscrit le: 02 Mai 2010
Messages: 462
Starter: Evoli [F]
Région de départ: Johto.
Pokédollars: 990 120

MessagePosté le: Sam 18 Juin - 21:31 (2011)    Sujet du message: Tutoriel: Bordures. Répondre en citant

Dans cette deuxième partie ce seront des exemples. Oui le tuto est divisé en deux...

Et en exemple ça donne...


  • Sur "un mot" (Sur une phrase ici) :
Bordure inférieure normale..
Code:

<span style="border-bottom: solid 3px #CC66CC;"> Bordure inférieure normale..</span> 

Bordures gauche et droite en pointillé.
Code:

<span style="border-left: dotted 2px #CC66CC; border-right: dotted  2px #CC66CC;"> Bordures gauche et droite en pointillé.</span>


Bordure supérieure intérieure.
Code:

<span style="border-top: inset 4px #CC66CC;"> Bordure supérieure intérieure.</span>

Bordure complète tirets..
Code:

<span style="border: dashed 2px #CC66CC;"> Bordure complète tirets..</span>

  • Sur un texte :
Pierre Reverdy est un poète français ayant utilisé le cubisme dans ses poèmes. Il fait partie du courant surréaliste sans y être entrer et à travailler avec Pablo Picasso ainsi que George Braque. Le Chant des morts est le recueil qu'il à écrit lorsqu'il était à l'abbaye de Solesme.

Code:

<div style="border: dashed #CC66CC; background: #CCCCCC;"> Pierre  Reverdy est un poète français ayant utilisé le cubisme dans ses poèmes.  Il fait partie du courant surréaliste sans y être entrer et à travailler  avec Pablo Picasso ainsi que George Braque. Le Chant des morts est le  recueil qu'il à écrit lorsqu'il était à l'abbaye de Solesme.</div>

Un lieu perdu, une dynastie déchue. Le monde est mort petit à petit, le sauveur n'est jamais apparu. Pourtant la rosée des sentiments perdure dans l'humanité, du moins dans ce qu'il en reste. Qui verra encore ce monde comme avant ?

Code:

<div style="background-image:  url('http://3.bp.blogspot.com/_NXc4EJhwD4Y/SY2nsNL_cTI/AAAAAAAAARs/sKjYGAulHzc/s400/Feuillage+prune.JPG');  border: 1px solid #FFFFCC;"> Un lieu perdu, une dynastie déchue. Le  monde est mort petit à petit, le sauveur n'est jamais apparu. Pourtant  la rosée des sentiments perdure dans l'humanité, du moins dans ce qu'il  en reste. Qui verra encore ce monde comme avant ?</div>


_________________
"Vivre chaque jour telle une nouveauté..."
Revenir en haut
Visiter le site web du posteur

Contenu Sponsorisé








MessagePosté le: Aujourd’hui à 02:40 (2017)    Sujet du message: Tutoriel: Bordures.

Revenir en haut
Montrer les messages depuis:   
Poster un nouveau sujet   Répondre au sujet     Index du Forum -> Le monde est composé de mots. [Autres.] -> Guides. -> Tutoriels. Toutes les heures sont au format GMT + 2 Heures
Page 1 sur 1

 
Sauter vers:  

Index | creer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Powered by phpBB © 2001, 2005 phpBB Group
Traduction par : phpBB-fr.com