Bonjour,
Je cherche à construire un site à trois colonnes en utilisant ce tutoriel www.alsacreations.com/tuto/lire/588-trois-colonnes-float.html et je n'y arrive pas. Soit les tutos sont incomplets soit je ne sait pas les ordonner, est-ce que je dois utiliser layout.css pour le compléter ou dois-je le refaire complètement en utilisant perso.css
Merci de votre aide

<edit> correction du lien.
Modifié par gcyrillus (20 Apr 2021 - 20:56)
Modérateur
Bonjour,

Float, pour créer un site en 3 colonnes n'est plus ! RIP.
https://www.alsacreations.com/article/lire/972-float-le-grand-bluff.html

Depuis plusieurs années, display s'est enrichi et permet de construire ce type gabarit facilement.

Au debut , il y avait float, vite détournée pour ce que tu veut faire et que tu peut laisser de coté ,mais trés utile et incoutournable avec shape-outside par exemple . https://developer.mozilla.org/fr/docs/Web/CSS/shape-outside - 2 exemples ou float est utile : https://codepen.io/gc-nomade/pen/JjbwvBe , https://codepen.io/gc-nomade/pen/vwqKyR

Il y a eu en 1998 display:table, qui n'a quasi jamais été utilisé (a cause de IE6 particulièrement à l'époque) et souvent mal aimé car confondu avec un vrai tableau(table>/<td>/...).

En 1999, il y a eu les colonnes (column CSS), mais pas destiné a structurer visuellement un site mais plutôt a faciliter la lecture d'un texte compacte .

Enfin flex(2009) et grid(2012 regain de 2004) ont mis un peu plus d'une décennie a arrivés.
Float a eu de beaux jours pour ce type de mise en forme, mais c'est révolu!.

Nos navigateurs actuels nous permettent d'utiliser l'un et l'autre (merci aussi à nos PC ) . Je te conseille de voir de ce coté.


2014 - https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html

2016 - https://www.alsacreations.com/outils/lire/1719-flexbox-cheat-sheet-pense-bete.html

2017 - https://www.alsacreations.com/actu/lire/1735-les-navigateurs-supportent-grid-layout.html

2018 - https://www.alsacreations.com/tuto/lire/1771-css-grid-layout-en-production.html

2019 - https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html

2012-2020 https://www.alsacreations.com/article/lire/1388-CSS3-Grid-Layout.html

Cdt


edit en racourcie pour grid avec :
<body>
  <nav></nav>
  <main></main>
  <aside></aside>
</body>

et comme CSS
body {
   display:grid;
   grid-template-columns: 250px 1fr 250px;
}


Tu auras 3 colonnes , nav et aside aux extrémités avec 250px de largeur et main au milieu qui prendra toute la place restante. C'est aussi faisable avec display:table en prenant en compte le comportement d'un tableau pour le contenir. Pour float , ce sont les limites qu'il faut accepter , respecter l'ordre des flottants et non flottants et surtout, il y a les effets de bords a gérer...
Modifié par gcyrillus (20 Apr 2021 - 21:42)
Administrateur
Bonjour et merci gcyrillus pour cette réponse aussi correcte que précise Smiley smile

J'en ai profité pour afficher un encart de précaution en début de tutoriel...

upload/1619084180-1-capturedaeacran2021-04-22aa11.33..png