| Tutoriel Différent style d'encadrement, ligne ...... | |
|
Auteur | Message |
---|
Chti Chatphardeur Admin
Age : 41 Date d'inscription : 06/10/2011 Messages : 74 Localisation : Nord Emploi/loisirs : Les forums et le PC sans oublier le country Humeur : Bonne
| Sujet: 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 :
- Code:
-
<div style="border: 2px solid #000000; width: 100px;">[center]Exemple[/center]</div> ✓ Encadrement coins arrondi :
- Code:
-
<div style="border: 2px solid #000000; width: 100px; border-radius: 12px 12px 12px 12px;">[center]Exemple[/center]</div> ✓ Effet cadre 2/2 : - Code:
-
<div style="border: 2px solid #000000; width: 100px; border-radius: 12px 0px 12px 0px;">[center]Exemple[/center]</div> ✓ Cadre avec ombre : - 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>
|
|
| |
Invité Invité
| Sujet: 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" ;> |
|
| |
Shasha
Age : 36 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
| Sujet: 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>
|
|
| |
Invité Invité
| Sujet: 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 |
|
| |
Shasha
Age : 36 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
| Sujet: Re: Tutoriel Différent style d'encadrement, ligne ...... Lun 26 Mar - 13:44 | |
| |
|
| |
Invité Invité
| Sujet: Re: Tutoriel Différent style d'encadrement, ligne ...... Lun 26 Mar - 13:56 | |
| |
|
| |
Shasha
Age : 36 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
| Sujet: 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 |
|
| |
Invité Invité
| Sujet: 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:
|
|
| |
Shasha
Age : 36 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
| Sujet: 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...
|
|
| |
Invité Invité
| Sujet: Re: Tutoriel Différent style d'encadrement, ligne ...... Lun 26 Mar - 14:18 | |
| haaa d'accord merci beaucoup |
|
| |
Shasha
Age : 36 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
| Sujet: 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 astucesAjouter -> 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 D'autres soucis n'hésitez pas |
|
| |
Contenu sponsorisé
| Sujet: Re: Tutoriel Différent style d'encadrement, ligne ...... | |
| |
|
| |
| Tutoriel Différent style d'encadrement, ligne ...... | |
|