Codage. Cursus

Partie 1 - Etape 5 : Définir et limiter les tailles


Auteur : Sparrow-style

Limiter la taille d'un bloc

Etant donné que nous avons vu rapidement l'overflow dans l'étape précédente, ce début d'étape ne sera finalement qu'un rappel sur son fonctionnement. L'overflow est donc un moyen de bloquer la taille d'un bloc, mais il n'est pas toujours nécessaire. En effet, si vous limitez ou imposez une largeur à un bloc mais que vous n'imposez pas de hauteur, le bloc s'étirera autant que nécessaire pour afficher votre texte sans nécessiter d'overflow.

1) Imposer une largeur et limiter la largeur.

Cela parait être la même chose, mais ça ne l'est pas. Imposer une largueur signifie que le bloc fera exactement la taille donnée, quel que soit le contenu. Au contraire, limiter une largeur signifie qu'il sera impossible que le bloc fasse plus que la taille indiquée... mais dans l'absolu, la largeur peut être inférieure.
Rappel : Vous ne pouvez utiliser ces propriétés css que pour des balises de type "block", et non "inline".
Vous savez imposer une largeur : Ici votre bloc fera 500px de largeur. Cependant, pour verrouiller cette largeur à 500px quel que soit le contenu (une image trop large par exemple) il va falloir exiger que la largeur maximale soit de 500px. Pour cela, voici le css adapté : Ainsi, la largeur ne pourra pas dépasser les 500px.
Attention, il vous faut prendre en compte que les deux codes sont différents.
- Vous pouvez vouloir bloquer la largeur à une taille max mais lui permettre d'être plus petite si le contenu le permet, ou vouloir à tout prix que la taille soit fixe, quelque soit le contenu.
- Vous pouvez donc afficher les deux informations dans le css, même si le max-width utilisé seul met quand même le bloc à la taille maximale par défaut.
- la limite de taille peut se faire autant avec des pixels qu'avec des pourcentages.
Avec le même raisonnement, il est possible d'imposer à un bloc une largeur minimale, mais lui permettre de s'élargir si besoin. Pour cela, nous utilisons la propriété css suivante : Dans ce cas là, votre bloc fera au moins 500px, mais il peut s'élargir au besoin.
Notez qu'il est généralement plus fréquent d'utiliser le max-width qu le min-width, donc de limiter la largeur plutôt que d'imposer une largeur minimale. Cependant, les deux peuvent être utiles.

2) L'overflow pour gérer ce qui dépasse du bloc :

Comme expliqué à l'étape précédente, l'overflow permet de gérer ce qui va sortir de notre cadre, que ce soit du texte ou une image, grâce à un déplacement vertical ou horizontal.
RAPPEL : Les différentes valeurs de l'overflow :
- visible, laisse visible ce qui dépasse.
- hidden, masque ce qui dépasse.
- scroll, met toujours une barre de défilement.
- auto, met une barre de défilement seulement si nécessaire.
Il peut être utilisé pour limiter la hauteur, la largeur, ou même les deux. Il devient extrêmement utile pour éviter de déformer vos bloc, faire deux cadres textes de la même longueur côté à côté en ayant pourtant des longueurs de texte différentes, etc... Vous le verrez dans les fiches de présentations RP, fiches de relations ou fiches pub, mais aussi sur les forum pour les descriptions des catégories par exemple, ce qui permet d'uniformiser leur hauteur pour qu'elles fassent toutes la même.

Redimensionner une image en utilisant le CSS

De la même façon que vous pouvez imposer une largeur et une hauteur à vos blocs, vous pouvez faire de même avec les images, n'importe lesquelles. C'est pratique pour que toutes fassent la même taille sans s'embêter à ouvrir un logiciel de retouche d'image.
Attention ! Ne vous amusez pas à agrandir les images, car le résultat sera encore pire qu'avec un logiciel, vos images seront toutes pixélisées, floutées... N'utilisez cela que pour réduire, c'est fortement conseillé.
Comme pour un bloc, vous pouvez choisir d'imposer une taille précise, ou bien une taille maximale, permettant à l'image d'être plus petite, et donc ne la bloquant à la taille demandée que si elle est à l'origine plus grande que cette taille.
Il est possible de faire cela pour la largeur, ou pour la hauteur.
Attention aux proportions de base de l'image ! Si vous avez une image de 500x200 et que vous voulez la transformer en image de 200x200 en imposant largeur ET hauteur, elle sera toute déformée ! Il faut donc respecter les proportions, et pour cela il est fortement conseillé de ne limiter que la largeur OU que la hauteur.
Notez qu'en ne limitant que l'un des deux, l'autre valeur s'adapte ! Votre image sera réduite avec ses proportions.
Voici comment modifier la largeur ou la hauteur d'une image, normalement vous connaissez déjà une façon avec le CSS et l'attribut "style", mais je vous donne également la seconde méthode : L'image ci-dessus a donc sa largeur imposée à 200 pixels.
Vous remarquez que dans la seconde solution nous n'indiquons pas qu'il s'agit de pixels. Le width devient l'attribut et le 200 est sa valeur.
L'image ci-dessus a donc sa hauteur imposée à 100 pixels.

Exemple d'une image avec largeur + hauteur modifiés, ce qui déforme l'image :

La même image avec dans le premier cas seulement la largeur de modifiée (à 400px), et dans le deuxième cas seulement la hauteur (à 100px) :



Vous pouvez également mettre une taille butoir, c'est à dire que l'image que vous mettrez dans votre code pourra être plus petite que la taille butoir, mais pas plus grande. Cela se fait exactement comme avec un bloc : ... et il va de soit que vous pouvez aussi mettre une taille minimale en dessous de laquelle la taille de votre image ne pourra pas aller, mais il est plus rare de l'utiliser.

Limiter la taille d'une image avec une "zone image"

En quoi cela consiste-t-il ? A quoi ça sert ?
Cela permet de limiter ce que l'on voit d'une image à une certaine taille, ainsi, si l'image est plus grande le surplus ne se verra pas. C'est une méthode très utilisées pour les avatars dans les feuilles de présentation, par exemple.
Deux solutions vont vous être proposées, généralement, c'est la première qui est utilisées dans les présentations et autres, peut-être car elle est un peu plus simple, cependant je vous s'indique les deux méthodes, à vous de choisir laquelle vous convient le mieux, sachant qu'elles sont toutes deux leur particularité. Ainsi, même si la seconde vous parait complexe ou ne pas convenir, elle peut être la seule valable dans d'autres cas. Voilà pourquoi je vous en parle.

1) Image en fond

En effet, le moyen le plus simple d'afficher une image en imposant sa taille sans risquer de la déformer c'est de mettre cette image en guise de fond d'un bloc qui fera, lui, la taille voulue. Ca ne vous parait pas clair ? Ca le sera certainement plus bas...
Voici, comme vous savez déjà le faire, un bloc étant de la taille d'un avatar RPG classique (autrement dit 200x320px).
J'ai ajouté une couleur de fond blanche et un cadre noir pour plus de clarté.
Maintenant, il suffit d'y mettre une image en fond, qui fasse la taille demandée, donc 200x320, ce qui est généralement ce que les membres doivent mettre dans le profil RPG.
Il faudra donc modifier l'image directement dans le code CSS. Ca peut paraitre tordu, mais la majorité des fiches de présentation/relations de personnage sont faites ainsi et les gens savent les modifier.
Mais alors... si l'image n'est pas de la bonne taille ?
Et bien elle est gérée comme un fond, donc se comporte comme tel. Si elle est trop large, le surplus ne se verra pas, et bien évidemment le bloc ne sera pas déformé. Si par contre l'image est trop petite, on verra la couleur de fond, à moins que vous ne fassiez se répéter l'image en mosaique à l'intérieur. Quoi qu'il en soit, si vous exigez une image d'une taille précise dans votre cadre, c'est à vos membres de s'adapter et d'afficher une image à la bonne taille !

2) Image redimensionnée dans un bloc

C'est pour cette solution-là qu'il sera nécessaire d'utiliser l'overflow. Nous allons donc afficher notre bloc, exactement comme tout à l'heure, mais à la place que l'image soit en guise de fond, elle sera vraiment dans le bloc. Voici le code en guise d'exemple :
Mais alors là, si l'image est plus grande, elle dépasse ?
Oui ! Tout à fait. C'est pourquoi nous allons ajouter un overflow. Et pour masquer tout ce qui dépasse, la valeur de la propriété overflow doit être... ? ... doit être ? ...
"hidden" ! Bien ! :)
(Lien de l'image)
Et voilà ! Vous avez deux méthodes, chacune avec ses qualités pour définir une zone d'image, pour un avatar par exemple.
Vous remarquerez qu'il est plus facile de placer le fond que l'image mise dans le bloc, car le fond peut de placer grâce au css (top left, center, bottom right, etc...).


Etape précédente Etape suivante