Forum de référencement de vos bébés, petit trésor ou l'on ne se prend pas là tête et ou vous trouverez sans aucun doute une aide.
 

Partagez | 
 

 Tutoriel Différent style d'encadrement, ligne ......

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Chti Chatphardeur
Admin
avatar

Féminin Scorpion Chien Age : 36 Date d'inscription : 06/10/2011
Messages : 74
Localisation : Nord
Emploi/loisirs : Les forums et le PC sans oublier le country
Humeur : Bonne

MessageSujet: Tutoriel Différent style d'encadrement, ligne ......   Ven 7 Oct - 12:42


Tutoriel
Ligne &
Enncadrement
Tuto par : Le Chti Chatphardeur
Aperçut : Dans ce Tuto
Niveau : Facile
Code : HTML / CSS
.


✓ Voici les appellation selon le style que vous souhaité avoir :
    "solid"
    "dotted"
    "dashed"
    "double"
    "groove"
    "inset"
    "ridge"
    "outset"
Les quatre dernières donnent ce rendu uniquement en encadrement.

✓ Voici les codes pour réaliser des lignes :
  • Ligne sur le bas :
    Code:
    <div style="border-bottom: 2px solid; width: 100px;"></div>
  • Ligne sur le haut :
    Code:
    <div style="border-top: 2px solid; width: 100px;"></div>
  • Ligne à droite :
    Code:
    <div style="border-right: 2px solid; height: 100px;"></div>
  • Ligne à gauche :
    Code:
    <div style="border-left: 2px solid; height: 100px;"></div>


✓ Encadrement simple :

Exemple
Code:
<div style="border: 2px solid #000000; width: 100px;">[center]Exemple[/center]</div>

✓ Encadrement coins arrondi :

Exemple
Code:
<div style="border: 2px solid #000000; width: 100px; border-radius: 12px 12px 12px 12px;">[center]Exemple[/center]</div>

✓ Effet cadre 2/2 :
Exemple
Code:
<div style="border: 2px solid #000000; width: 100px; border-radius: 12px 0px 12px 0px;">[center]Exemple[/center]</div>

✓ Cadre avec ombre :
Exemple
Code:
<div style="border: 2px solid #000000; width: 100px; border-radius: 12px 0px 12px 0px; box-shadow: 2px 2px 3px #FFFFFF;">[center]Exemple[/center]</div>
Remplacer "solid" par le style souhaiter. "wigth" & "height" corresponde à la taille en pixel de la barre. "2px" Est l'épaisseur de la barre.
Pour une couleur différente du texte ajour là : "border-top: 2px solid ICI;"
Ce qui donnerait :
Code:
<div style="border-top: 2px solid #FF0000; width: 100px;"></div>

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://le-chti-chatphardeur.forumgratuit.org
Invité
Invité



MessageSujet: Re: Tutoriel Différent style d'encadrement, ligne ......   Ven 2 Mar - 20:06

cooment rajouter un fond ??
J'ai mis ceci et cela ne fonctionne guere
Code:
<div style="border: 3px solid #000000; width: 600px; border-radius: 12px 12px 12px 12px; background-image: url:"http://i77.servimg.com/u/f77/11/57/01/99/img_3710.jpg"
;>
Revenir en haut Aller en bas
Shasha

avatar

Féminin Bélier Dragon Age : 30 Date d'inscription : 07/10/2011
Messages : 82
Localisation : Dans le nord XD
Emploi/loisirs : Forums , Mangas , squattage chez la fonda XD
Humeur : Délirante et chtimique

MessageSujet: Re: Tutoriel Différent style d'encadrement, ligne ......   Sam 3 Mar - 13:40

....


Code:
<div style="background-image: url('http://i77.servimg.com/u/f77/11/57/01/99/img_3710.jpg'); border: 3px solid #000000; -moz-border-radius: 14px; width: 600px;">....</div>


En mettant l'image la première , cela fonctionne mieux donc je te passe ce que moi j'utilise pour mettre un fond. Tu as aussi pour mettre une couleur de fond si tu veux.

...


Code:
<div style="background-color: #02B3DF; border: 3px solid #000000; -moz-border-radius: 14px; width: 600px;">...</div>












Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Invité
Invité



MessageSujet: Re: Tutoriel Différent style d'encadrement, ligne ......   Lun 26 Mar - 12:07

Moi mon texte ce met en un bloc sur le coté de ma page
Revenir en haut Aller en bas
Shasha

avatar

Féminin Bélier Dragon Age : 30 Date d'inscription : 07/10/2011
Messages : 82
Localisation : Dans le nord XD
Emploi/loisirs : Forums , Mangas , squattage chez la fonda XD
Humeur : Délirante et chtimique

