Positionnement des éléments CSS3. Les éléments positionnés de manière absolue ne subissent pas d'effondrement du remplissage. Les éléments peuvent se chevaucher

Un élément bloc en HTML est un élément qui, par défaut, occupe toute la largeur de son élément parent. L'élément parent peut être un autre élément de bloc ou une fenêtre de navigateur. Vous pouvez définir la largeur et la hauteur d'un élément de bloc à l'aide des propriétés CSS. Le positionnement des éléments de bloc consiste à les positionner dans la fenêtre du navigateur et par rapport à eux à l'aide des propriétés CSS position , left , top , right et bottom . La propriété CSS position est conçue pour définir l'un des quatre types de positionnement disponibles : statique (par défaut), absolu, fixe et relatif. Les propriétés CSS restantes, à savoir left , top , right et bottom , sont destinées à définir les distances par rapport aux bords gauche, supérieur, droit et inférieur de l'élément parent. De plus, lors de la définition de certaines propriétés, les éléments de bloc peuvent se chevaucher et cette fonctionnalité peut également être utilisée sur les sites Web.

Positionnement par défaut (statique)

Si vous n'avez pas spécifié de position pour un élément de bloc ou spécifié static , ce qui revient au même, alors les éléments de bloc sont disposés dans l'ordre. De plus, le bloc suivant (par exemple : rouge) se situe sur une nouvelle ligne. De plus, ce positionnement n'est pas affecté par le réglage des distances à gauche, en haut, à droite et en bas.

Positionnement absolu (absolu)

Avec le positionnement absolu, la position d'un élément est spécifiée par rapport aux bords de la fenêtre du navigateur à l'aide des distances spécifiées par les propriétés left , top , right et bottom . Si vous spécifiez les distances gauche et droite en même temps et qu'elles sont en conflit les unes avec les autres, alors la préférence est donnée à left , il en va de même pour top et bottom , dans lesquels la distance top est prioritaire. Le positionnement absolu est très souvent utilisé en conjonction avec le positionnement relatif à des fins de conception, lorsqu'il est nécessaire de placer divers éléments les uns par rapport aux autres, il peut également être utilisé pour créer des menus déroulants, une mise en page de sites, etc.

Positionnement fixe

Le positionnement fixe est différent des autres types de positionnement et ne bouge pas avec le contenu lorsque vous faites défiler la page. Les éléments de bloc à position fixe sont ancrés à l'aide des propriétés left , top , right et bottom aux bords de la fenêtre du navigateur. Le positionnement fixe permet de créer des interfaces frame (la fenêtre du navigateur est divisée en plusieurs zones), un menu fixe, un pied de page fixe et des blocs « permanents » (liste de liens, boutons sociaux, etc.).

Positionnement relatif

Le positionnement relatif est spécifié en spécifiant les distances left , top , right et bottom par rapport à sa position actuelle.

Cependant, cette position de bloc peut également être créée à l'aide de la propriété margin.

Le positionnement relatif n'est pas amusant à utiliser seul, il est principalement utilisé en conjonction avec le positionnement absolu.

Considérons les options :

L’un des avantages du CSS est que les styles nous donnent la possibilité de positionner le contenu et les éléments sur une page de presque toutes les manières imaginables. Cela ajoute de la structure à notre conception et contribue à rendre le contenu plus visuel.

Il existe plusieurs types de positionnement en CSS, chacun de ces types ayant sa propre portée. Dans ce chapitre, nous allons examiner quelques cas d'utilisation différents (création de mises en page réutilisables et positionnement unique d'éléments jetables), ainsi que décrire quelques méthodes pour ce faire.

Positionnement via flotteur

Une façon de positionner des éléments sur une page consiste à utiliser la propriété float. Cette propriété est assez polyvalente et peut être utilisée de différentes manières.

Essentiellement, la propriété float prend un élément, le supprime du flux normal de la page et le positionne à gauche ou à droite de son élément parent. Tous les autres éléments de la page s'enrouleront autour d'un tel élément. Par exemple, les paragraphes s'enrouleront autour d'une image si l'élément La propriété float est définie.

Lorsque la propriété float est appliquée à plusieurs éléments à la fois, elle permet de créer une mise en page avec des éléments flottants côte à côte ou en face les uns des autres, comme indiqué dans une mise en page multi-colonnes.

La propriété float prend plusieurs valeurs, les deux plus populaires étant left et right, qui permettent à l'élément de flotter à gauche ou à droite de son parent.

Img (flottant : gauche ; )

flotter en pratique

Créons une mise en page générale avec un en-tête en haut, deux colonnes au centre et un pied de page en bas. Idéalement, cette page devrait être balisée à l'aide des éléments , et, comme décrit dans la leçon 2, « Présentation du HTML ». À l'intérieur d'un élément, le code HTML pourrait ressembler à ceci :

... ... ... ...

Démonstration d'une mise en page sans float

Ici, les éléments sont au niveau des blocs, ils sont donc empilés les uns sur les autres par défaut. Cependant, nous souhaitons que ces éléments soient côte à côte. En réglant float à gauche et à droite pour float, nous pouvons les positionner comme deux colonnes opposées l'une à l'autre. Notre CSS devrait ressembler à ceci :

Section ( float: gauche; ) de côté ( float: right; )

Pour référence, les éléments flottants sont positionnés le long du bord de l'élément parent. S'il n'y a pas de parent, l'élément flottant sera positionné en bord de page.

Lorsque nous définissons un élément comme flottant, nous le supprimons du flux normal du document HTML. Cela fait que la largeur par défaut de cet élément devient la largeur de son contenu. Parfois, par exemple lorsque nous créons des colonnes pour une mise en page réutilisable, ce comportement n'est pas souhaitable. Cela peut être corrigé en ajoutant une propriété width avec une valeur fixe pour chaque colonne. De plus, pour empêcher les éléments flottants de se toucher, provoquant ainsi le placement du contenu d'un élément à côté d'un autre, nous pouvons utiliser la propriété margin pour définir l'espace entre les éléments.

Ci-dessous, nous étendons le bloc de code précédent en ajoutant une marge et une largeur pour chaque colonne afin de mieux façonner le résultat souhaité.

Section ( float : gauche ; marge : 0 1,5 % ; largeur : 63 % ; ) côté ( float : droite ; marge : 0 1,5 % ; largeur : 30 % ; )

