World of One Piece
Bienvenue dans World Of One Piece.

Veuillez vous inscrire pour profitez pleinement de nos services.



 
PortailAccueilS'enregistrerConnexion

Partagez | 
 

 Boites barres latérales & alignement balises "blockquote"

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Invité
Invité



MessageSujet: Boites barres latérales & alignement balises "blockquote"   Sam 27 Aoû 2011 - 14:00

Boîte barres latérales : **


J'avais déjà dit que je ferai ce tuto, c'est fait!

Voici le résultat que l'on va obtenir à la fin:

Texte



On peut s'en servir pour modifier à sa guise le fond derrière un texte bien sûr, il y a plus compliqué avec barre en haut et en bas mais là ce sont juste des barres latérales ^^

Mais tout d'abord voici le code personnalisable mais ne pas enlever ni les espaces ni les guillemets ni les points virgules ni même les virgules! Je précise que ce qui est écrit en majuscules sera à remplacer par ce que vous aurez choisi:
Code:
<div style="background-color: #COULEUR-DE-FOND; border-right: LARGEUR-DE-LA-BORDURE-DROITEpx STYLE-DE-LA-BORDURE-DROITE #COULEUR-DE-LA-BORDURE-DROITE; border-left: LARGEUR-DE-LA-BORDURE-GAUCHEpx STYLE-DE-LA-BORDURE-GAUCHE #COULEUR-DE-LA-BORDURE-GAUCHE">Texte</div>


Personnaliser:

La couleur de fond: background-color étant la couleur à l'intérieur de la boîte, il faut la choisir moi je mets ce gris foncé "#666666" mais vous pouvez prendre d'autres couleurs bien sûr par exemple Ici
Code:
<div style="background-color: #666666; border-right: LARGEUR-DE-LA-BORDURE-DROITEpx STYLE-DE-LA-BORDURE-DROITE #COULEUR-DE-LA-BORDURE-DROITE; border-left: LARGEUR-DE-LA-BORDURE-GAUCHEpx STYLE-DE-LA-BORDURE-GAUCHE #COULEUR-DE-LA-BORDURE-GAUCHE">Texte</div>


La largeur de la bordure droite: border-right étant en français "bordure droite" ce qui suivra la concernera jusqu'à "border-left". La largeur de cette bordure est en pixel (abréviation à utiliser "px") le nombre est à coller directement devant px. Moi je choisis 10px
Code:
<div style="background-color: #666666; border-right: 10px STYLE-DE-LA-BORDURE-DROITE #COULEUR-DE-LA-BORDURE-DROITE; border-left: LARGEUR-DE-LA-BORDURE-GAUCHEpx STYLE-DE-LA-BORDURE-GAUCHE #COULEUR-DE-LA-BORDURE-GAUCHE">Texte</div>


