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

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>

Invité

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"
;>

....

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é

Moi mon texte ce met en un bloc sur le coté de ma page

Avec un encadré OO ??

Invité

ben oui

Faudra me montrer ça et le code aussi OO parce que là ça me paraît bizarre Oo

Invité

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:

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é

haaa d'accord merci beaucoup Tutoriel Différent style d'encadrement, ligne ...... 838611

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