Les positionnements en CSS
3 participants
PêpêcheMascotte- Messages : 4428
Les positionnements en CSS
Lun 20 Mai 2019 - 16:56
Les bases du CSS
Les positionnements
Coucou 
Voici une propriété CSS beaucoup utilitisée et utile.
Pour comprendre ce tutoriel, tu dois avoir lu et compris les explications suivantes :
• Les bases du HTML
• Les principales balises
• Lier la CSS et le HTML
En CSS, il existe 5 types de positionnement :
• static,
• relative,
• absolute,
• fixed,
⋅ sticky.
Voyons chacun d'eux.
ce positionnement est le positionnement par défaut.
L'élement se place par rapport à celui qui le précède. On ne l'indique jamais dans la CSS, sauf si on veut réinitialiser le positionnement d'une balise.
Ce positionnement permet :
• d'une part, de déplacer notre élément par rapport à sa position de base ;
•d'autre part, de lui dire "tu deviens une référence". C'est indispensable si cet élément a des balises en position absolue par exemple (voir point suivant).
Ce positionnement permet de placer un élement par rapport à sa référence. Si aucune référence n'est spécifiée, le bloc se placera par rapport à la fenêtre du navigateur.
Cette fois, tu vois bien que mon bloc en position absolue se place par rapport au bloc en position relative et non pas par rapport à la fenêtre.
Le principe est le même que pour la position absolue, si ce n'est que cette fois, le bloc reste à la même place qu'on scroll ou non, qu'on réduise la fenêtre ou non. La position du bloc est définie par rapport à la fenêtre du navigateur.
Fût un temps, à chaque fois qu'on voulait faire se déplacer un bloc en même temps que l'on scroll, il fallait utiliser du javascript. Cette époque est révolue grâce à cette propriété CSS. En effet, une fois que tu as défini l'un de ses parents comme une référence, cet élément "sticky" restera visible à l'écranà la place que tu as défini par rapport à ce parent, tant que ce dernier est visible.
Voyons un exemple ça sera plus simple : clic (pour voir les codes HTML & CSS, il faut cliquer sur Open Sandbox en bas à droite).
Dans cet exemple, tu peux voir que mon "body" a une position relative : c'est la référence pour mon bloc en "sticky" qui est la navigation (balise nav). Tu peux également voir que cette balise a un top à 0. Qu'est-ce que ça signifie ? Eh bien en fait, on dit au code : "tant que le body est visible, ma nav restera fixé en haut de la partie visible de celui-ci, même si j'ai scrollé dans l'écran et que, logiquement, ce bloc devrait avoir disparu".
Si on prend l'exemple du forum, les post des sujets sont en position "relative" et les "postprofile" sont en position sticky avec un top de 40px (pour être placé à 40px du bord haut de la partie visible de nos sujets.
Comme tu l'as peut-être remarqué dans la CSS, j'ai utilisé :
Eh oui ! Avec les positionnements, on utilise :
• top : pour placer le haut de l'élement par rapport à sa référence ;
• left : pour placer le bord gauche de l'élement par rapport à sa référence ;
• right : pour placer le bord droit de l'élement par rapport à sa référence ;
• bottom : pour placer le bas de l'élement par rapport à sa référence.
N'hésite pas à jeter un oeil à cet article ou à celui-ci (pour avoir plus de précision sur la position sticky.
Si tu as des questions sur les positionnements, n'hésite pas à nous les poser à la suite de ce message.
Voici une propriété CSS beaucoup utilitisée et utile.
Pour comprendre ce tutoriel, tu dois avoir lu et compris les explications suivantes :
• Les bases du HTML
• Les principales balises
• Lier la CSS et le HTML
En CSS, il existe 5 types de positionnement :
• static,
• relative,
• absolute,
• fixed,
⋅ sticky.
Voyons chacun d'eux.
Dans le détail
position: static;
ce positionnement est le positionnement par défaut.
L'élement se place par rapport à celui qui le précède. On ne l'indique jamais dans la CSS, sauf si on veut réinitialiser le positionnement d'une balise.
position: relative;
Ce positionnement permet :
• d'une part, de déplacer notre élément par rapport à sa position de base ;
•d'autre part, de lui dire "tu deviens une référence". C'est indispensable si cet élément a des balises en position absolue par exemple (voir point suivant).
position: absolute;
Ce positionnement permet de placer un élement par rapport à sa référence. Si aucune référence n'est spécifiée, le bloc se placera par rapport à la fenêtre du navigateur.
Exemple sans référence
- Code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="description" content="Et voilà la description de ma première page html" />
<title>Positionnement</title>
<style type="text/css">
.absolu{
position:absolute;
top:20px;
left:50px;
background:green;
color:white;
font: 12px/50px verdana;
text-align:center;
width:400px;
height:50px;
}
</style>
</head>
<body>
<div class="absolu">
Ce bloc est en position absolu, sans référence.
</div>
</body>
</html>
- rendu:
Exemple avec une référence
- Code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="description" content="Et voilà la description de ma première page html" />
<title>Positionnement</title>
<style type="text/css">
.relative{
position:relative;
margin:auto;
background:#999;
color:white;
font: 18px/26px verdana;
text-align:center;
width:800px;
height:200px;
}
.absolu{
position:absolute;
top:20px;
left:50px;
background:green;
color:white;
font: 12px/50px verdana;
text-align:center;
width:400px;
height:50px;
}
</style>
</head>
<body>
<div class="relative">
<p>Mon petit texte est dans mon bloc en position relative ^^</p>
<div class="absolu">
Ce bloc est en position absolu, avec une référence.
</div>
</div>
</body>
</html>
- rendu:
Cette fois, tu vois bien que mon bloc en position absolue se place par rapport au bloc en position relative et non pas par rapport à la fenêtre.position: fixed;
Le principe est le même que pour la position absolue, si ce n'est que cette fois, le bloc reste à la même place qu'on scroll ou non, qu'on réduise la fenêtre ou non. La position du bloc est définie par rapport à la fenêtre du navigateur.
position: sticky;
Fût un temps, à chaque fois qu'on voulait faire se déplacer un bloc en même temps que l'on scroll, il fallait utiliser du javascript. Cette époque est révolue grâce à cette propriété CSS. En effet, une fois que tu as défini l'un de ses parents comme une référence, cet élément "sticky" restera visible à l'écranà la place que tu as défini par rapport à ce parent, tant que ce dernier est visible.
Voyons un exemple ça sera plus simple : clic (pour voir les codes HTML & CSS, il faut cliquer sur Open Sandbox en bas à droite).
Dans cet exemple, tu peux voir que mon "body" a une position relative : c'est la référence pour mon bloc en "sticky" qui est la navigation (balise nav). Tu peux également voir que cette balise a un top à 0. Qu'est-ce que ça signifie ? Eh bien en fait, on dit au code : "tant que le body est visible, ma nav restera fixé en haut de la partie visible de celui-ci, même si j'ai scrollé dans l'écran et que, logiquement, ce bloc devrait avoir disparu".
Si on prend l'exemple du forum, les post des sujets sont en position "relative" et les "postprofile" sont en position sticky avec un top de 40px (pour être placé à 40px du bord haut de la partie visible de nos sujets.Comment définir la position ?
Comme tu l'as peut-être remarqué dans la CSS, j'ai utilisé :
- Code:
top
left
Eh oui ! Avec les positionnements, on utilise :
• top : pour placer le haut de l'élement par rapport à sa référence ;
• left : pour placer le bord gauche de l'élement par rapport à sa référence ;
• right : pour placer le bord droit de l'élement par rapport à sa référence ;
• bottom : pour placer le bas de l'élement par rapport à sa référence.
N'hésite pas à jeter un oeil à cet article ou à celui-ci (pour avoir plus de précision sur la position sticky.Si tu as des questions sur les positionnements, n'hésite pas à nous les poser à la suite de ce message.
Cerise- Informations : Présente les week-end seulement.
Messages : 702
Re: Les positionnements en CSS
Jeu 14 Oct 2021 - 11:54
Coucou, je voulais savoir si la nouvelle position "⋅ sticky." est possible avec toutes les versions? Exemple avec phpBB2. Car j'ai voulu essayer pour ma barre de navigation, mais ça marche pas du tout. Est-ce qu'il faut placer notre barre de navigation dans un certain endroit dans les templates? Où alors j'étais totalement à coté de la plaque dans mon CSS (ce qui est possible)
Merci
Merci
MiettesRâleuse (Admin)- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2205 
Re: Les positionnements en CSS
Lun 18 Oct 2021 - 6:27
Coucou
Étant donné que c'est uniquement de la CSS, c'est possible avec toutes les versions de forum ^^
Ton code est en ligne ? Si oui, tu peux nous donner un lien pour qu'on y jette un oeil ?
Étant donné que c'est uniquement de la CSS, c'est possible avec toutes les versions de forum ^^
Ton code est en ligne ? Si oui, tu peux nous donner un lien pour qu'on y jette un oeil ?
- Cerise
- Informations : Présente les week-end seulement.
Messages : 702
Re: Les positionnements en CSS
Mar 19 Oct 2021 - 12:03
Coucou, normalement la barre doit se trouvé en bas de la bannière (comme l'exemple sur ton tuto)
Voici le forum test →
J'ai un code "body" pour ma bannière+fond milieu+fond.
Voici le forum test →
J'ai un code "body" pour ma bannière+fond milieu+fond.
- MiettesRâleuse (Admin)
- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2205
Re: Les positionnements en CSS
Mer 20 Oct 2021 - 9:20
Coucou @Cerise
Sur ta navigation, tu peux ajouter un "margin-top" de la hauteur de ta bannière, par exemple :
Si on laisse comme ça, ça génère un gros espace vide qui correspond à l'image vide que tu as mis pour le logo. On va donc régler ça avec de la CSS
le "top: -500px" correspond au nombre que tu as mis au niveau du "margin-top" de la barre de nav.
Et pour finir, il faut régler la position de la box de recherche :
Sur ta navigation, tu peux ajouter un "margin-top" de la hauteur de ta bannière, par exemple :
- Code:
#navigation {
position: sticky;
z-index: 10;
width: 100%;
height: 50px;
background-color: #871f95;
border-bottom: 2px solid #fff;
font-family: 'Ubuntu Condensed', sans-serif;
font-size: 32px;
text-transform: uppercase;
text-shadow: 1px 1px 1px #160524;
top: 0px;
left: 0px;
margin-top: 500px;
}
Si on laisse comme ça, ça génère un gros espace vide qui correspond à l'image vide que tu as mis pour le logo. On va donc régler ça avec de la CSS
- Code:
#i_logo{
display: block;
position: absolute;
top: -500px;
left: 50%;
transform: translateX(-50%);
}
le "top: -500px" correspond au nombre que tu as mis au niveau du "margin-top" de la barre de nav.
Et pour finir, il faut régler la position de la box de recherche :
- Code:
#navigation #search_menu{
top: 50px !important;
}
- Cerise
- Informations : Présente les week-end seulement.
Messages : 702
Re: Les positionnements en CSS
Mer 20 Oct 2021 - 10:54
Coucou, super ça fonctionne, merci beaucoup. C'est un code que je vais utilisé sur mon forum pour 2022.
Voici le résultat →
Merci beaucoup
Édite: je viens de voir que c'était ton anniversaire^^. Je te souhaite donc un très joyeux anniversaire
Voici le résultat →
Merci beaucoup
Édite: je viens de voir que c'était ton anniversaire^^. Je te souhaite donc un très joyeux anniversaire
Miettes aime ce message
- MiettesRâleuse (Admin)
- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2205
Re: Les positionnements en CSS
Mer 20 Oct 2021 - 19:53
Merci :p
Ravie de voir que tout fonctionne parfaitement ^^ dis donc t'es pas en retard =)
Ravie de voir que tout fonctionne parfaitement ^^ dis donc t'es pas en retard =)
Cerise aime ce message
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum