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 )

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:


Ou ceci:


À cela:

Et cela:

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.

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.


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;
}

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;
}

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;
}

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:




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


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!



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

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 !

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:

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 :
(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^^

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

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 =/

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

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.

Perfecto

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

thank's

Merci pour ton partage Nyo (^-^) ! (ton tuto sur les after est sorti depuis ? Je ne le trouve pas ><)
( ← 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 ... 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/

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

Merci pour ce tuto' ! o/

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.

En tout cas merci pour votre travail !