La démo de mise en page avec floatfloat peut modifier la valeur d'affichage de l'élément

Pour un élément flottant, il est également important de comprendre que l'élément est supprimé du flux normal de la page et que la valeur d'affichage par défaut de l'élément peut changer. La propriété float repose sur la valeur d'affichage de l'élément définie sur block et peut modifier la valeur d'affichage par défaut de l'élément s'il n'est pas déjà rendu en tant qu'élément de bloc.

Par exemple, un élément dont l'affichage est défini sur inline , tel que inline , ignore les propriétés de hauteur ou de largeur. Cependant, si vous spécifiez un float pour un élément en ligne, la valeur d'affichage deviendra block et l'élément pourra alors déjà prendre les propriétés height ou width.

Lorsque nous faisons flotter un élément, nous devons faire attention à la manière dont cela affecte la valeur de la propriété display.

Pour deux colonnes, vous pouvez définir float, une colonne à gauche et l'autre à droite, mais pour plusieurs colonnes, nous devrons changer notre approche. Disons, par exemple, que nous aimerions avoir une ligne de trois colonnes entre nos éléments et . Si nous supprimons notre élément et utilisons trois éléments, notre code HTML pourrait ressembler à ceci :

... ... ... ... ...

Pour disposer ces trois éléments dans une ligne de trois colonnes, nous devons définir le float de tous les éléments à left . Il faut également ajuster la largeur pour prendre en compte les colonnes supplémentaires et les positionner les unes à côté des autres.

Section ( float : gauche ; marge : 0 1,5 % ; largeur : 30 % ; )

Ici, nous avons trois colonnes, toutes avec la même largeur et la même valeur de marge, et float défini sur left .

Démonstration d'une mise en page à trois colonnes avec floatClearing et contenu float

La propriété float a été initialement conçue pour permettre au contenu de circuler autour des images. Une image peut recevoir un flottant et tout le contenu autour de cette image circule naturellement autour d'elle. Bien que cela fonctionne très bien pour les images, la propriété float n'est pas vraiment destinée à être utilisée à des fins de mise en page et de positionnement et comporte donc quelques pièges.

L'un de ces pièges est que parfois les styles appropriés n'apparaissent pas sur un élément adjacent ou parent d'un élément flottant. Lorsqu'un élément est défini sur flottant, il est supprimé du flux normal de la page et, par conséquent, les styles d'élément autour de cet élément flottant peuvent être affectés négativement.

Souvent, les valeurs des propriétés margin et padding sont mal interprétées, ce qui les amène à se fondre dans l'élément flottant. D'autres propriétés peuvent également être affectées.

Un autre bug est que parfois du contenu indésirable commence à s'enrouler autour de l'élément float. La suppression d'un élément du flux du document permet à tous les éléments autour de l'élément flottant de le contourner et d'occuper tout l'espace disponible autour de l'élément flottant, ce qui est souvent indésirable.

Dans notre exemple précédent à deux colonnes, après avoir ajouté un flotteur aux éléments et, mais avant de définir la propriété width sur l'un ou l'autre, le contenu à l'intérieur de l'élément était positionné entre les deux éléments flottants au-dessus, remplissant tout l'espace disponible. . Par conséquent, l'élément se trouverait dans l'espace entre les éléments et , occupant de l'espace libre.

Démonstration de tracé sans effacement des flotteurs

Pour empêcher le contenu de s'enrouler autour des éléments flottants, nous devons effacer le flottant et ramener la page à son flux normal. Nous verrons comment effacer les flotteurs, puis examinerons leur contenu.

Flotteurs de dégagement

La suppression d'un flottant s'effectue à l'aide de la propriété clear, qui prend plusieurs valeurs différentes : les valeurs les plus couramment utilisées sont left , right et les deux .

Div ( clair : gauche ; )

La valeur left efface les flotteurs de gauche, tandis que la valeur right efface les flotteurs de droite. Cependant, la valeur à la fois effacera les flotteurs gauche et droit et constitue souvent l'option la plus idéale.

En revenant à notre exemple précédent, si nous utilisons la propriété clear avec la valeur sur un élément, nous pouvons effacer le float. Il est important que clear soit appliqué à l'élément spécifié après les éléments flottants, et pas avant, afin de ramener la page à son flux normal.

Pied de page ( clair : les deux ; )

Démonstration d'une mise en page avec effacement du floatContenu de float

Au lieu d'effacer float , une autre option consiste à définir le contenu sur float . Le résultat sera à peu près le même, mais le contenu flottant garantit vraiment que tous nos styles s'afficheront correctement.

Pour définir le contenu flottant, les éléments flottants doivent être à l'intérieur de l'élément parent, il agira comme un conteneur, laissant le flux du document complètement normal à l'extérieur de celui-ci. Le style de cet élément parent est représenté par une classe de groupe, comme indiqué ici :

Group::before, .group::after ( contenu: ""; affichage: tableau; ) .group::after ( effacer: les deux; ) .group ( effacer: les deux; *zoom: 1; )

Il ne se passe pas grand-chose ici, mais essentiellement tout ce que fait le CSS est d'effacer tous les éléments flottants à l'intérieur de l'élément group et de ramener le document au flux normal.

Plus précisément, les pseudo-éléments ::before et ::after, comme expliqué dans la leçon 4, génèrent dynamiquement des éléments au-dessus et au-dessous d'un élément avec la classe group . Ces éléments n'incluent aucun contenu et sont rendus sous forme d'éléments de tableau, similaires aux éléments de bloc. Un élément généré dynamiquement après un élément de groupe efface le flotteur à l'intérieur de l'élément de groupe, tout comme clear le faisait auparavant. Enfin, l'élément group efface également tous les flottants qui peuvent apparaître devant lui au cas où il y aurait un flottant avec la valeur left ou right . Une petite astuce est également incluse qui permet aux anciens navigateurs de fonctionner correctement.

Il y a plus de code ici que la simple commande clear: two, mais cela peut être très utile.

Compte tenu de notre mise en page à deux colonnes, nous pourrions également envelopper l'élément parent. Cet élément parent contiendra des éléments flottants. Le code ressemblera à ceci :

... ... ... ...

Group::before, .group::after ( contenu: ""; affichage: table; ) .group::after ( effacer: les deux; ) .group ( effacer: les deux; *zoom: 1; ) section ( float: gauche ; marge : 0 1,5 % ; largeur : 63 % ; ) de côté ( float : droite ; marge : 0 1,5 % ; largeur : 30 % ; )

