Svp quelqu'un peut il m'expliquer comment utiliser les %tage?

Fermé
ghisloy Messages postés 89 Date d'inscription mercredi 12 novembre 2014 Statut Membre Dernière intervention 1 août 2016 - 24 nov. 2015 à 18:07
 Iago - 24 nov. 2015 à 18:22
Bonjour
je suis entrain de developper un site. j'utiliser des dimensions en pixels mais qu'elqu'un m a dis que si j'utilise ça, cela ne tiendra pas compte de la taille de l'écran de l'utilisateur final. il m a conseillé d'utiliser les pourcentage cependant, je ne sais pas comment mettre le bon pourcenetage en clair je ne maitrise pas son utilisation
A voir également:

1 réponse

Salut,
Nous parlons donc des dimensions des éléments dans la page indiquées par les longueur et hauteur en CSS.
Ben c'est simple remplacez les dimensions(ou indiquez la) en utilisant une valeur en %.
La valeur width:100% indique 100% (50% la moitié, 120% dépasse de 20% et oblige une barre de défilement)de la largeur totale de l'écran sauf si celui ci est compris dans un autre container qui a une taille fixée.

Ainsi si vous avez un élément de 40% de la largeur maximale et que vous y imbriquez un autre élément de 50% largeur la taille effective de celui ci sera de 40% divisée par 50%(soit 1/2) donc il mesure 20% de la taille totale.
Si on veut aligner horizontalement 5 éléments de même dimension il suffit de leur appliquer à tous une dimension de 20%(20*5=100%), avec 4 on utilisera 25% etc...

Ces dimensions ne tiennent pas compte des marges internes/externes si vous en avez.
Ainsi on peut positionner un élément facilement en utilisant une marge en fonction du bord.
Un élément de 80% (de la taille disponible)de longueur ayant 10% de marge externe à droite et 10% de marge externe à gauche est donc centré. Pour centrer un élément de 34% de large on met une marge droite et gauche de (100-34)/2=33% etc...

margin-left:30% positionne le bord gauche à 30% de la taille totale disponible.
Pour "maîtriser" il suffit de tester en indiquant une épaisseur et couleur de bordure pour bien voir les côtés d'un élément.
0