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 6 : Disposer ses éléments : le "float"

    Partagez
    Okhmhaka
    FémininAge : 31Messages : 31751

    le Dim 9 Mar 2014 - 18:29

    Disposer ses éléments



    Cette étape sera est importante car elle est la clef de toute construction de page, organisation d'éléments, que ce soit pour le contenu d'un message ou à plus grande échelle d'une page web. Chaque fois que vous aurez en tête des éléments à placer vous aurez toujours cette question qui reviendra : quelle stratégie dois-je adopter pour les disposer selon mon idée ?
    Il peut s'agir de disposer deux éléments entre eux, tout comme de découper et coder un design, le raisonnement de base reste le même. Vous aurez à la sortie de cette étape plusieurs outils ou clefs pour disposer des éléments, avec leur avantages et leur inconvénients, ce sera à vous de choisir celui qui vous parait le meilleur selon les circonstances.


    Le "Float" simple



    Ouarf ! C'est quoi ce mot bizarre... oO


    "Float" signifie "flottement". Ca ne vous avance pas ? Alors disons qu'il s'agit de faire "flotter" un élément à côté d'un autre, de le rejeter d'un côté ou de l'autre en forçant cette position pour qu'il se place à côté d'un autre élément plutôt qu'en dessous. Et puisqu'un exemple vaut milles paroles, voici ce qu'apporte un "float" simple entre une image et un texte.
    Nous avons donc une image, puis un texte. Positionnés naturellement sans effet quelconque, cela donne quelque chose comme ceci :

    A ta santé JackQuae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.


    Code:
    <img src="http://img4.hostingpics.net/pics/438043362.jpg" alt="A ta santé Jack" />Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.

    Ce n'est pas terrible, n'est-ce pas ? C'est là qu'intervient le float que nous allons tout simplement appliquer à l'image par le biais du css. Vous avez normalement vu dans les étapes précédentes que l'on pouvait appliquer du css à une image, pour y mettre une bordure ou la redimensionner, et bien le float va être d'un des attributs que l'on va lui donner.

    A ta santé JackQuae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.


    Code:
    <img src="http://img4.hostingpics.net/pics/438043362.jpg" alt="A ta santé Jack" style="width: 100px; height: 100px; float: left;" />Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.

    Et voilà ! C'est quand même plus présentable ainsi, non ? Alors évidemment, j'ai choisis un "float: left", donc flottement à gauche, mais vous pouvez très bien décider de mettre l'image à droite du texte... voire même d'alterner les deux, mettant une images à gauche, puis la suivante à droite, etc...
    (Remarque : l'affichage sur forum étant un peu différent, j'ai dû préciser la taille de l'image pour que le float s'effectue).
    Alors vous allez me dire que le texte collé à l'image ce n'est pas trop joli, et vous avez entièrement raison ! Mais vous avez ce qu'il faut pour corriger cela, n'est-ce pas ? x)
    Allons-y donc pour les marges !

    A ta santé JackQuae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.


    Code:
    <img src="http://img4.hostingpics.net/pics/438043362.jpg" alt="A ta santé Jack" style="width: 100px; height: 100px; float: left; margin-right: 10px; margin-bottom; 10px;" />Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.

    Quelques remarques sur ce code :
    - tout d'abord pourquoi m'être embêté à mettre un margin-right et un margin-bottom alors que j'aurais pu mettre un margin simple pour faire une marge sur les quatre côtés de mon image ? Et bien tout simplement car ça m'aurait mis aussi une marge haute, et donc que mon texte n'aurait pas été à la hauteur du haut de l'image. L'image aurait été plus basse que le début du texte, et esthétiquement c'est moins joli.
    - Est-il possible de mettre un "padding" à la place d'un "margin" ? Je rappelle dans un premier temps que le padding est une marge intérieure, alors que le margin est une marge extérieure. Un padding à la place du margin aurait abouti au même résultat dans le cas présent (essayez donc si vous ne me croyez pas ^^). Par contre, si vous vouliez mettre une bordure à l'image, le padding aurait mis l'espace entre l'image et sa bordure, bordure qui aurait été collée au texte du coup.


    Notre placement d'image commence à ressembler à quelque chose. Mais il faut encore mettre en forme le texte. Je vais aller assez vite sur ce dernier code car ce n'est qu'un rappel des éléments vus aux étapes précédentes.

    A ta santé JackQuae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.


    Code:
    <div style="width: 80%; margin: auto; padding: 5px; background: #d0d0d0; border: 1px solid #acacac; color: #767676; text-align: justify; font-size: 11px;"><img src="http://img4.hostingpics.net/pics/438043362.jpg" alt="A ta santé Jack" style="width: 100px; height: 100px; float: left; margin-right: 10px; margin-bottom; 10px; border: 1px solid #ffffff;" />Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.</div>

    Comme vous pouvez le voir, le float ne va pas influencer  la division qui englobe le tout, il ne s'occupe que de mettre l'image à droite ou à gauche. Le reste doit être adapté. Dans le cas présent, si vous délimitez une hauteur et que vous voulez par la suite allonger votre texte, il dépassera du cadre. On va plutôt mettre une hauteur minimale à notre bloc.


    A ta santé JackQuae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.


    Code:
    <div style="width: 80%; min-height: 100px; margin: auto; padding: 5px; background: #d0d0d0; border: 1px solid #acacac; color: #767676; text-align: justify; font-size: 11px;"><img src="http://img4.hostingpics.net/pics/438043362.jpg" alt="A ta santé Jack" style="width: 100px; height: 100px; float: left; margin-right: 10px; margin-bottom; 10px; border: 1px solid #ffffff;" />Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.</div>

    Voilà qui est mieux. Vous pouvez vous servir de cette méthode pour vos descriptions de catégories par exemple.

    Vous pouvez constater que le résultat est similaire à ceux des cadres de modération réalisés en étape 4. C'est effectivement une alternative possible pour mettre en forme ce type de bloc. Cependant, si j'ai choisi de vous faire mettre l'image (icône) en fond dans l'étape 4 c'est justement pour éviter ces hauteurs minimum à mettre. De plus, avec l'image en fond, vous pouvez la placer au centre du bloc sur la gauche, alors qu'avec le float elle sera forcément en haut et si le texte est long il viendra se placer en dessous ensuite.


    Il est important de se souvenir que l'élément flottant doit se placer AVANT le reste. Dans mon exemple, l'image est en premier, puis vient le texte. Si j'avais fais l'inverse, le texte serait avant l'image, normalement, et l'image juste en dessous sur la gauche, ce qui n'est pas le résultat espéré.



    Le "Float" sur un bloc



    Aie aie... Nous arrivons en terrain glissant, non pas parce que c'est difficile, mais parce que c'est à éviter.

    Euh... Attends. Pause. Tu nous expliques quelque chose à ne pas faire là ? Pourquoi ?


    Et bien déjà parce que ça existe, et qu'il faut le savoir, mais aussi parce qu'il y aura des cas où vous ne pourrez pas faire autrement que de vous servir de ce float.

    Le principe est le même que pour une image, à la différence près que le résultat est plus aléatoire. En effet, selon les navigateurs vos blocs seront l'un à côté de l'autre ou l'un en dessous de l'autre... C'est donc plus difficile à mettre en place pour avoir un bon résultat, c'est la raison pour laquelle il sera préférable d'utiliser une mise en forme en tableau dès que vous en aurez la possibilité.
    Bien, essayons tout de même de comprendre le "float" pour un bloc, plus compliqué que celui qu'une image.

    1) Que fait l'attribut "float" ?
    Pour bien comprendre les dangers de cette utilisation, il faut comprendre ce qu'elle produit sur l'élément. Mettre un "float: left" sur un bloc, revient à lui dire "Toi, tu t'en vas complètement à gauche, le plus que tu peux." Il faut avoir conscience de ce "le plus que tu peux", car si vous avez une page web vierge, votre bloc sera contre la bordure gauche, puisque rien hormis le bord de page ne stoppe votre bloc, et qu'il suit votre ordre d'aller le plus à gauche possible. Là où il y a un problème, c'est que selon les utilisateurs, les pages web ne font pas le même nombre de pixel en largeur... Donc si vous imaginez pouvoir construire un site web avec juste une navigation flottant à gauche et votre corps flottant à droite, ce n'est pas si simple, surtout si vous voulez une largeur fixe pour vos blocs. Dans certains cas ils seront trop éloignés l'un de l'autre, et pour des résolutions plus petites, ils vont se chevaucher, ce qui est encore pire.

    Il est donc important de limiter une zone en pixel pour que vos blocs en float se calent à l'intérieur de lui et n'en sortent pas. Ainsi, vous pourrez définir leur largeur en pixel, tout écran aura la même et votre disposition fonctionnera.

    Etape 6 image 1

    Etape 6 image 2

    Etape 6 image 3


    Dans les messages des forum, vous n'aurez pas ce problème puisque la zone c'est le message en lui-même, votre bloc même en float ne pourra pas sortir du message. Je vous explique simplement le principe du float pour que vous l'ayez en tête, ou bien que le souvenir de l'avoir lu quelque part revienne lorsque l'on en parlera dans la conception d'une page web x).

    2) L'importance des largeurs et des marges
    Parce que vous verrez tout cela plus facilement en image qu'avec des descriptifs, je vous présente des schémas de ce qui est possible et de ce qui va décaler vos blocs.

    Etape 6 image 4

    Etape 6 image 5

    Etape 6 image 6


    Dans le premier exemple, les tailles des blocs permettent l'alignement horizontal.

    Dans le second cas, l'un des blocs, trop large, est automatiquement renvoyé à la ligne car il ne rentre pas dans la zone définie.

    Dans le dernier exemple, les largeurs des blocs sont bonnes et pourraient tenir ensemble sur une ligne, mais la marge imposée entre les blocs ajoute des pixels à l'ensemble, et du coup, même si les blocs seuls pourraient tenir sur la ligne, la marge les décale et nous avons le même résultat que dans le cas précédent : le bloc de droite est renvoyé à la ligne.

    Si votre bloc contenant (sur mon schéma le bloc bleu) comporte un "padding", il sera à prendre en compte également dans vos calculs.
    Vous risquez de tatonner un peu lors de la mise en place d'un float, pensez bien que vous avez placé des MARGES ou même des BORDURES et qu'elles comptent dans la largeur d'un bloc !
    Un conseil : prévoyez large, ne comptez pas au pixel près mais laissez-vous une marge de 10 pixels environs dans vos additions. Evitez donc de faire deux blocs de 500px et 300px dans une largeur de 800px. Ca tombe pile, mais il suffit que vous mettiez une bordure de 1px à l'un des deux blocs intérieurs et paf ! retour en case départ avec deux blocs l'un en dessous de l'autre car ils ne rentrent pas sur la même ligne.


    3) L'Outils magique du "clear: both"
    Oui je sais, ce petit bout de code ne vous parle absolument pas, et pour cause : il est rare qu'on l'explique au gens ou qu'on l'aborde dès les premières leçons d'un cours de codage, pourtant il est VITAL dès que l'on bouge des éléments et qu'on les met en place.

    Okaaaaay... Mais il fait quoi exactement ce petit bout de code de rien du tout ?


    Vous savez, dans la Chatbox du forum, lorsque l'on fait un "/clear", tout s'efface, on repart à zéro, et les longues phrases qui déformaient le cadre ou bien les images qui faisaient bugger la discussion disparaissent... Et bien dans une page de code c'est un peu le même principe. Mettre un "clear: both" dans un code css (appliqué à un bloc) signifie : "STOP ! Oublie tout les float à partir de maintenant !"

    Voici un exemple plus concret de ce qu'il permet de faire (ou d'éviter) :

    Etape 6 image 6


    Pigé ! (je crois :hum:) Mais alors, ce code magique là, on le met dans le bloc qui doit ignorer le float, comme n'importe quel autre attribut ?


    Tout à fait ! Mais il y a deux manières de s'en servir, du moins deux que je connaisse et que je pratique, selon les cas.
    - Tout d'abord, vous pouvez effectivement mettre le "clear: both" en temps qu'attribut dans votre bloc. Dans le cas de l'exemple précédent sur le schéma, cet attribut serait placé dans le bloc jaune. On aurait alors quelque chose comme :

    Code:
    <div style="clear: both; background: yellow;....">Contenu du bloc jaune</div>

    - Cependant, si dans un page ou un message vous voulez annuler plus simplement le float qu'en mettant l'attribut dans le bloc qui suit, vous pouvez tout aussi bien créer une "div" qui aura pour seule fonction d'annoncer que le float n'est plus à prendre en compte. La division ne se verra pas puisqu'elle n'aura aucun style ni même aucune taille, et sera totalement invisible et ne prendra pas 1 pixel de place. Il y en a d'ailleurs dans le codage interne de votre forum ! Si si x).

    Voilà comment ça se présente :

    Code:
    <div style="clear: both;"></div>
    D'ailleurs, pour vous montrer à quel point c'est utile et invisible je vais vous montrer ce que donnerait un extrait de ce cours-ci sans ce petit code. Et oui, il y a des codes cachés dans cette page^^

    Etape 6 image 7
    (screen réalisé sous l'ancien design du site)


    Le "clear: both" que j'ai mis sous la forme d'une "div" invisible juste avant mon cadre de code me permet de corriger ce problème et ainsi d'avoir l'affichage que vous avez actuellement sur le cours.

    4) Assurer un float pour certains navigateurs
    Vous allez de plus en plus m'entendre (enfin... me lire, heureusement pour vos oreilles^^) pester contre certains navigateurs, dont en champion du "je comprends rien aux codes" : Internet Explorer. Il n'est pas le seul à avoir des difficultés sur certains codes, le problème avec lui c'est qu'il en a tellement qu'il en devient détestable lorsque l'on commence à coder un peu. Vous verrez, d'ici quelques temps vous vous souviendrez de ces mots et vous comprendrez mieux pourquoi je m'énerve après lui x).
    Concernant le float, certains navigateur (dont IE, forcément...) ont des difficultés à comprenre qu'il faut positionner deux éléments côte à côté et non l'un en dessous de l'autre. Parfois, vous avez beau avoir fait l'addition vingt fois de vos largeurs, tout est censé rentrer, mais ça continue à vous afficher votre premier bloc et en dessous votre second bloc, au lieu de le place à côté. Dans ce cas, il y a une astuce qui permet parfois de corriger ça : bien insister sur le placement des cadres en mettre DEUX float. Vous avez le bloc sencé être à gauche avec un float:left, parfait, mais histoire de bien insister et bien on va ajouter un float:right à celui sencé être à droite.
    Ce n'est pas une solution miracle, mais c'est parfois pratique, je me souviens d'avoir eu recours deu x ou trois fois à cette méthode donc je vous l'expose.

    En résumé, le float c'est :
    - imposer à un élément d'aller complètement à droite ou complètement à gauche dans la zone dans laquelle il se trouve
    - à utiliser avec précaution car il est plus difficile d'avoir un bon alignement d'éléments avec un float qu'avec un tableau
    - à utiliser avec des largeurs en pixel de préférence
    - se méfier des marges ajoutées aux largeurs de vos blocs
    - penser à annuler un float si nécessaire avec "clear: both"


    Etape précédente



    sica3
    MasculinAge : 43Messages : 135

    le Sam 29 Nov 2014 - 2:00

    thank's
    Yukimura Esuki
    MasculinAge : 20Messages : 110

    le Ven 14 Aoû 2015 - 19:04

    Merci pour ce tuto' sur le float ! Very Happy
    xLittleRainbow
    FémininAge : 22Messages : 23

    le Sam 31 Oct 2015 - 15:20

    Je comprends enfin à quoi sert cette fourbe de fonction clear e.e Merci beaucoup pour ce tuto !
    Contenu sponsorisé

    Aujourd'hui à 3:07


      La date/heure actuelle est Sam 21 Jan 2017 - 3:07