La mise en page est facile avec CSS. Si vous avez l’habitude d’utiliser la disposition des tableaux, cela sera difficile au début. Ce n'est pas difficile, cela a juste des motivations différentes et a plus de sens dans la pratique.

Vous pouvez traiter chaque section de cette page comme une section distincte, quelle que soit la section que vous choisissez. Vous pouvez remplacer ce bloc par ce bloc de manière absolue ou relative.

position est utilisé pour définir si un élément est absolu, relatif, statique ou fixe.

Les valeurs statiques sont les valeurs par défaut des éléments, qui sont générés dans l'ordre normal tel qu'ils apparaissent en HTML.

relatif est comme statique, mais vous pouvez utiliser les propriétés top, right, bottom et left pour décaler la position d'origine.

Absolute sépare l'élément du flux normal du HTML et l'envoie dans un monde de positionnement qui lui est entièrement propre. Dans ce monde un peu fou, cet élément absolu peut être placé n'importe où à condition que les valeurs haut, droite, bas et gauche soient définies.

Fixed se comporte également comme un absolu, mais place les éléments absolus par rapport à la fenêtre du navigateur par rapport à la page, donc, en théorie, les éléments fixes restent complètement dans la fenêtre du navigateur lorsque la page défile. Pourquoi théoriquement ? À tout le moins, cela fonctionne bien sous Mozilla et Opera, mais pas dans IE.

Vous pouvez utiliser le positionnement absolu pour créer une mise en page traditionnelle à deux colonnes en utilisant des règles similaires aux suivantes en HTML :

Ra ra banjo banjo

Bienvenue au Ra ra page banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.

(Ra ra banjo banjo)

une barre de navigation d'une longueur de 10em est placée à gauche. Étant donné que la navigation est positionnée de manière absolue, elle n'aura aucun impact sur le flux du reste de la page. Il vous suffit donc de définir la largeur de la bordure gauche de la zone de contenu pour qu'elle soit la même que la largeur de la navigation. bar.

C'est si simple ! Cependant, vous n'êtes pas limité par cette approche à deux colonnes. Grâce au positionnement intelligent, vous pouvez disposer autant de blocs que nécessaire. Par exemple, si vous devez ajouter une troisième colonne, vous pouvez ajouter un bloc « navigation2 » au HTML et appliquer le CSS suivant :

Le seul effet secondaire du positionnement absolu des éléments est que, parce qu'ils vivent dans leur propre monde, il n'y a aucun moyen de décider exactement où ils finissent. Si vous utilisez l'exemple ci-dessus dans une zone avec moins de navigation et plus de contenu, il n'y a pas de problème, mais, surtout lorsque vous utilisez des valeurs relatives pour la longueur et la largeur, vous devez souvent abandonner l'espoir de mettre quelque chose comme des notes de bas de page en dessous. Si vous voulez vraiment le faire, au lieu de les positionner absolument, faites-les flotter.

Floating déplacera un élément vers la gauche ou la droite de la même ligne, tandis que le contenu environnant flottera.

Le flottement est souvent utilisé pour positionner de petits éléments dans une page (dans le CSS par défaut d'origine de ce site, le lien "page suivante" du HTML Basic Guide et du CSS Basic Guide flotte vers la droite. Voir aussi : pseudo-éléments premiers entrés exemple de lettre), mais peut également être utilisé dans des blocs plus grands, tels que des colonnes de navigation.

Si vous ne souhaitez pas que l'élément suivant entoure l'objet flottant, vous pouvez utiliser la propriété clear. clear : left effacera l'élément de gauche, clear : right effacera l'élément de droite et clear : les deux effaceront les éléments gauche et droit. Ainsi, par exemple, vous avez besoin d'un pied de page, vous pouvez ajouter un bloc au HTML avec l'identifiant "footer", puis utiliser le CSS suivant :

Eh bien, vous l'avez. Une note de bas de page apparaît sous toutes les colonnes, quelle que soit la longueur d'une colonne.

nous avons abordé le positionnement et le flottement en général, en mettant l'accent sur les « gros » blocs de la page, mais gardez à l'esprit que ces méthodes peuvent également être utilisées sur n'importe quel élément de ces blocs. En combinant le positionnement, le flottement, les bordures, le remplissage et les bordures, vous pouvez reproduire n'importe quelle conception de mise en page. En termes de mise en page, les tableaux ne peuvent rien faire sans CSS.

La seule raison d’utiliser une disposition en tableau est si vous essayez de vous adapter aux anciens navigateurs. C'est là que CSS montre réellement son progrès : les pages à haute convivialité ne représentent qu'une fraction de la taille du fichier des pages basées sur des tableaux.

Mise en page du didacticiel avancé CSS

Ra ra banjo banjo