Tuto HTML #2 - Overflow / Border

Si jamais vous voulez afficher une image sans la réduire ni déformer la page, il existe une solution.
Il est conseillé d'avoir des bases en HTML pour comprendre ce tuto, essayez donc au moins de regarder celui ci avant de commencer :
http://generation-nintendo.com/t1719-mise-en-forme-d-un-test-grace-au-html

Voici un exemple sur une image...




1ère étape : Prenez le code typique d'une image avec le lien de votre image.
Code:


2° étape : Entourez le code de votre image par la balise Div : c'est une balise universelle qui permet de marquaer en quelque sorte les caractéristiques du code encadré.
Code:


3° étape : Maintenant, il faut rajouter les attributs CSS dans la balise Div afin qu'ils s'appliquent à votre image. On utilise pour cela l'attribut "Style".


Dans cet attribut, on va mettre plusieurs éléments :

Tout d'abord, le plus important : "Overflow" : Il permet tout simplement de couper l'image.
Il prend généralement comme valeur : "auto".

Ensuite, il faut définir la coupe de votre image avec "width" (largeur) et "height" (hauteur).

Et pour finir, simplement pour l'esthétique, vous pouvez mettre une bordure grâce à "border"
Vous pourrez y définir la largeur de votre bordure en pixel, sa forme et sa couleur.
Ex : border: 2px solid white;


Voici les différents types de bordures en HTML :

* none : pas de bordure (par défaut)
* solid : un trait simple.
* dotted : pointillés.
* dashed : tirets.
* double : bordure double.
* groove : en relief.
* ridge : effet 3D.
* inset : autre effet 3D (le block forme un creux).
* outset : encore un autre effet 3D (le block est surélevé).



Une fois fini, voici le code final de votre image coupée :
Code:



Voilà tout ^^
PS : faites des essais en changeant les types de bordures, couleurs et épaisseurs, c'est bien fun.

Cool ton tuto, c'est pas trop chaud, mais pratique x) !!!!