Salut salut!

Voilà je débute dans le web, j'ai terminé le cours d'OC et je fais quelques trucs de mon côté pour m'entraîner.

J'ai essayé de réaliser une barre de navigation "basique" pour un site Web et voici ce que j'ai fais :

Le HTML

<nav>
<ul>
   <li><a href="#">Accueil</a></li>
   <li><a href="#">A propos</a></li>
   <li><a href="#">Offres</a></li>
   <li><a href="#">Ventes</a></li>
   <li><a href="#">Critiques</a></li>
   <li><a href="#">Contact</a></li>
</ul>
</nav>

Et le style :

nav {
  margin: auto;
  width: 80%;
  background-color: #0a938d;
}

nav ul {
  list-style: none;
  padding:0;
  display: flex;
  justify-content: center;
  width: 70%;
  margin: auto;
  
}

nav ul li {
  height: 50px;
  padding-right: 2.5%;
  padding-left: 2.5%;
  border-right-style: solid;
  border-width: 1px;
}

nav ul li:first-child {
  border-left-style: solid;
}

nav ul li:hover {
  background-color: #033633;
}

nav ul li a{
  color: white;
  font-size: 1.6em;
  text-decoration: none;
  position: relative;
  top: 15%; /* Pas beau*/
}

Voilà ce que ça donne :

Donc j'ai plusieurs petites questions :

-Déjà au niveau de la mise en oeuvre générale est-ce que c'est une bonne manière de procéder (utilisation des balises HTML, manière de mettre en oeuvre ce layout...), parce qu'en CSS j'ai du mal à trouver des indications sur les "bonnes pratiques" contrairement aux langages de programmations par exemple.

-Ensuite, comment pourrais-je mieux gérer l'adaptation du menu à la taille de la zone d'affichage (en utilisant le moins possible les media queries)? Actuellement le texte fait n'importe quoi quand on zoom beaucoup.
De manière générale j'aimerai utiliser un maximum de valeur "relative", que ce soit au niveau de la police, des largeurs etc... Que tout s'adapte "tout seul".

Ce qui m'amène à ma dernière question : comment je peux centrer le texte (verticalement) dans les boîtes sans devoir mettre cette horrible ligne (top: 15%)? Et est-ce possible d'éviter de spécifier la hauteur de la bannière en pixels?

Bref toutes remarques sur la manière de faire, le style etc est bienvenue, j'aimerai adopter de bonnes pratiques dès le départ!

Merci d'avance à ceux qui prendront le temps de répondre !

Salut,

Tu peux te simplifier la vie (et le code) en mettant directement tes liens dans la balise nav. Également, mets des classes sur tes éléments plutôt que de faire des sélecteurs à rallonge et beaucoup trop générique.

Pour ce qui est de l'adaptation, n'aie pas peur des media queries. Elles ne sont pas mauvaises. Et ça ne se gère pas au zoom, mais au redimensionnement. Mais tout ne s'adaptera pas forcément tout seul.

Pour centrer ton texte, c'est avec flexbox.

https://jsfiddle.net/sbztd9we/8/ 

-
Edité par EmmanuelBeziat 7 juin 2018 à 0:19:04

Merci beaucoup! J'ai regardé ton code, j'ai appris pas mal de truc en quelques minutes (je savais qu'on pouvait faire des animations mais pas qu'on pouvait aussi facilement faire cet effet de "persistance" de la sélection!) et c'est très clean ;).

Pour les classes effectivement, j'ai fais le truc en vitesse mais j'aurai dû prendre le temps d'en définir!

J'ai fais une liste parce qu'après avoir fait pas mal de recherches sur les menus de navigations, c'était toujours comme ça que c'était fait, mais c'est sûr que ça complique le code, ça fait des sélecteurs à rallonge et on sait plus où placer une propriété pour arriver à ce qu'on veut!

En tout cas merci beaucoup et si tu as quelques conseils à donner comme ça à un débutant je suis preneur!

https://github.com/EmmanuelBeziat/guidelines;)