Démonstration d'une mise en page avec du contenu flottant

La technique présentée ici est connue sous le nom de "clearfix" et est souvent vue sur d'autres sites avec le nom de classe clearfix ou cf. Nous avons choisi d'utiliser le nom de classe group car il représente un groupe d'éléments et exprime mieux le contenu.

Lorsque des éléments flottent, il est important de surveiller la manière dont ils affectent le flux des pages et de garantir que le flux des pages est réinitialisé en effaçant ou via le contenu flottant comme prévu. Sinon, garder une trace des flottants peut causer beaucoup de problèmes, en particulier sur les pages contenant plusieurs lignes, chacune avec plusieurs colonnes.

En pratique

Revenons au site Styles Conference et essayons d'ajouter des flotteurs à certains contenus.

Tout d'abord, avant d'appliquer float à un élément, fournissons du contenu à ces éléments flottants en ajoutant clearfix à notre CSS. Dans le fichier main.css, juste en dessous de nos styles de grille, nous ajouterons clearfix sous le nom de la classe de groupe, comme avant.

Maintenant que nous pouvons utiliser float, plaçons-le pour l'élément principal à l'intérieur à gauche et laissons le reste du contenu de l'en-tête flotter vers la droite.

Pour ce faire, ajoutez la classe logo à l'élément. Ensuite, dans notre CSS, nous ajouterons une nouvelle section de style pour l'en-tête principal. Dans cette section, nous allons sélectionner un élément avec la classe logo et définir le float sur left .

Conférence sur les styles/* ======================================= En-tête principal ====== = =================================== */ .logo ( float: gauche; )

Pendant que nous y sommes, ajoutons un peu plus de détails à notre logo. Commençons par placer l'élément
ou un saut de ligne entre les mots « Styles » et « Conférence » pour forcer le texte de notre logo à apparaître sur deux lignes.

En CSS, nous ajouterons une bordure en haut de notre logo et un remplissage vertical afin que le logo puisse « respirer » librement.

Styles
Conférence