MessageSujet: Re: Tutoriel Différent style d'encadrement, ligne ......   Lun 26 Mar - 13:44

Avec un encadré OO ??
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Invité
Invité



MessageSujet: Re: Tutoriel Différent style d'encadrement, ligne ......   Lun 26 Mar - 13:56

ben oui
Revenir en haut Aller en bas
Shasha

avatar

Féminin Bélier Dragon Age : 30 Date d'inscription : 07/10/2011
Messages : 82
Localisation : Dans le nord XD
Emploi/loisirs : Forums , Mangas , squattage chez la fonda XD
Humeur : Délirante et chtimique

MessageSujet: Re: Tutoriel Différent style d'encadrement, ligne ......   Lun 26 Mar - 13:57

Faudra me montrer ça et le code aussi OO parce que là ça me paraît bizarre Oo
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Invité
Invité



MessageSujet: Re: Tutoriel Différent style d'encadrement, ligne ......   Lun 26 Mar - 14:09

j'ai pris le code d'ici :
Code:
<div style="border: 2px solid #000000; width: 100px; border-radius: 12px 0px 12px 0px;">[center]Exemple[/center]</div>
mis mon texte à la place du mot exemple et ça donne ça :

Spoiler:
 
Revenir en haut Aller en bas
Shasha

avatar

Féminin Bélier Dragon Age : 30 Date d'inscription : 07/10/2011
Messages : 82
Localisation : Dans le nord XD
Emploi/loisirs : Forums , Mangas , squattage chez la fonda XD
Humeur : Délirante et chtimique

MessageSujet: Re: Tutoriel Différent style d'encadrement, ligne ......   Lun 26 Mar - 14:13

ah oui non je sais pourquoi
C'est la largeur de l'encadrement qu'il faut régler
"Width: 100 px "

Faut l'adapter à la largeur que tu veux et visiblement là faut déjà bien plus grand
Essaie en remplaçant par 400 ou plus...


Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Invité
Invité



MessageSujet: Re: Tutoriel Différent style d'encadrement, ligne ......   Lun 26 Mar - 14:18

haaa d'accord merci beaucoup Razz
Revenir en haut Aller en bas
Shasha

avatar

Féminin Bélier Dragon Age : 30 Date d'inscription : 07/10/2011
Messages : 82
Localisation : Dans le nord XD
Emploi/loisirs : Forums , Mangas , squattage chez la fonda XD
Humeur : Délirante et chtimique

MessageSujet: Re: Tutoriel Différent style d'encadrement, ligne ......   Lun 26 Mar - 14:53

XD je suis fan de ton smiley mais je répondrais simplement que c'est tout bête mais faut le savoir XD comme quoi un truc tout simple peut nous pourrir la vie XD
Je vais en profité pour rappeler deux ou trois petites astuces avec le code

Code:
<div style="border: 2px solid #000000; width: 100px;">[center]Exemple[/center]</div>

border: 2 px -> la largeur qu'on veut pour le trait d'encadrement , suffit de changer le "2" par la valeur qu'on souhaite

Solid : comme dit plus haut c'est le style d'encadrement il suffit donc de le remplacer par le style souhaiter et dont les noms ont été reprit par le chti chat

#000000 : la couleur du trait ici c'est noir mais vous pouvez en avoir d'autre comme exemple :
#ffffff ->blanc
#3366FF -> bleu
#A00E0E -> rouge
Astuce : vous pouvez trouver les codes couleurs via photofiltre ou photoshop

Width : 100 px comme dit plus haut c'est pour régler la largeur
vous pouvez aussi définir une hauteur si vous le souhaitez en ajoutant au code
Height : ...px ;

Autres astuces
Ajouter -> overflow:auto;
comme ceci
Code:
<div style="border: 2px solid #000000; width: 400px;height:50px;overflow:auto;">Texte</div>

blablablablablablablablablablablablablablablablablablablabla
blablablablablablablabla
blablablablablablablablabla
blablabla
blablablablablablbalbal


Attention cet astuce fonctionne que si vous avez préciser une hauteur donc "height" et une largeur donc " width"

Voilà , je pense qu'avec tout cela en prime , cela devrait être complet totalement Wink
D'autres soucis n'hésitez pas


Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Contenu sponsorisé




MessageSujet: Re: Tutoriel Différent style d'encadrement, ligne ......   

Revenir en haut Aller en bas
 

Tutoriel Différent style d'encadrement, ligne ......

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
Le Chti Chatphardeur Pub :: :: Le Chti Chat Service :: :: ✍ Les Tutoriels-
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit