AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


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

    Partagez
    Okhmhaka
    FémininAge : 31Messages : 31714

    le Dim 9 Mar 2014 - 18:14

    Définir et limiter les tailles



    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 :

    Code:
    width: 500px;

    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é :

    Code:
    max-width: 500px;

    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 :

    Code:
    min-width

    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 :

    Code:
    <img src="adresse.jpg" alt="" style="width: 200px;" />
    ou
    <img src="adresse.jpg" alt="" width="200" />

    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.


    Code:
    <img src="adresse.jpg" alt="" style="height: 100px;" />
    ou
    <img src="adresse.jpg" alt="" height="100" />

    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) :





    (Remarque : sur le forum l'image apparait déformée à cause du système de redimensionnement des images dans les messages, forçant la largeur à 600px.)

    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 :

    Code:
    max-width: 200px;
    max-height: 200px;

    ... 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.

    Code:
    min-width: 200px;
    min-height: 200px;


    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).



    Code:
    <div style="width: 200px; height: 320px; margin: auto; background-color: white; border: 3px solid black;"></div>

    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.



    Code:
    <div style="width: 200px; height: 320px; margin: auto; background: url(http://img4.hostingpics.net/pics/153139HenriCavill8.jpg) center center no-repeat white; border: 3px solid black;"></div>

    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 :



    Code:
    <div style="width: 200px; height: 320px; margin: auto; background: white; border: 3px solid black;"><img src="http://img4.hostingpics.net/pics/153139HenriCavill8.jpg" alt="" /></div>

    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 ! :)



    Code:
    <div style="width: 200px; height: 320px; margin: auto; background: white; border: 3px solid black; overflow: hidden;"><img src="http://1.bp.blogspot.com/-lLvxXJV3HQk/TbooaVXmEqI/AAAAAAAACYg/yr8X1WtaBcE/s400/1980s_unknown019.jpg" alt="" /></div>

    (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édenteEtape suivante



    Yukimura Esuki
    MasculinAge : 20Messages : 106

    le Ven 29 Mai 2015 - 18:12

    Merci pour ce tutoriel qui nous aide grandement, mais j'avais une question par-rapport à un codage, dans celui qui suit :

    Code:
        <img src="adresse.jpg" alt="" style="width: 200px;" />
        ou
        <img src="adresse.jpg" alt="" width="200" />

    À quoi peut servir la balise :

    Code:
    alt=""

    Merci d'avance pour la réponse ! :)
    A-Lice
    FémininAge : 22Messages : 4939

    le Ven 29 Mai 2015 - 19:19

    Bonjour,
    Elle donne un nom à l'image. Tout simplement (:

    Nihil Scar Winspeare
    Messages : 3941

    le Ven 29 Mai 2015 - 19:33

    Juste pour rajouter une petite précision, pour le alt ici on parle d'attribut.
    En fait img est la balise, et alt est l'un de ses attributs (^-^).

    Je te le précise, car en général une fois qu'on prend une habitude... On a du mal à s'en défaire :p. Et puis c'est plus simple d'avoir le bon mot (même si au début on a tendance à tout mélanger ♥).

    Et effectivement, ça sert à donner un nom à l'image, pour dire son contenu. C'est à dire que si l'image ne s'affiche pas pour une raison X, ce texte là pourra s'afficher à la place. C'est aussi utile si quelqu'un utilise un lecteur d'écran, mais aussi pour les robots qui parcourent les pages Wink
    Par exemple pour le bouton "Nouveau sujet", le code de l'image est celui ci, on peut lire "Poster un nouveau sujet".
    Code:
    <img alt="Poster un nouveau sujet" class="i_post" src="http://img4.hostingpics.net/pics/508055nouveau.png">

    Si c'est une image purement décorative, il n'y a pas besoin de remplir le contenu de l'attribut alt, on peut le laisser vide, comme sur l'exemple que tu as cité (^-^)




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    Yukimura Esuki
    MasculinAge : 20Messages : 106

    le Ven 29 Mai 2015 - 23:06

    D'accord, je comprends beaucoup mieux comme ça ! Je vous remercie.
    Invité

    le Sam 28 Nov 2015 - 17:34

    @Okhmhaka a écrit: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 :


    Bonjour !

    Dans un bloc à valeur en pourcentage, y aurait-il un code pour garder les proportions de l'image pour ne pas perdre l'overflow et sans qu'elle soit déformé (même si celui-ci laisse entrevoir la couleur de fond) ?
    Dorea McD
    FémininAge : 25Messages : 5

    le Mar 5 Juil 2016 - 14:49

    Je test ici, j'ai essayé de faire le codage seule pour m'entraîner:

    Code:
    <dive style= "weight: 200px; height: 320px; margin: auto; background: url(http://r31.imgfast.net/users/3113/41/34/56/avatars/435-98.jpg) center center no-repeat #FFFFFF; border: 3px solid #000000"> </div>

    Contenu sponsorisé

    Aujourd'hui à 22:49


      La date/heure actuelle est Mar 6 Déc 2016 - 22:49