GroupesFAQAccueilRechercherMembresS'enregistrerConnexion

Partagez | 
 

 Tuto HTML #2 - Overflow / Border

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Dragon-blue
Administrateur
Administrateur
avatar

Masculin Nombre de messages : 12949
Date d'inscription : 03/11/2008
Age : 24
Humeur : 5 ans o/

MessageSujet: Tuto HTML #2 - Overflow / Border   Jeu 16 Déc 2010 - 9:38

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.1fr1.net/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:
<img src="http://votre_image.png" />


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:
<div><img src="http://votre_image.png" /></div>


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:
<div style="border: 2px solid white; width: 600px; height: 217px; overflow: auto;"><img src="http://s2.noelshack.com/old/up/okami-5dcfb28f59.jpg" /></div>



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


Dernière édition par Dragon-blue le Lun 15 Avr 2013 - 8:02, édité 1 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Ender
You can't run
You can't run
avatar

Masculin Nombre de messages : 1443
Date d'inscription : 01/03/2010
Age : 22

MessageSujet: Re: Tuto HTML #2 - Overflow / Border   Jeu 16 Déc 2010 - 9:55

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


_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 
Tuto HTML #2 - Overflow / Border
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
Génération Nintendo :: Forums Nintendo :: Dossiers & Tutoriels-
Sauter vers: