A voir également:
- Je n'arrive pas a placer mon menu de navigation sur mon site en CSS
- Site de telechargement - Accueil - Outils
- Site de vente en ligne particulier - Guide
- Site comme coco - Accueil - Réseaux sociaux
- Placer des points sur une carte - Guide
- Navigation privée - Guide
2 réponses
Salut,
comme vous utilisez une position relative en pixel je vous conseille avant tout de tester avec d'autres résolutions : 800X600 par exemple et augmenter progressivement pour de plus hautes résolutions.
Cela vous permettra de voir si il y a des bugs d'affichages de vos mises en pages. A savoir que les résolutions des mobiles sont parfois plus basses que 800X600 et que les sites sont en majorités consultés sur des téléphones(plus de 50%).
Vous pouvez améliorer et éviter les bugs en utilisant partout des dimensions relatives, donc en % plutôt qu'avec une valeur fixe qui ne correspondra pas si l'utilisateur à une autre résolution d'écran que la vôtre.
Pour votre question précise vous utilisez la propriété position en relative.
Cela veut dire que celle ci est fixée par rapport à la position de l'élément le précédent(que vous n'indiquez pas dans votre code). C'est en changeant la valeur vers la gauche que vous indiquez un décalage par rapport à l'élément précédent.
Décalage de 800 pixels à partir de la gauche.
Avec la propriété "top" vous pouvez indiquer un décalage à partir du sommet toujours par rapport à l’élément précédent.
Vous pouvez aussi utiliser un placement avec position en absolue (
Ceci dit il faudra tenir compte des éléments précédents et suivant car le placement en absolu sort l'élément du flux du document(hauteurs, largeurs et positions ne sont plus prise en compte par ce flux) et donc décaler les éléments "autour" de celui en relatif en prenant compte de ses dimensions pour éviter es chevauchements.
Aidez vous d'une recherche comme celle ci pour bien comprendre le positionnement en CSS car il y a bien des méthodes:
https://www.qwant.com/?q=positionnement+CSS
Moi j'aurais plutôt tendance à mettre un menu en haut de page s'il doit s'afficher en haut de page et faire des décalages éventuels autrement, avec les marges par exemple. Cela évite de devoir faire des déplacements qui décalent tout le reste et reste beaucoup plus simple par peut s'écrire en une seule ligne. La différence c'est aussi que vous pouvez la règle de mise en page avec ma façon d'écrire pour d'autres éléments alors que la vôtre oblige à un contexte et un type de balise. Donc que des avantages à écrire plus simplement ;)
rreur: Ce que vous déplacez dans le code CSS que vous indiquez ce sont les li avec la classe .btn, donc revoir mes explications mais pour les éléments ayant la classe spécifié mais le principe reste le même.
Pareil pour la solution que j'indique la fin de n'utiliser que les marges, marge externe ici comme par exemple avec des valeurs relatives:
J'ai aussi simplifié le code en ".btn" plutôt que "nav.menu-nav ul li.btn" à moins que vous n'utilisiez la même classe avec d'autres éléments et autres règles de styles il est plus rapide et clair d'écrire uniquement le nom de la classe plutôt qu'un sélecteur compliqué. Autant faire une autre classe si nécessaire pour des propriétés différentes, c'est d'ailleurs l'avantage et l'intérêt d'une classe: on en fait une par règle et on peut l'appliquer ensuite sur plusieurs éléments(sérialisation/automatisation).
Elles peuvent d'ailleurs se combiner soit par héritage(règles venues d'un élément parent) ou sur un même élément si on veut écrire moins.
autre remarque: vous utilisez un lien (a) dans des éléments de liste(li), est ce un élément de mise en page? Je ne voit pas l'intérêt des 2 dans un menu sinon, autant simplifier et choisir lequel vous voulez utiliser(la balise "a" et plus appropriée car possède un comportement par défaut qui lui permet d'aller vers une autre page).
Il y a aussi une faute à "Accueil" et NON "A c c e u i l"
comme vous utilisez une position relative en pixel je vous conseille avant tout de tester avec d'autres résolutions : 800X600 par exemple et augmenter progressivement pour de plus hautes résolutions.
Cela vous permettra de voir si il y a des bugs d'affichages de vos mises en pages. A savoir que les résolutions des mobiles sont parfois plus basses que 800X600 et que les sites sont en majorités consultés sur des téléphones(plus de 50%).
Vous pouvez améliorer et éviter les bugs en utilisant partout des dimensions relatives, donc en % plutôt qu'avec une valeur fixe qui ne correspondra pas si l'utilisateur à une autre résolution d'écran que la vôtre.
Pour votre question précise vous utilisez la propriété position en relative.
Cela veut dire que celle ci est fixée par rapport à la position de l'élément le précédent(que vous n'indiquez pas dans votre code). C'est en changeant la valeur vers la gauche que vous indiquez un décalage par rapport à l'élément précédent.
Décalage de 800 pixels à partir de la gauche.
Avec la propriété "top" vous pouvez indiquer un décalage à partir du sommet toujours par rapport à l’élément précédent.
Vous pouvez aussi utiliser un placement avec position en absolue (
position:absolute;) pour indiquer de la même façon un placement par rapport au sommet en haut à droite du document(position 0, 0 en abscisse et ordonnée dans la page).
Ceci dit il faudra tenir compte des éléments précédents et suivant car le placement en absolu sort l'élément du flux du document(hauteurs, largeurs et positions ne sont plus prise en compte par ce flux) et donc décaler les éléments "autour" de celui en relatif en prenant compte de ses dimensions pour éviter es chevauchements.
Aidez vous d'une recherche comme celle ci pour bien comprendre le positionnement en CSS car il y a bien des méthodes:
https://www.qwant.com/?q=positionnement+CSS
Moi j'aurais plutôt tendance à mettre un menu en haut de page s'il doit s'afficher en haut de page et faire des décalages éventuels autrement, avec les marges par exemple. Cela évite de devoir faire des déplacements qui décalent tout le reste et reste beaucoup plus simple par peut s'écrire en une seule ligne. La différence c'est aussi que vous pouvez la règle de mise en page avec ma façon d'écrire pour d'autres éléments alors que la vôtre oblige à un contexte et un type de balise. Donc que des avantages à écrire plus simplement ;)
rreur: Ce que vous déplacez dans le code CSS que vous indiquez ce sont les li avec la classe .btn, donc revoir mes explications mais pour les éléments ayant la classe spécifié mais le principe reste le même.
Pareil pour la solution que j'indique la fin de n'utiliser que les marges, marge externe ici comme par exemple avec des valeurs relatives:
.btn{
margin-left:8em;
margin-top:2em;
/* ce sont des valeurs au pif à vous de voir le placement*/
/* notation raccourcie pour écrire la même chose en une ligne-j'ai décomposé l'exemple pour plus de clarté-:
margin:2em 0 8em;
*/
}
J'ai aussi simplifié le code en ".btn" plutôt que "nav.menu-nav ul li.btn" à moins que vous n'utilisiez la même classe avec d'autres éléments et autres règles de styles il est plus rapide et clair d'écrire uniquement le nom de la classe plutôt qu'un sélecteur compliqué. Autant faire une autre classe si nécessaire pour des propriétés différentes, c'est d'ailleurs l'avantage et l'intérêt d'une classe: on en fait une par règle et on peut l'appliquer ensuite sur plusieurs éléments(sérialisation/automatisation).
Elles peuvent d'ailleurs se combiner soit par héritage(règles venues d'un élément parent) ou sur un même élément si on veut écrire moins.
autre remarque: vous utilisez un lien (a) dans des éléments de liste(li), est ce un élément de mise en page? Je ne voit pas l'intérêt des 2 dans un menu sinon, autant simplifier et choisir lequel vous voulez utiliser(la balise "a" et plus appropriée car possède un comportement par défaut qui lui permet d'aller vers une autre page).
Il y a aussi une faute à "Accueil" et NON "A c c e u i l"
bonjour,
je n'ai pas tout compris mais merci pour votre réponse,
j'ai essayer toutes les solutions de ce lien mais ne marche et tout reste statique.
aurait vous juste un code pour le placer en haut à droite et que je puisse modifier en px ?
j'ai aussi essayer le code position: absolut; mais cela chevauche tout
je n'ai pas tout compris mais merci pour votre réponse,
j'ai essayer toutes les solutions de ce lien mais ne marche et tout reste statique.
aurait vous juste un code pour le placer en haut à droite et que je puisse modifier en px ?
j'ai aussi essayer le code position: absolut; mais cela chevauche tout