Le style de la bordure: voilà ce que je redoute un peu parce que ce sont des codes à connaître par coeur ^^" En voici quelques uns:
"solid", bordure normale
"dashed", bordure en tirets
"dotted", bordure en pointillés
"double", double bordure
"none", sans bordure (revient à la mettre de la même couleur que le fond
Moi je choisis la bordure classique : "solid"
Code:
<div style="background-color: #666666; border-right: 10px solid #COULEUR-DE-LA-BORDURE-DROITE; border-left: LARGEUR-DE-LA-BORDURE-GAUCHEpx STYLE-DE-LA-BORDURE-GAUCHE #COULEUR-DE-LA-BORDURE-GAUCHE">Texte</div>


La couleur de la bordure droite: rien de plus simple! J'ai choisis ce blanc pas vraiment blanc vu le code "#F5F5F5" (le code de blanc normal étant "#FFFFFF"). Donc rebelote, à vous de prendre la couleur : Ici
Code:
<div style="background-color: #666666; border-right: 10px solid #F5F5F5; border-left: LARGEUR-DE-LA-BORDURE-GAUCHEpx STYLE-DE-LA-BORDURE-GAUCHE #COULEUR-DE-LA-BORDURE-GAUCHE">Texte</div>


La bordure gauche est normalement la même que la droite (sauf si vous voulez enlaidir votre boîte) donc comme la droite "LARGEUR-DE-LA-BORDURE-GAUCHE = 10px" "STYLE-DE-LA-BORDURE-GAUCHE = solid" et "COULEUR-DE-LA-BORDURE-GAUCHE = #F5F5F5"
Code:
<div style="background-color: #666666; border-right: 10px solid #F5F5F5; border-left: 10px solid #F5F5F5">Texte</div>



Voilà c'est terminé pour la boîte mais avant de passer à l'alignement, voici quelques boites pour les flemmards:

1.
Texte



Code:
<div style="background-color: #FFFFFF; border-right: 2px dashed #000000; border-left: 2px dashed #000000"> [color=black]Texte[/color]

</div>


2.
Texte



Code:
<div style="background-color: #A2B5BF; border-right: 5px dotted #5F8CA3; border-left: 5px dotted #5F8CA3"> Texte

</div>


3.
Texte



Code:
<div style="background-color: #B78178; border-right: 8px double #895959; border-left: 8px double #895959"> Texte

</div>


L'alignement avec balises blockquote: *



A quoi il sert? A embellir vos message en les alignant au milieu selon ce que vous voulez



Quelle est cette balise? Comment s'en servir?

1. Sur un texte où l'on peut répéter la manip' selon la taille de la colonne qu'on veut.

a. Aucun alignement
"Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte"
Code:
"Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte"

b. Une fois la manip'
"Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte"
Code:
<blockquote> Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte </blockquote>

c. Deux fois la manip'
"Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte"
Code:
<blockquote><blockquote> Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte </blockquote></blockquote>

Bref vous pouvez l'utiliser autant de fois que vous voulez en mettant
Code:
<blockquote>
au début et
Code:
</blockquote>
à la fin.


2. Utiliser avec la boîte

a. On peut l'utiliser uniquement sur le texte:
Code:
<blockquote><blockquote> "Ceci est mon magnifique texte, avec deux fois la balise blockquote. Tout simplement il va suffire de le prendre comme un texte normal et le mettre dans la boite." </blockquote></blockquote>
Je le mets dans la boite :
Code:
<div style="background-color: #666666; border-right: 10px solid #F5F5F5; border-left: 10px solid #F5F5F5 "><blockquote><blockquote> "Ceci est mon magnifique texte, avec deux fois la balise blockquote. Tout simplement il va suffire de le prendre comme un texte normal et le mettre dans la boite." </blockquote></blockquote>
</div>
Ce qui donne :
"Ceci est mon magnifique texte, avec deux fois la balise blockquote. Tout simplement il va suffir de le prendre comme un texte normal et le mettre dans la boite."


b. On peut l'utiliser sur la boite pour qu'elle soit recentrée
On va donc utiliser en mettant avant le début des balises boites:
Code:
<blockquote><blockquote> <div style="background-color: #666666; border-right: 10px solid #F5F5F5; border-left: 10px solid #F5F5F5 ">"Ceci est mon magnifique texte mais c'est notre boite (le truc qui entoure) qui est centrée et le texte a suivi"
</div></blockquote></blockquote>
Ce qui donne:
"Ceci est mon magnifique texte mais c'est notre boite (le truc qui entoure) qui est centrée et le texte a suivi"


© Tutoriels by Zep' copie partielle ou totale interdite


Dernière édition par Dada le Lun 13 Fév 2012 - 11:01, édité 1 fois
Revenir en haut Aller en bas
Menalf
Capitaine pirate
Capitaine pirate
avatar

Nombre de messages : 1570
Age : 25
Localisation : Pique un somme à côté du One Piece
Utilité : -459944
Date d'inscription : 28/11/2009

Fiche perso
Réputation:
0/0  (0/0)
Infos générales:
Niveau:
1/1  (1/1)

MessageSujet: Re: Boites barres latérales & alignement balises "blockquote"   Sam 27 Aoû 2011 - 16:55

Ty pour ce tuto
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: Boites barres latérales & alignement balises "blockquote"   Sam 27 Aoû 2011 - 17:55

MA-GI-QUE depuis le temps que je cherche comment on fait!
Merci beaucoup!
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: Boites barres latérales & alignement balises "blockquote"   Sam 27 Aoû 2011 - 17:56

De rien à vous ^^"
Revenir en haut Aller en bas
Shuhei-Hisagi
Boulet Du Mois
Boulet Du Mois
avatar

Nombre de messages : 321
Age : 21
Utilité : -17
Date d'inscription : 19/12/2011

Fiche perso
Réputation:
1/1  (1/1)
Infos générales:
Niveau:
300000/300000  (300000/300000)

MessageSujet: Re: Boites barres latérales & alignement balises "blockquote"   Mar 20 Déc 2011 - 18:24

Merci Pour le Tuto .
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Boites barres latérales & alignement balises "blockquote"   

Revenir en haut Aller en bas
 
Boites barres latérales & alignement balises "blockquote"
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Alignement Islanders
» Alignement Tampa Bay
» alignement minnesota
» Boites de rangement
» Alignement des Sabres de Buffalo

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
World of One Piece :: Accueil :: Tutoriels-
Sauter vers: