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 6b (annexe) : Bien comprendre le float & clear

    Partagez
    NyoTheNeko
    FémininAge : 22Message(s) : 5018

    le Mer 30 Avr 2014 - 13:06

    Compléments sur le float



    Bonjour à tous! Voici mon tout premier tutoriel qui concerne les float. Il sera en complément du cours donné dans le cursus à ce propos, principalement parce que bien qu'il soit très bien expliqué comment les float marchent avec de belles illustrations (ce qui, au passage, m'évite de le faire =P), il n'y a pas vraiment d’explication autre que le div "clear: both" pour ce qui est de "clearer" (un joli anglicissme) les float dans notre CSS. Je vais donc vous donner quelques informations supplémentaires à ce niveau.
    Donc, évidemment, dans les liens utiles vous retrouvez l'étape 6 du cursus crée par Sparrow-style, qui est existentiel de lire avant de lire ce tuto, vu qu'il n'est qu'un complément de cette étape! Si vus voulez comprendre les bases du float, il faudrait le lire. De plus, vous retrouverez l'article "Clearing Floats" de Quirksmode qui m'a aidé à trouver une des autres solutions. Vu que je n'ai pas la science infuse, je cite mes sources! Ensuite, bien sûr, vous avez les deux pages de W3Schools sur les float et les clear respectivement, qui vous donnent tout ce qu'il faut savoir dessus! Notez cependant que les trois derniers liens sont tous en anglais! (Raison pour laquelle je ne donne pas simplement les liens mais fait l'effort d'expliquer tout ça ne français Wink)


    Ok, attends, c'est quoi le résultat? On essaie de faire quoi, là, exactement?


    Eh bien c'est très simple, on voudrait passer de 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.


    Ou ceci:
    Colonne de gauche
    Colonne de gauche
    Colonne de gauche.
    Colonne de gauche
    Colonne de droite.
    Colonne de Droite.
    Colonne de Droite


    À cela:
    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.

    Et cela:
    Colonne de gauche
    Colonne de gauche
    Colonne de gauche.
    Colonne de gauche
    Colonne de droite.
    Colonne de Droite.
    Colonne de Droite

    En utilisant plusieurs méthodes différentes, autres que celle montrée dans le tuto de cursus écrit par Sparrow. Ceci n'est donc qu'un complément de ce que vous savez déjà, et vous devriez donc savoir ce qu'est un float!
    (Notez que j'ai honteusement volé les codes qui sont dans le cursus de Sparrow-Style et dans le tutoriel de Quirksmode respectivement! Allez voir plus haut!)

    1) Utilisation de :after


    Si vous n'êtes pas confortable avec l'utilisation des pseudo-éléments, je vous invite à lire mon tutoriel dessus, ou alors à passer tout simplement cette solution-ci!
    Commençons donc tout de suite le cours, imaginons que vous ayez un div en float, ou n'importe quel objet en float, et que vous décidiez alors de mettre ceci à la suite:
    Code:
    <div style="clear: both;"></div>
    Malheureusement, vous avez décidé de faire ça dans vos templates forumactif, peut-être parce que vous aviez des catégories côté-à-côté et que vous vouliez avoir un fond de catégorie (avec les barres en haut et en bas). Vous avez remarqué que le fond de catégorie ne s'affiche pas, et bien sûr, vous avez pensé à utiliser la méthode donnée par Sparrow-Style dans son tutoriel de cursus... et ça ne marche pas! Le forum est tout déformé et c'est tout moche: les templates mettent tout en l'air!  Pas de panique cependant: la solution arrive.

    Cependant, ne voyons pas cette solution de suite. Cherchons d'abord à retirer de la balise HTML tout style.
    Euh attends quoi? Pourquoi je devrais faire ça moi?

    Parce que c'est tout simplement mal vu de mettre du style dans une balise. Donc dès que vous voyez ceci:
    Code:
    <div style="...">
    c'est du mauvais code. Tout comme utiliser les balises HTML center, le i pour mettre en italique, le b pour mettre en gras, etc. Il faut comprendre que le HTML n'est pas là pour mettre en forme votre texte: c'est le CSS qui doit être utilisé. C'est pourquoi, dès que vous en avez la possibilité, il faut à tout prix utiliser le CSS (à travers les arguments class et id) et non dans l'argument style. Je sais bien que c'est parfois obligatoire pour les forums, vu qu'on a pas toujours accès au CSS du forum, cependant, dès que possible: évitez.

    Ok je vois, mais comment je fais ça? C'est pas un peu inutile de mettre un div avec une classe/un id juste après mes float? Autant mettre le style et tant pis...

    Je comprends, et c'est bien vrai. C'est pourquoi le CSS3 nous apporte la solution: le pseudo-element :after !

    Voilà ce que cela vous donne dans le html:
    Code:
    <div id="mon_nom">Ceci est le contenu qui sera en float.</div>
    Et dans le CSS:
    Code:
    .mon_nom {
     float: left;
    }

    .mon_nom:after {
     content: "";
     display: block;
     clear: both;
    }
    Si je n'ai plus à expliquer ce qui se passe dans le premier bout de code du CSS, il est important de savoir pourquoi ce qui a été écrit dans le pseudo-élément after pour bine comprendre.
    Tout d'abord, pourquoi content: ""; ? C'est vide, et il semblerait que ça ne serve à rien... Cependant, il est obligatoire de le mettre, ou alors le pseudo-élément ne va pas "s'afficher"! En règle général, il faut toujours avoir un content, même vide, dans un pseudo-élément pour que ça ait un quelconque effet!  
    Ensuite, pourquoi le display: block;? En gros, vous dites à votre navigateur de voir ça "comme un div": c'est à dire un bloc, qui se mettrait "à la suite". Par exemple, tentez de mettre une balise span (de type inline) à la place du div dans le code donné plus haut: vous verrez que le clear ne marche tout simplement pas. Il est donc obligatoire de dire à votre navigateur que le pseudo-élément doit se comporter comme une div.
    Et enfin: clear: both;, qui est là justement, pour arrêter le float. En gros, vous dites à votre navigateur qu'aucun float n'est permis, ni à droite, ni à gauche. Cela "brise" donc la chaîne des float et évite que les éléments se mettent à la suite.

    Voilà donc pour la toute première solution alternative! Cependant, ça n'aide en rien avec notre problème de template... zut! Du coup, que faire?

    2) Utilisation du overflow


    C'est en réalité tout simple: il suffit de mettre un overflow: scroll dans l'objet (div, table, etc) qui contient tous les objets en float. C'est donc la solution à adopter pour notre problème: il suffit d'entourer les sous-forum avec un div ayant une class, comme c'est en général le cas lorsqu'on met des barres en haut et en bas d'une catégorie, et de lui donner ceci. Voici donc le CSS à mettre:
    Code:
    .entourage_float {
     width: 800px;
     overflow: scroll;
    }
    Notez que le width mit dans ce bout de code est arbitraire: j'ai prit une largeur générale de forum. Cependant, la valeur peut être n'importe quoi...
    Le width est important (surtout pour pas que ça ne dépasse pas en largeur comme pour des sous-.forums), mais surtout, ne PAS mettre de hauteur (ou alors, à la limite, mettre height: auto)! Pourquoi? Tout simplement parce que le overflow va mettre des barres automatiquement si la hauteur ou largeur dépasse. De ce fait, il est donc évident qu'il faut faire attention aux margin/largeurs des sous-forums/blocs float dans ce contour, cependant la hauteur s'ajustera de façon automatique.


    Cependant, pour certains navigateurs, les barres se mettent automatiquement. C'est donc un problème, parce que bon, souvent, c'est moche! Du coup, il suffit de changer la valeur du overflow et de le mettre en hidden:
    Code:
    .entourage_float {
     width: 800px;
     overflow: hidden;
    }
    Nous avons donc remplacé le scroll par un hidden, ce qui fait que plus aucune barre ne s'affiche. Cependant, il est d'autant plus important de faire attention à la largeur de tous vos éléments: ceux-ci risquent de disparaître à cause du hidden et donc de ne plus d'afficher! Cependant, cela permet de faire que le fond englobe bien tous les éléments en float Wink


    Des questions...


    Voilà! Ce sont donc les petites astuces qui vous permettent de bien comprendre le float. Je vais cependant rapidement répondre à quelques questions:
    Pourquoi ne jamais utiliser des tableaux plutôt que des float?

    Oui, vous avez bien lu: ne jamais utiliser des tableaux. La raison? Premièrement, comme indiqué plus tôt, le HTML ne devrait jamais être utilisée pour la mise en forme, les tableaux y compris. Le float est bien souvent utilisé pour de la mise en forme. De plus, et cette raison est très importante même si beaucoup de personnes ne seraient pas d'accord avec moi y compris FA vu que tout chez eux est en tableau (bien que là c'est un minimum justifié), c'est que les tableaux ne devraient être utilisés que pour contenir des données. Par exemple, un tableau de personnes avec leur nom, prénom, âge, date de naissance, etc. là un tableau est justifié! Cependant, pour mettre en forme un texte avec une image à côté, la justification n'existe pas.
    C'est pour cela que je dis que l’utilisation qu'en fait FA est quelque peu justifiée: en effet, les catégories sont un tableau à proprement parler, vu que chaque colonne correspond à un type d'informations: l'état du sous-forum (nouveau messages, pas de nouveaux messages, etc), sa description, son nombre de sujets, son nombre de messages et enfin, le Dernier message. C'est donc un tableau correct. Cependant, dès que vous changez assez la mise en page, ça ne devrait plus être le tableau, car la structure n'y est plus.
    De plus, les logiciels pour malvoyants reconnaissent les codes des tableaux, et donc partiront du principe que ce sont des informations classifiées dans un ordre logique (donc première colonne = une chose, deuxième colonne = un autre chose, etc), et pourtant, la plupart des gens n'utilisent pas les tableaux pour contenir des données, mais pour la mise en forme... c'est donc une très mauvaise utilisation! Donc évitez les tableaux lorsque vous pouvez utiliser des float!


    Pourquoi ne pas utiliser des display: inline-block plutôt que des float?

    Là, c'est surtout un problème de compatibilité entre navigateurs! Si certains navigateurs afficheront alors tout bien en ligne et colonne, bien aligné, d'autres mettront tout dans tous les sens, avec des écarts inexpliqués. D'autant plus lorsque votre bloc a du texte (à cause du principe de baseline. Plus d'infos en anglais ici). Donc, si vous voulez que tout soit compatible sur votre forum ou sujet: pas de inline-block!
    Bien sûr, si vous voulez vraiment utiliser inline-block (ce n'est pas plus faux que float Wink), il y a des façons de régler ce problème, mais ce n'est pas le sujet! Ceci reste une question de goût et chaque personne aura sa propre façon de voir les choses, et préférera donc utiliser inline-block plutôt que float, contrairement à moi.

    Pourquoi ne pas utiliser des positionnement absolus plutôt que des float?

    Cela serait effectivement possible, mais bien souvent plus fastidieux. En effet, cela dépend parfois de la largeur d'un écran, et parfois cela prend plus de temps de tester à chaque fois la position, plutôt que de mettre un simple float! En effet, les problèmes de float se règlent très facilement, et souvent tous de manière similaire, alors que les positionnement absolus doivent être fait souvent en éditant plusieurs fois le code.
    C'est donc une alternative viables, mais parfois plus "compliquée" que de simples float! Notez également que les float et les positionnement absolus n'ont pas tout à fait le même but, puisqu0une image en float a le texte qui se "wrap" autour, alors que le positionnement absolu ne peut que mettre deux blocs côte-à-côte: une image avec positionnement absolu à coté d'un seul bloc de texte à positionnement absolu ne sera qu'en bloc, et ne se verra pas "entourée" par le texte.
    Notez cependant que le positionnement absolu et le float n'ont pas forcément la même raison d'être. Il serait plus fastidieux de créer une PA en float qu'avec des position, par exemple, et pourtant, le float est très facile à utiliser pour mettre des objets côte-à-côte contrairement au positionnement absolu!  Vérifiez donc quelles sont les circonstances et ce qui serait le plus "pratique" à utiliser, avant de vous mettre  utiliser l'un ou l'autre!

    Conclusion: En somme, il existe bel et bien trois solutions pour clearer vos float: soit avec une div qui suit votre élément contentant un clear, soit avec un pseudo-élément after ayant également un clear, ou alors, avec le div contenant les éléments en float ayant un overflow, soit en scroll, soit en hidden¨!


    Je crois que j'ai dit tout ce que j'avais à dire! Du coup, si vous avez des questions, ou que des éléments n'étaient pas clair dans mes explications, n'hésitez pas à poster à la suite! Je me ferais une joie de vous répondre, mais aussi d'éditer le sujet pour apporter des explications supplémentaires! (N'hésitez pas non plus à pointer du doigt des éventuelles fautes! Wink)


    Dernière édition par NyoTheNeko le Ven 9 Mai 2014 - 16:08, édité 1 fois
    Okhmhaka
    MasculinAge : 31Message(s) : 31700

    le Lun 5 Mai 2014 - 17:15

    vous avez pensé à utiliser la méthode donnée par Sparrow-Style dans son tutoriel... et ça ne marche pas!

    Si, ça marche. Le fait de placer des "marqueurs" de début et fin de catégorie permet d'afficher le bloc de la catégorie avec le fond. Je peux concevoir que ce soit du bricolage, mais ça fonctionne.

    Je ne suis pas d'accord avec tout le contenu de ton complément. Tu as l'air d'avoir acquis des connaissances solides mais est-ce qu'elles se basent sur un seul cours ou sur plusieurs avis ? J'ai déjà lu maintes fois que le float était à éviter car pouvait entrainer beaucoup de problème de positionnement, selon les navigateurs etc... Alors forcément aujourd'hui ça va beaucoup mieux et on peut l'utiliser sans craindre qu'un élément soit mis à la ligne parce que le navigateur ne comprend pas (sauf s'il est obsolète), mais ça ne signifie pas que le "display: inline-block" soit mauvais. Là aussi, il m'est arrivé de tomber sur des articles prônant une utilisation plus fréquente de cette propriété qui évite de se prendre la tête avec, par exemple, de petites images mises côte à côte.

    Ton contenu est bon, je ne critique pas hein. Après, je pourrais reprocher l'absence d'illustration ou de schéma. J'ai déjà moi du mal à te suivre alors que bon j'ai 2-3 bases quoi, alors un débutant tu l'as perdu dès ton explication de l'utilisation et de l'utilité de ":after" (chose que au passage je n'ai jamais réussi à saisir, malgré les explications que j'ai lues, comme quoi personne n'a encore réussi à me faire comprendre ce truc-là).

    Attention donc, ton tutoriel s'adresse à des gens qui s'y connaissent, ce qui ne veut pas dire qu'il n'est pas bon ou ne sera pas retenu, au contraire, il en faut aussi, mais ce n'est pas parce que le contenu est "pointu" qu'il ne peut pas être accessible aux gens qui n'ont pas encore un très bon niveau. Si moi j'ai du mal à accrocher à ton cours je pense que plus de la moitié des gens qui tomberont dessus n'y comprendront rien non plus.
    Cela dit, je mets un bémol sur ces derniers points car je ne me considère pas comme des plus intelligents, ou disons rapide à comprendre, donc peut-être que le problème ne vient pas de l'explication mais du lecteur x).

    Je déplace dans la section appropriée, merci !



    NyoTheNeko
    FémininAge : 22Message(s) : 5018

    le Lun 5 Mai 2014 - 20:49

    Je me permets de te répondre Sparrow, vu que c'est tout de même fait pour apprendre, je me permet donc de revenir un peu sur ce que tu dis. ^^ (et désolée de pas avoir répondu de suite, sur Smartphone, c'est moyen =P)

    Pour le fait que ça marche, je peux avouer qu'effectivement, cela pourrait être dû au fait que je ne connaisse pas parfaitement les templates. Cependant, je me rappelle que lorsque j'avais essayé pour un forum, j'avais beau placer le div avec clear partout, ou même utiliser le :after rien n'y faisait! Peut-être que j'ai fait quelque chose de faux, je n'ai pas lu ton tuto (que j'ai découvert peu de temps après avoir posté cette annexe de cursus) et ne sait donc pas comment tu t'y es prit (vu que je suppose que tu as utilisé cette méthode?), cependant, cela part d'une expérience personnelle.

    Pour ce qui est de ce que j'ai écrit, je parle autant par expérience personnelle que de ce que j'ai pu lire un peu sur le net ou dans des livres. Il est cependant clair que tout le monde y va de sa technique, et je ne suis forcément pas dans la vérité absolue. Tout comme on dit qu'en général il ne faut pas avoir de mise en page dans le HTML, beaucoup de programmeurs que je connais n'hésiteront pas à utiliser les tableaux pour la mise en page. En somme, pas tout le monde est d'accord sur la meilleure façon de faire.
    De ce fait, on est bien d'accord: il y a certaines fois où il faudrait utiliser le inline-block, et certaines fois où il faudrait utiliser le float, mais c'est vraiment à la discrétion du codeur de ce qu'il préfère. Personnellement, je préfère bien souvent le float, surtout parce que je trouve que le principe de la baseline est trop compliqué, alors qu'il me suffit de mettre un clear, ou alors que le div conteneur soit en un overflow... Au final, ça reste du pareil au même. Cependant, ce n'est pas pour autant que je n'utilise jamais le display: inline-block!
    C'est bien pour cela que je dis dans le tuto que ce n'est pas plus faux que le float, et tout comme il y a des manières "d'arrêter" un flaot et donc corriger ses "bugs" il y en a également pour le inline-block. C'est bien précisé dans le texte, mais si nécessaire, je pourrais peut-être le mettre plus en avant que c'est une alternative tout à fait acceptable! Comme j'ai dit plus tot, cela dépend fortement de "l'école" de pensée d'où tu viens!

    Pour les illustrations, à vrai dire, pour chaque exemple, cela serait simplement les deux premiers exemples données par Quirksmode: sans le clear ça fait ça, avec ça fait ça. Au final, le résultat des trois manière que j'ai donné est exactement le même! Du coup, je dois t'avouer que je ne savais absolument pas quelles illustrations mettre, vu que c'est surtout un complément de ton tuto du cursus, et que je pars du principe que la personne qui lit sait sait déjà de quel problème de float je parle!

    Pour ce qui est du :after, je pense pas que c'est le bon endroit d'en parler dans ce tuto, cependant, je serais bien sûr prête à en faire un tuto supplémentaire. Parce que c'est vrai que pour utiliser quelque chose, il faut savoir ce que c'est et ce que ça fait, cependant, je ne pense pas que ce soit le bon endroit pour expliquer les pseudo-éléments et ce qu'ils font!
    Cependant, voilà un rapide résumé de la chose pour toi Sparrow (et ceux qui voudraient en savoir plus dans l'immédiat avant que je ne fasse de tuto dessus:)
    Spoiler:
    Le pseudo-élément :after permet, pour une certaine classe d'objet ou pour un objet particulier (donc avec un id) de mettre systématiquement quelque chose après l'élément. Imaginons que vous voulez mettre systématiquement une image après un div de classe "important". Pour ne pas avoir de duplication de code et constamment à mettre l'image après l'élément, il vous suffit d'utiliser dans le CSS le pseudo-élément after, qui contiendrait alors l'image et toute sa mise en forme.
    C'est donc pour éviter la duplication de code inutile et permet également d'autres manipulations plus poussées du CSS. Le pseudo-élément :before est plus où moins pareil, sauf que c'est avant l'élément, et non pas après.



    Okhmhaka
    MasculinAge : 31Message(s) : 31700

    le Mar 6 Mai 2014 - 0:26

    En fait ce n'est pas le "clear" qui permet de palier à ce problème dans ce cas présent, je crois que tu ne parles pas du même tuto' que moi en fait XD. Disons que, puisque tu abordais les catégories avec les sous-forum en deux colonnes et le problème d'y mettre un cadre (avec en-tête, fond répété et pied de page), je croyais que tu mentionnais l'astuce donnée dans mon tutoriel ici, mais apparemment pas puisque tu ne mentionnes que l'astuce du "float", il y'en a une deuxième en fait, dont je parlais quand je disais que c'était un peu du bricolage^^ J'ai juste mis des "span" de 1px de haut pour indiquer le début et la fin des catégories, pour qu'elle soit définie et que le fond et les autres images se placent bien.

    En fait, c'est comme tout, l'utilisation dépend des circonstances. Perso' je trouve que le float est très bien pour aligner horizontalement deux ou trois éléments, mais va en placer 4 ou 5 sur la même ligne... ça devient compliqué. Comment dire lequel doit flotter le plus à droite ? Enfin ça me parait du coup un peu hasardeux. Le display "inline-block" est pour moi très pratique pour mettre des images côte à côte tout en ayant les possibilités d'un "block". Quant au positionnement avec l'absolute bah je l'aime bien aussi, lorsque par exemple je dois placer des blocs mais pas forcément alignés, par exemple dans la PA ou le QEEL actuels du forum. Alors c'est vrai que ça demande de tâtonner un peu niveau marges, mais une fois placer on est au moins sûr que les éléments ne vont pas se décaler les uns par rapport aux autres, surtout si on vient à modifier la largeur de l'un. C'est aussi l'astuce que je donne pour placer les éléments dans un forum, quand on a cassé tout les jolis tableaux de FA x) Les gens demandent souvent de l'aide car ils voient qu'ils mettent un élément bien, et après tout merde parce que tout est en relatif. Si on prend le temps de bien faire les zones avec des couleurs bien pétard pour voir nos cadres, l'absolute est une solution facile et assez "sûre" je trouve, dans ce cas du moins.

    Peut-être le re-citer simplement directement DANS le tuto' ? Car je t'avoue que les gens cliqueront pas dessus, pour la moitié ^^" Genre tu reviens à la ligne dans ton paragraphe et tu mets :
    Exemple
    (en lien vers la page) Au moins t'es sûre qu'ils iront voir le bon truc^^

    Les before & after j'ai vaguement compris, disons que je ne vois pas encore comment l'appliquer concrètement. Quand je vois ce que le gars de CSS3create fait avec je me dis que c'est trop bien, mais j'arrive pas à l'intégrer dans mes codes, j'ai pris l'habitude de faire autrement donc je bloque sur cette utilisation là ^^"

    D'ailleurs ta solution d'overflow pour les catégories m'intrigue, c'est à tester mais je crois que si tes caté' n'ont pas la même hauteur ça risque de poser problème, même avec un "height: auto"... A tester, faudra que je vois ça^^



    NyoTheNeko
    FémininAge : 22Message(s) : 5018

    le Mar 6 Mai 2014 - 19:40

    Ah bah je n'ai pas lu ce tuto, comme tu t'en doutes, vu qu'il est sous hide et que j'ai mes propre solutions x) J'ai failli le faire par curiosité, mais au final non xD

    Et oui, l'utilisation dépend des circonstances, on est bien d'accord! D'ailleurs, pour une Pa, c'est mille fois plus laborieux d'utiliser des float que des position! C'est juste que pour mettre des choses côte-à-côte, le float me semble meilleur, et ce, même que le display-inline! Après c'est mon avis personnel hein Wink

    Pour le before & after, comme dit, je vais tenter de prendre le temps pour faire un tuto sur les pseudo-éléments! ^^

    Et non, si tes caté n'ont pas la même hauteur, y'a pas de problème, justement parce que tu ne mets pas de height du tout!

    Par contre, je ne peux pas éditer mon premier message pour ajouter des exemples =/



    Okhmhaka
    MasculinAge : 31Message(s) : 31700

    le Ven 9 Mai 2014 - 14:12

    Ben j'ai pas regardé qui avait répondu au tuto' en détail sur le moment, j'ai vu qu'après lorsque j'en ai parlé^^

    D'ac, et ok aussi pour la hauteur x)

    Je vais redéplacer le topic dans les propositions le temps que tu puisses éditer du coup...



    NyoTheNeko
    FémininAge : 22Message(s) : 5018

    le Ven 9 Mai 2014 - 16:10

    Et voilà!
    1) Ajout des exemples au tout début du tuto.
    2) Ajout d'une petite note concernant l'after au début de l'étape
    3) Ajout d'une note sur l'inline-block en mettant en gras ce que précédemment dit, suite à la conversation avec Sparrow.
    4) Ajout d'une note sur le positionnement, suite à la conversation avec Sparrow.



    Okhmhaka
    MasculinAge : 31Message(s) : 31700

    le Mar 13 Mai 2014 - 9:28

    Perfecto Very Happy

    Je re-déplace et je l'ajoute dans l'Index du cursus. Encore merci Wink



    sica3
    MasculinAge : 43Message(s) : 135

    le Sam 29 Nov 2014 - 1:58

    thank's
    Nihil Scar Winspeare
    Message(s) : 3924

    le Dim 25 Jan 2015 - 0:18

    Merci pour ton partage Nyo (^-^) ! (ton tuto sur les after est sorti depuis ? Je ne le trouve pas ><)
    ( :hug: ← pour toutes les personnes qui font l'effort d'écrire de longs tutos)

    J'avoue que quand j'ai découvert la solution de l'overflow j'ai trouvé ça trop cool *-* (merci à l'article Ce que vous avez toujours voulu savoir sur CSS de Vincent De Oliveira).

    Pour connaître d'autres propriétés qui permettent de clear le float, on peut aussi lire ce petit article d'Alsacréation : Le contexte de formatage block en CSS

    Je donne les liens des articles pour ceux qui voudraient en savoir plus mais ne sont pas très à l'aise en anglais :p

    Ainsi par exemple pour les overflow, on peut mettre hidden, auto ou overflow, dans tous les cas ça permettra de clear le float. :)

    Je trouve que auto est un bon compris entre scroll (qui affiche les barre de défilement comme tu l'as dit) et hidden (qui en masquant le contenu est peut-être dans certains cas un peu trop "brutal" si on a une hauteur définie).

    Bien entendu, comme dis dans les articles, d'autres manière faire existent en plus. (^-^)

    Il y a plusieurs avis effectivement pour l'inline-block et le float Very Happy... Pour ma part, ça dépend du contexte, mais je dois avouer que je préfère l'inline-block en général o/




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    Manumanu
    MasculinAge : 29Message(s) : 69

    le Mar 10 Mar 2015 - 13:45

    Là aussi, je m'insère après la bataille, mais j'aimerais revenir sur la question du float vs inline-block, et sur la question du positionnement en général.

    Le fait est qu'à la base, float n'est effectivement pas pensé pour mettre en forme une page, faire des colonnes, ou autre, mais simplement pour mettre des images dans du texte de façon "élégante". Le fait est que pour l'instant, on n'a pas mieux. L'arrivée prochaine de grid-layout et flexbox pour la révision 4 du CSS (à priori) devrait nous donner de nouveaux outils pour l'horizon 2020 (le temps qu'on puisse effectivement utiliser ça en production, en n'ayant pas besoin d'être compatible pour de trop vieux navigateurs).

    On utilise plutôt float pour tout ce qui est colonnes, et inline-block pour tout ce qui est texte et/ou alignement de blocs statiques (qui ont soit une largeur fixe, soit aucune largeur définie), par exemple ceci :


    Mais inline-block ne présente pas la flexibilité nécessaire à un système de colonnes fluides et modulaires, comme ceci : http://lab.infographizm.com/css/gabarits/adaptatif-colonnes/

    Voilà voilà. :)



    Yukimura Esuki
    MasculinAge : 20Message(s) : 106

    le Ven 14 Aoû 2015 - 20:01

    Merci pour ce tuto' ! o/
    Teika
    FémininAge : 25Message(s) : 26

    le Jeu 8 Sep 2016 - 19:23

    Nyaaaah, j'avais tout bien compris jusqu'à l'étape 6, mais là vous m'avez perdu. Je vais farfouiller par moi-même mais je tiens à signaler que pour ceux qui suivent le parcours sans vraiment s'y connaitre à la base, ce 6b est chauuuud. :panic:

    En tout cas merci pour votre travail !



    Contenu sponsorisé

    Aujourd'hui à 13:16


      La date/heure actuelle est Dim 4 Déc 2016 - 13:16