Logo ( bordure supérieure : 4 px solide #648880 ; remplissage : 40px 0 22px 0 ; float : gauche ; )

Puisque nous avons rendu l'élément float, nous souhaitons définir le contenu sur float . Le parent le plus proche de est l'élément, nous allons donc lui ajouter une classe de groupe. Cela lui appliquera les styles clearfix que nous avons définis précédemment.

...

L'élément prend forme, alors jetons un coup d'œil au . Semblable à ce que nous avons fait avec , nous allons placer le flotteur de nos droits d'auteur à gauche à l'intérieur et laisser tous les autres éléments s'enrouler autour de lui vers la droite.

Cependant, contrairement à l'élément, nous n'allons pas appliquer la classe directement à l'élément flottant. Cette fois, nous allons ajouter une classe au parent de l'élément float et utiliser un sélecteur CSS unique pour sélectionner l'élément, puis lui attribuer un float .

Commençons par ajouter la classe Primary-footer à l'élément. Puisque nous savons que nous aurons des éléments flottants à l’intérieur, nous devrions ajouter une classe de groupe pendant que nous y sommes.

...

Maintenant que la classe Primary-footer est définie sur l'élément, nous pouvons utiliser cette classe pour sélectionner spécifiquement l'élément à l'aide de CSS. Nous voulons lui donner un float comme left . N'oubliez pas de créer une nouvelle section dans notre fichier main.css pour le style de pied de page principal.

/* ======================================== Sous-sol principal ====== ==================================== */ .primary-footer small ( float: left; )

Pour vérifier, nous sélectionnons ici un élément qui doit être à l'intérieur d'un élément avec la valeur de pied de page principale de l'attribut class, comme notre élément, par exemple.

Enfin, ajoutons un peu de remplissage en haut et en bas de l'élément, cela aidera à le séparer un peu du reste de la page. Nous pouvons le faire directement en utilisant la classe Primary-footer.

Pied de page principal ( padding-bottom: 44px; padding-top: 44px; )

Avec toutes ces modifications apportées aux éléments et , nous devons être sûrs de les apporter sur chaque page, pas seulement sur la page index.html.

Riz. 5.01. En utilisant plusieurs flottants, les éléments de la page principale de Styles Conference fonctionnent ensemble

Positionnement via un bloc en ligne

En plus d'utiliser float, une autre façon de positionner le contenu consiste à utiliser la propriété display en combinaison avec la valeur inline-block. La méthode des blocs en ligne, comme nous le verrons plus tard, est principalement utile pour mettre en page des pages ou pour placer des éléments sur une ligne les uns à côté des autres.

Rappelez-vous que la valeur inline-block de la propriété display affiche les éléments sur une ligne et leur permet de prendre toutes les propriétés du modèle de boîte, notamment height , width , padding , border et margin . L'utilisation de inline-block nous permet de tirer pleinement parti du modèle de bloc sans avoir à nous soucier de supprimer les flotteurs.

bloc en ligne en pratique

Jetons un coup d'œil à notre exemple à trois colonnes depuis le début. Nous allons commencer par enregistrer notre HTML comme ceci :

... ... ... ... ...

Maintenant, au lieu de float pour nos trois éléments, nous allons changer leur valeur d'affichage en inline-block , laissant les propriétés margin et width telles qu'elles étaient auparavant. En conséquence, notre CSS ressemblera à ceci :

Section ( affichage : bloc en ligne ; marge : 0 1,5 % ; largeur : 30 % ; )

Malheureusement, ce code à lui seul ne suffit pas à faire l'affaire et le dernier élément est poussé sur une nouvelle ligne. N'oubliez pas que, comme les éléments de bloc en ligne apparaissent sur une ligne les uns à côté des autres, ils incluent un seul espace entre eux. Lorsque la taille de chaque espace individuel est ajoutée à la largeur et à la valeur de marge horizontale de tous les éléments de la ligne, la largeur globale devient trop grande, poussant le dernier élément sur une nouvelle ligne. Pour afficher tous les éléments sur une seule ligne, vous devez supprimer l'espace blanc entre chacun.

Démonstration d'éléments de bloc en ligne avec spaceSuppression de l'espace entre les éléments de bloc en ligne

Il existe plusieurs méthodes pour supprimer l'espace entre les éléments de bloc en ligne, et certaines sont plus complexes que d'autres. Nous allons nous concentrer sur les deux méthodes les plus simples, toutes deux utilisées en HTML.

La première solution consiste à placer la balise d'ouverture de chaque nouvel élément sur la même ligne que la balise de fermeture de l'élément précédent. Au lieu d'utiliser une nouvelle ligne pour chaque élément, nous finissons par commencer les éléments sur la même ligne. Notre code HTML pourrait ressembler à ceci :

... ... ... ... ...

L'écriture d'éléments de bloc en ligne de cette manière garantit qu'il n'y a pas d'espace entre ces éléments en HTML. Par conséquent, l’espace n’apparaîtra pas lors de l’affichage de la page.

Démonstration d'éléments de bloc en ligne sans espaces

Une autre méthode pour supprimer l'espace entre les éléments de bloc en ligne consiste à ouvrir un commentaire HTML immédiatement après la balise de fermeture de l'élément. Fermez ensuite le commentaire juste avant la balise ouvrante de l'élément suivant. Cela permet aux éléments de bloc en ligne de commencer et de se terminer sur des lignes distinctes en HTML et de « commenter » tout espace potentiel entre les éléments. Le code résultant ressemblera à ceci :

... ... ... ... ...

Aucune de ces options n’est parfaite, mais elles sont utiles. J'ai tendance à privilégier l'utilisation des commentaires pour une meilleure organisation, mais l'option que vous choisissez dépend entièrement de vous.

Créer des mises en page réutilisables

Lors de la création d'un site, il est toujours préférable d'écrire des styles modulaires qui peuvent être réutilisés ailleurs, et les mises en page réutilisables figurent en tête de liste du code réutilisable. Les mises en page peuvent être créées à l’aide d’éléments flottants ou de blocs en ligne, mais lequel fonctionne le mieux et pourquoi ?

La question de savoir si les éléments flottants ou en blocs en ligne sont meilleurs pour la structure des pages est ouverte au débat. Mon approche consiste à utiliser des éléments de bloc en ligne pour créer une grille ou une mise en page, puis à utiliser un flotteur lorsque je souhaite que le contenu circule autour de l'élément (ce pour quoi les flotteurs ont été conçus lorsque je travaille avec des images). En général, je trouve également que les éléments de blocs en ligne sont plus faciles à utiliser.

Cependant, utilisez ce qui vous convient le mieux. Si vous êtes plus familier avec une approche qu’une autre, utilisez-la.

De nouvelles spécifications CSS sont en préparation - en particulier les propriétés flex et grid - qui vous aideront à décider de la meilleure façon de présenter vos pages. Gardez un œil sur ces méthodes lorsqu’elles commencent à apparaître.

En pratique

Avec une solide compréhension des mises en page réutilisables, il est temps d'en implémenter une sur notre site Styles Conference.

Pour le site Web de Styles Conference, nous créerons une mise en page à trois colonnes en utilisant des éléments de blocs en ligne. Nous ferons cela de manière à obtenir trois colonnes de même largeur, ou deux colonnes dont la largeur totale est divisée entre elles par 2/3 pour l'une et 1/3 pour l'autre.

Tout d’abord, nous allons créer des classes qui définissent la largeur de ces colonnes. Nous appellerons ces deux classes col-1-3 pour un tiers et col-2-3 pour les deux tiers. Dans la section Grid de notre fichier main.css, avançons et définissons ces classes et leurs largeurs correspondantes.

Col-1-3 (largeur : 33,33 % ; ) .col-2-3 (largeur : 66,66 % ; )

Nous voulons que les deux colonnes apparaissent sous forme d'éléments de bloc en ligne. Nous devons également nous assurer que leur alignement vertical est défini en haut de chaque colonne.

Créons deux nouveaux sélecteurs qui partagent display et vertical-align .

Col-1-3, .col-2-3 ( affichage : bloc en ligne ; alignement vertical : haut ; )

Jetez à nouveau un œil à CSS. Nous avons créé deux sélecteurs de classe col-1-3 et col-2-3 séparés par une virgule. Une virgule à la fin du premier sélecteur signifie qu'il est suivi d'un autre sélecteur. Après le deuxième sélecteur, il y a une accolade ouvrante, qui indique que la description du style commence. En utilisant une virgule pour séparer les sélecteurs, nous pouvons lier un style à plusieurs sélecteurs en même temps.

Nous souhaitons mettre un peu d'espace entre les colonnes pour aider à diviser le contenu. Cela peut être fait en ajoutant un remplissage horizontal à chaque colonne.

Cela fonctionne bien, cependant, lorsque deux colonnes sont placées l'une à côté de l'autre, la largeur de l'espace entre elles sera deux fois plus large que l'espace depuis le bord extérieur. Pour équilibrer cela, nous placerons toutes nos colonnes dans une grille et y ajouterons le même remplissage.

Utilisons la classe Grid pour définir notre grille, puis donnons le même remplissage horizontal aux classes Grid, Col-1-3 et Col-2-3. Avec à nouveau des virgules séparant nos sélecteurs, notre CSS ressemble à ceci :

Grille, .col-1-3, .col-2-3 ( padding-left : 15px ; padding-right : 15px; )

Lorsque nous définissons un remplissage horizontal, nous devons être prudents. N'oubliez pas que dans la dernière leçon, nous avons créé un conteneur avec la classe conteneur pour centrer tout notre contenu sur la page d'une largeur de 960 pixels. Actuellement, si nous devions placer un élément de grille à l'intérieur d'un élément conteneur, leur remplissage horizontal s'effondrerait ensemble et nos colonnes n'apparaîtraient pas proportionnelles à la largeur du reste de la page.

Pour ce faire, nous décomposons l'ancien ensemble de règles du conteneur comme suit :

Conteneur, .grid ( marge : 0 auto ; largeur : 960px ; ) .container ( padding-left : 30px ; padding-right : 30px; )

Désormais, tout élément avec la classe conteneur ou grille aura une largeur de 960 pixels et sera situé au centre de la page. De plus, nous avons conservé le remplissage horizontal existant pour tout élément avec la classe conteneur en le déplaçant vers un nouvel ensemble de règles distinct.

Bon, toute la partie la plus difficile de la configuration du maillage est terminée. Il est maintenant temps de travailler avec notre HTML et de voir comment fonctionnent ces classes.

Nous commencerons par les teasers de la page d'accueil, dans le fichier index.html, alignés sur trois colonnes. Actuellement, les teasers sont enveloppés dans un élément avec la classe conteneur. Nous voulons changer la classe de conteneur en grille afin de pouvoir commencer à placer des colonnes à l'intérieur.

...

... ... ...

Et enfin, puisque chacune de nos colonnes est un élément de bloc en ligne, nous devons nous assurer de supprimer tout espace blanc entre elles. Pour ce faire, nous utiliserons des commentaires et ajouterons de la documentation à chaque section afin de mieux organiser notre code.

... ... ...

Pour vérifier, nous avons laissé un commentaire à la ligne 3 identifiant la rubrique « Intervenants » qui la suit. A la fin de la ligne 7, on ouvre un commentaire immédiatement après la balise fermante. A l'intérieur de ce commentaire, à la ligne 9 nous définissons la section suivante "Horaire". Puis on ferme le commentaire au début de la ligne 11, juste avant la balise ouvrante. Une structure de commentaire similaire apparaît aux lignes 13 à 17 entre les deux éléments, juste avant la section « Lieu ». En général, nous avons commenté tout espace blanc potentiel entre les colonnes, tout en utilisant simultanément les mêmes commentaires pour identifier nos sections.

Nous disposons désormais d'une grille réutilisable à trois colonnes qui prend en charge différentes mises en page, utilisant des largeurs de colonne de 1/3 et 2/3. Notre page d'accueil contient désormais trois colonnes, séparant tous les teasers.

Riz. 5.02. La page d'accueil de la conférence Styles comprend désormais une mise en page à trois colonnes

Démo et code source

Ci-dessous, vous pouvez consulter le site Web de Styles Conference dans son état actuel, ainsi que télécharger le code source actuel du site.

Positionnement unique des éléments

Tôt ou tard, tout le monde voudra positionner un élément avec précision, mais les éléments float ou inline-block ne permettent pas une telle astuce. Les éléments flottants qui suppriment un élément du flux de la page produisent souvent des résultats indésirables car les éléments environnants s'enroulent autour de l'élément flottant. Les éléments de bloc en ligne, à moins que nous créions des colonnes, peuvent être assez délicats lorsqu'il s'agit de les positionner correctement. Pour des situations comme celle-ci, nous pouvons utiliser la propriété position en combinaison avec les propriétés de décalage du bloc.

La propriété position détermine comment l'élément est positionné sur la page et s'il sera affiché dans le flux de documents normal. Il est utilisé conjointement avec les propriétés de décalage du bloc top , right , bottom et left , qui déterminent exactement où l'élément sera positionné en le déplaçant dans différentes directions.

Par défaut, la valeur de position de chaque élément est définie sur static , ce qui signifie que l'élément existe dans le flux normal du document et ne prend aucune propriété pour le positionner. La valeur static est le plus souvent écrasée par la valeur relative ou absolue , que nous examinerons ensuite.

Positionnement relatif

Définir la propriété position sur relatif permet aux éléments d'apparaître dans le flux normal de la page, en réservant de l'espace pour l'élément comme prévu et en empêchant d'autres éléments de circuler autour de lui. Cependant, il permet également de modifier la position d'un élément à l'aide des propriétés de décalage. Par exemple, considérons le HTML et le CSS suivants :

... ... ...

Div ( hauteur : 100 px ; largeur : 100 px ; ) .offset ( gauche : 20 px ; position : relative ; haut : 20 px ; )

Démonstration de positionnement relatif

Ici, le deuxième élément avec la classe offset a sa valeur de position définie sur relative , ainsi que deux propriétés de décalage - left et top . Cela conserve la position d'origine de l'élément et les autres éléments ne sont pas autorisés à se déplacer dans cette zone. De plus, les propriétés de décalage déplacent l'élément en le poussant de 20 pixels vers la gauche et de 20 pixels vers le haut de l'emplacement d'origine.

Pour les éléments positionnés relativement, il est important de savoir que les propriétés de décalage du bloc déterminent où l'élément sera déplacé, compte tenu de sa position d'origine. Ainsi, une propriété left avec une valeur de 20 pixels pousse en fait l'élément vers la droite de 20 pixels. Une propriété top avec une valeur de 20px poussera alors l'élément vers le bas de 20px.

Lorsque nous positionnons un élément à l'aide des propriétés de décalage, l'élément chevauche l'élément situé en dessous, plutôt que de le pousser vers le bas comme le font les propriétés margin ou padding.

Positionnement absolu

La valeur absolue de la propriété position diffère de la valeur relative dans le sens où l'élément en position absolue n'apparaît pas dans le flux normal du document et l'espace et la position d'origine de l'élément en position absolue ne sont pas réservés.

De plus, les éléments en position absolue se déplacent par rapport à leur élément parent en position relative le plus proche. Si un parent positionné de manière relative n'existe pas, alors l'élément en position absolue sera positionné par rapport à l'élément. Ceci est une petite information ; Voyons comment cela fonctionne dans du code :

...

Section ( position : relative ; ) div ( position : absolue ; droite : 20px ; haut : 20px ; )

Démonstration de positionnement absolu

Cet exemple positionne l'élément de manière relative mais n'inclut aucune propriété de décalage. Sa position ne change donc pas. Un élément avec un décalage de classe inclut une valeur de position absolue . Puisque l'élément est l'élément parent positionné relativement le plus proche de l'élément, l'élément sera positionné par rapport à l'élément.

Pour les éléments positionnés relativement, les propriétés de décalage déterminent dans quelle direction l'élément sera déplacé par rapport à lui-même. Pour les éléments positionnés de manière absolue, les propriétés de décalage déterminent dans quelle direction l'élément sera déplacé par rapport à son parent positionné par rapport le plus proche.

Grâce aux propriétés right et top, l'élément apparaîtra à 20 pixels de la droite et à 20 pixels du haut à l'intérieur.

Étant donné que l'élément est positionné de manière absolue, il n'est pas positionné dans le flux normal de la page et chevauchera tous les éléments environnants. De plus, la position d'origine n'est pas conservée et d'autres éléments peuvent prendre cette place. En général, la plupart des positionnements peuvent être effectués sans utiliser les propriétés de position et de décalage, mais dans certains cas, elles peuvent être extrêmement utiles.

CV

Apprendre à positionner le contenu en HTML et CSS est un grand pas vers la maîtrise de ces langages. Ajoutez à cela le modèle de bloc et nous sommes sur la bonne voie pour devenir des développeurs front-end.

Êtes-vous toujours confus quant au fonctionnement du positionnement absolu en CSS et perdez-vous des éléments à l'écran ? Comprenons cette magie.

Introduction au positionnement Lorsque vous définissez position: Absolute , ce n'est pas l'élément lui-même qui apparaît, mais son conteneur parent, car le positionnement en CSS est relatif à lui. La difficulté est qu'il ne s'agit pas toujours du parent immédiat de l'élément.

Regardons un code avec quatre divs imbriqués les uns dans les autres comme une poupée gigogne.

< body > < div class = "box-1" > < div class = "box-2" > < div class = "box-3" > < div class = "box-4" > < / div > < / div > < / div > < / div > < / body >

Les cases box-1 , box-2 et box-3 sont centrées pour plus de beauté en utilisant les propriétés CSS margin: auto et flex. Le bloc case-4 reste dans sa position par défaut dans le flux de documents.

corps ( affichage : flex ; ) .box-1, .box-2, .box-3 ( affichage : flex ; marge : auto ; )

corps ( affichage : flexible ; Encadré-1, Encadré-2, Encadré-3 ( affichage : flexible ; Marge : automatique ;

Les 4 éléments ont un positionnement par défaut. Pour le moment, la disposition ressemble à ceci :

.box-4 sans positionnement Par rapport à quoi positionnons-nous ?

Pour se positionner, un élément doit connaître deux choses :

• quel parent deviendra le point de départ ;
• la quantité de déplacement par rapport au point de référence (haut, bas, droite ou gauche).

Si vous définissez position: Absolute pour box-4 , cet élément quittera le flux normal du document. Mais désormais, il reste à sa place, puisque les coordonnées de décalage ne sont pas précisées. Si la largeur d'un élément n'est pas définie en CSS, elle sera égale à la largeur de son contenu (plus le remplissage et la bordure).

.box-4 avec positionnement absolu sans décalage

Ajoutons maintenant les propriétés top: 0 et left: 0 . L'élément doit déterminer quel conteneur parent deviendra le point de référence pour ces coordonnées. L'élément le plus proche ayant une position non statique (le plus souvent position : relative) le devient. box-4 commence à interroger ses ancêtres un par un. Ni box-3, ni box-2, ni box-1 ne conviennent, puisqu'ils ont un positionnement par défaut en CSS (non défini).

Si un ancêtre positionné n'est pas trouvé, l'élément est placé par rapport au corps du document :

.box-4 avec positionnement absolu. Éléments parents sans positionnement

Si vous définissez position: par rapport à l'élément box-1, il devient le point de référence :

.box-4 avec positionnement absolu. .box-1 avec positionnement relatif

Un élément positionné de manière absolue est positionné par rapport à son ancêtre positionné le plus proche.

Une fois qu'un point de référence a été trouvé, tout ce qui se trouve au-dessus dans l'arborescence DOM cesse d'avoir de l'importance.

Si vous définissez position: relative également pour box-2 , alors box-4 sera positionné par rapport à lui, car cet ancêtre est plus proche.

.box-4 avec positionnement absolu. .box-2 avec positionnement relatif

De même pour le conteneur box-3 :

Le positionnement en CSS semble assez simple. Indiquez quel bloc et où il doit être situé. Cependant, tout n’est pas aussi simple qu’il y paraît à première vue. Plusieurs points peuvent dérouter les débutants. Vous pouvez tirer beaucoup plus de valeur du positionnement si vous comprenez en détail son fonctionnement.

Modèle de boîte en CSS et types de positionnement.

Avant de commencer, je vous conseille de lire l’article Box Model en CSS. En résumé : chaque élément en html est un rectangle pour lequel vous pouvez préciser les valeurs des marges intérieure et extérieure, ainsi que la bordure qui les sépare.

Les schémas de positionnement définissent l'emplacement de ce rectangle, ainsi que la manière dont il doit affecter les éléments qui l'entourent.

La propriété position en CSS peut prendre cinq valeurs :

• absolu
• relatif
• fixé
• statique
• hériter

La valeur statique est la valeur par défaut. Tout élément à positionnement statique se trouve dans le flux général du document. Les règles de son placement sont déterminées par le modèle Box. Pour de tels éléments, les propriétés top , right , bottom et left seront ignorées. Pour utiliser ces propriétés, le positionnement de l'élément doit être absolu, relatif ou fixe.

La valeur héritée, comme pour toutes les autres propriétés CSS, est utilisée pour garantir que l'élément utilise la même valeur que son élément parent.

Positionnement absolu

Le positionnement absolu supprime un élément du flux global du document. Quant aux éléments autour, dans ce cas, ils ignorent simplement celui recherché, comme si la propriété display: none; . Si vous ne souhaitez pas que l'espace réservé à un tel élément soit rempli par d'autres éléments, vous devez alors proposer une approche différente.

Vous définissez la position d'un élément avec un positionnement absolu à l'aide des propriétés top , left , right et bottom . Il vous suffit d'en spécifier deux, haut ou bas et gauche ou droite. Si aucune propriété n'est spécifiée, la paire en haut à gauche est définie sur 0.

La clé du positionnement absolu est de comprendre quel est votre point de référence. Si la propriété supérieure est définie sur 20 px, d'où doivent-elles être comptées ?

La réponse est simple : ces éléments sont positionnés par rapport à l'élément parent le plus proche, qui a un positionnement autre que static . S'il n'existe pas d'élément de ce type, alors l'élément est positionné par rapport au document principal. Autrement dit, lors de la définition du positionnement absolu, CSS indique au navigateur de regarder l'élément parent et, si son positionnement n'est pas statique, il doit alors aligner l'élément actuel par rapport à lui.

Positionnement relatif.

Les éléments relativement positionnés sont placés en fonction de leur propre position, le décalage habituel par rapport à leur emplacement normal. Ceci est similaire à l'ajout d'un remplissage à un élément à l'aide de la propriété margin. Il existe cependant une différence significative : les éléments adjacents, lors de l'utilisation du positionnement, ne prennent pas en compte ce décalage.

Imaginez-le ainsi : une certaine image bouge, et à sa place reste un « fantôme », tous les éléments sont situés par rapport à ce « fantôme ». Cela nous permet de superposer des éléments les uns sur les autres.

Ainsi, les éléments avec un positionnement relatif sont extraits du flux normal de l'élément, mais influencent toujours le placement des éléments voisins, qui se comportent de manière à ce que l'élément d'origine soit toujours dans le flux du document.

Dans ce cas, il ne faut pas se poser la question de savoir quel est le positionnement de l'élément ici. La réponse est toujours : un flux de documents normal. Il semble que vous ayez ajouté un remplissage à un élément, mais que vous n'avez en même temps pas affecté les éléments voisins.

Positionnement fixe

Le positionnement fixe agit de manière similaire au positionnement absolu, avec des différences mineures.

Premièrement, un élément à position fixe est toujours positionné par rapport à la fenêtre du navigateur et les éléments parents sont ignorés.

La deuxième différence vient de son nom. Les éléments fixes sont fixes sur la page. Ils ne bougent pas lors du défilement.

Indice Z

La page du site Web est bidimensionnelle. Il a une largeur et une hauteur. Le Z-index ajoute une troisième dimension, la profondeur.

Plus cet indice est élevé, plus l'élément se situe haut sur la page. Grâce à cela, nous pouvons garantir qu'un élément est situé au-dessus d'un autre. Par défaut, sa valeur est zéro. Les valeurs négatives sont également acceptables.

En fait, z-index est beaucoup plus complexe que ce que je décris ici, mais c'est un sujet pour un autre article. Maintenant, la principale chose à retenir est l’idée même de troisième dimension et le fait que seuls les éléments positionnés peuvent utiliser cette propriété.

Problèmes de positionnement.

Examinons quelques problèmes courants associés au positionnement, ainsi que quelques mots sur la façon de les résoudre.

Vous ne pouvez pas utiliser simultanément la propriété position et la propriété float sur le même élément.

Ces deux propriétés affectent la position de l'élément, donc la dernière propriété spécifiée sera utilisée.

D'après les commentaires :

Vous pouvez utiliser position:relative et float en même temps.

Lorsque position:absolute et float sont spécifiés simultanément, ce n'est pas la dernière propriété spécifiée qui est appliquée. Dans ce cas, quel que soit l'ordre de ces styles, position:absolute est appliqué et la valeur résultante (ou calculée) de la propriété float est définie sur none, quelle que soit la valeur initiale, c'est-à-dire ignoré.

Les marges ne s'effondrent pas sur les éléments positionnés de manière absolue.

Disons qu'il y a un paragraphe sur la page avec une marge inférieure de 20 px. Ci-dessous se trouve une image avec une marge supérieure de 30 px. La distance entre l'image et le texte ne sera pas de 50px (20px + 30px), mais de 30px (30px > 20px). Ce comportement est appelé effondrement des marges. Deux tirets sont combinés en un seul. Les éléments positionnés de manière absolue n'ont pas de marge de réduction, le résultat peut donc ne pas être celui que vous attendez.

IE et z-index.

Dans IE6, un élément est toujours sélectionné en haut de la pile, quel que soit son z-index ou celui des éléments environnants.

IE6 et IE7 ont un autre problème avec z-index. IE examine l'élément parent pour déterminer dans quel groupe d'éléments se trouve le haut de la pile, d'autres navigateurs utilisent le contexte global. Par exemple:

Nous nous attendons à ce que le paragraphe apparaisse plus haut que l'image car son z-index est plus grand. Cependant, IE6 et IE7 placent l'image plus haut car elles se trouvent dans des piles de documents différentes. Une pile est pour div, la seconde est pour img et l'image a un z-index plus élevé que le div.

Conclusion

La propriété position semble facile à comprendre, mais elle fonctionne un peu différemment de ce qu’il semble à première vue. Les développeurs pensent souvent qu'ils ont besoin d'un positionnement relatif, même s'ils devraient probablement utiliser un positionnement absolu. Fondamentalement, la propriété float est utilisée lors de la mise en page et la propriété position est nécessaire pour les éléments que vous souhaitez « arracher » du flux général du document.

Si vous coupez un site Web créé sur la base du HTML, vous verrez une certaine structure en couches. De plus, son apparence ressemblera à un gâteau en couches. Si vous le pensez, c’est probablement que vous n’avez pas mangé depuis longtemps. Alors rassasiez d’abord votre faim, puis nous vous expliquerons comment centrer une couche div sur votre site :

Avantages de la mise en page à l'aide d'une balise

Il existe deux principaux types de structure de site Web :

• Tabulaire;
• Bloc.

La disposition tabulaire était dominante même à l’aube d’Internet. Ses avantages incluent la précision du positionnement spécifié. Mais il présente néanmoins des défauts évidents. Les principaux sont la longueur du code et la faible vitesse de chargement.

Lors de l'utilisation d'une disposition tabulaire, la page Web ne s'affichera pas tant qu'elle n'est pas complètement chargée. Lors de l’utilisation de blocs div, les éléments sont affichés immédiatement.

En plus d'une vitesse de chargement élevée, la construction en bloc d'un site Web vous permet de réduire plusieurs fois la quantité de code html. Y compris grâce à l'utilisation de classes CSS.

Cependant, une disposition tabulaire doit être utilisée pour structurer l'affichage des données sur la page. Un exemple classique de son utilisation est l’affichage de tableaux.

La construction de blocs basée sur des balises est également appelée couche par couche, et les blocs eux-mêmes sont appelés couches. En effet, lorsque certaines valeurs de propriété sont utilisées, elles peuvent être empilées les unes sur les autres, à l'instar des calques de Photoshop.

Aides au positionnement

Dans la disposition en bloc, il est préférable de positionner les calques à l'aide de feuilles de style en cascade. La principale propriété CSS responsable de la mise en page est float.
Syntaxe de propriété :
flotteur : gauche | à droite | aucun | hériter
Où:

• gauche – alignez l’élément sur le bord gauche de l’écran. Le flux autour des éléments restants se produit à droite ;
• à droite – alignement à droite, circulation autour des autres éléments – à gauche ;
• aucun – l'emballage n'est pas autorisé ;
• hériter – hérite de la valeur de l'élément parent.

Regardons un exemple léger de positionnement de divs à l'aide de cette propriété :

#gauche ( largeur : 200px ; hauteur : 100px ; float : gauche ; arrière-plan : rgb(255,51,102) ; ) #right ( largeur : 200px ; hauteur : 100px ; float : droite ; arrière-plan : rgb(0,255,153); ) Bloc gauche Bloc droit

Nous allons maintenant essayer d'utiliser la même propriété pour positionner le troisième div au centre de la page. Mais malheureusement, float n'a pas de valeur centrale. Et lorsque vous donnez à un nouveau bloc une valeur d'alignement vers la droite ou vers la gauche, il est décalé dans la direction spécifiée. Par conséquent, il ne reste plus qu'à définir float: left sur les trois blocs :

Mais ce n’est pas non plus la meilleure option. Lorsque la taille de la fenêtre est réduite, tous les calques sont alignés verticalement sur une rangée et lorsque la taille est augmentée, ils collent au bord gauche de la fenêtre. Nous avons donc besoin d’une meilleure façon de centrer le div.

Centrage des calques

Dans l’exemple suivant, nous utiliserons un calque conteneur dans lequel nous placerons les éléments restants. Cela résout le problème du déplacement des blocs les uns par rapport aux autres lorsque la taille de la fenêtre est modifiée. Le centrage du conteneur au milieu se fait en définissant les propriétés margin à zéro pour les marges du bord supérieur et auto sur les côtés (marge : 0 auto ) :

#conteneur ( largeur : 600px ; marge : 0 auto ; ) #gauche ( largeur : 200px ; hauteur : 100px ; float : gauche ; arrière-plan : rgb(255,51,102); ) #right ( largeur : 200px ; hauteur : 100px; float : gauche; arrière-plan : rgb(0,255,153); #center ( largeur : 200 px ; hauteur : 100 px ; float : gauche ; arrière-plan : rgb(255,0,0); ) Bloc de gauche Bloc central Bloc de droite

Le même exemple montre comment centrer un div horizontalement. Et si vous modifiez un peu le code ci-dessus, vous pouvez obtenir un alignement vertical des blocs. Pour ce faire, il vous suffit de modifier la longueur de la couche conteneur (la réduire). Autrement dit, après avoir modifié sa classe CSS, elle devrait ressembler à ceci :

Après le changement, tous les blocs seront alignés strictement au milieu. Et leur position ne changera pas quelle que soit la taille de la fenêtre du navigateur. Voici à quoi ressemble le centrage vertical d’un div :

Dans l'exemple suivant, nous avons utilisé un certain nombre de nouvelles propriétés CSS pour centrer les calques dans un conteneur :

#container ( largeur : 450 px ; hauteur : 150 px ; marge : 0 auto ; couleur d'arrière-plan : #66CCFF ; ) #left ( largeur : 100 px ; hauteur : 100 px ; arrière-plan : rgb(255,51,102); affichage : bloc en ligne ; alignement vertical : milieu ; marge gauche : 35 px ; ) #right ( largeur : 100 px ; hauteur : 100 px ; arrière-plan : rgb(0,255,153) ; affichage : bloc en ligne ; alignement vertical : milieu ; marge gauche : 35 px ; ) #center ( largeur : 100 px ; hauteur : 100 px ; arrière-plan : rgb(255,0,0) ; affichage : bloc en ligne ; alignement vertical : milieu ; marge gauche : 35 px ; )

Une brève description des propriétés CSS et de leurs valeurs que nous avons utilisées dans cet exemple pour centrer un div au sein d'un div :

• display : inline-block – aligne un élément de bloc sur une ligne et garantit qu'il s'enroule autour d'un autre élément ;
• vertical-align : middle – aligne l'élément au milieu par rapport au parent ;
• margin-left – définit la marge gauche.

Comment faire un lien à partir d'un calque

Aussi étrange que cela puisse paraître, c’est possible. Parfois, un bloc div comme lien peut être nécessaire lors de la présentation de différents types de menus. Regardons un exemple pratique d'implémentation d'une couche de liaison :

#layer1( largeur : 500 px ; hauteur : 100 px ; arrière-plan : rgb(51 255 204) ; bordure : groove ; ) a ( affichage : bloc ; alignement du texte : centre ; hauteur : 100 % ; couleur : rgb (255,0,51) ; ) Lien vers notre site Internet

Dans cet exemple, en utilisant la ligne display: block, nous définissons le lien sur la valeur d'un élément block. Et pour que toute la hauteur du bloc div devienne un lien, définissez height : 100%.

Masquer et afficher les éléments de bloc

Les éléments de bloc offrent plus de possibilités d'étendre les fonctionnalités de l'interface que la disposition tabulaire obsolète. Il arrive souvent que le design d’un site Web soit unique et reconnaissable. Mais pour une telle exclusivité, il faut payer avec un manque d'espace libre.

Cela est particulièrement vrai pour la page principale, sur laquelle le coût de la publicité est le plus élevé. Par conséquent, le problème se pose de savoir où « pousser » une autre bannière publicitaire. Et ici, vous ne pouvez pas vous en sortir en alignant le div au centre de la page !

Une solution plus rationnelle consiste à masquer certains blocs. Voici un exemple simple d’une telle implémentation :

#layer1( display:block; largeur: 500px; hauteur: 100px; background: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="block"; ) else ( layer1="none"; ) document.getElementById("layer1").style.display=layer1 )

C'est le bouton magique. En cliquant dessus, vous masquerez ou afficherez le bloc masqué.

Dans cet exemple, l’emplacement des blocs div ne change en rien. Cela utilise une simple fonction JavaScript qui modifie la valeur de la propriété d'affichage CSS après avoir cliqué sur un bouton (événement onclick).

syntaxe d'affichage :
affichage : bloc | en ligne | bloc en ligne | table en ligne | élément de liste | aucun | rodage | tableau | légende du tableau | cellule-tableau | groupe de colonnes de table | table-colonne | groupe de pied de page | groupe-en-tête-de-table | rangée de tableau | groupe de lignes de table

Comme vous pouvez le constater, cette propriété peut prendre de nombreuses valeurs. Il est donc très utile et peut être utilisé pour positionner des éléments. Dans l'un des exemples précédents, nous avons utilisé l'une de ses valeurs (inline-block ) pour centrer un div au sein d'un div.

Nous avons utilisé deux valeurs pour la propriété d'affichage pour masquer et afficher le calque.