[Apprenti] Créer un menu de navigation en ligne

Bonjour à tous !

Si j'ai choisi de mettre un niveau intermédiaire c'est tout simplement parce que l'on passe à la modification d'un menu pour le mettre en ligne. Je ne vais donc pas aborder les principes de base du CSS (même si tout sera commenté en détail).

Donc dans l'absolu il faut juste savoir manipulé du HTML et du CSS et ce sera le sujet d'autres tutos pour les bases (prévu bientôt)
- Doctype et feuille de style
- Organiser et commenter son code
- Block et Inline: positionner ses éléments.

1. Modèle de départ :

Afin que tout le monde parte sur les mêmes bases nous allons utiliser un exemple.
Voici donc le code de base en HTML et CSS, il ne vous reste plus qu'à le coller dans votre éditeur de code.

HTML:

Code:

<div id="cosmo">
  <ul>
      <li><a href="#">Accueil</a></li>
      <li><a href="#">Les familles</a></li>
      <li><a href="#">Les quartiers</a></li>
      <li><a href="#">Les histoires</a></li>
      <li><a href="#">Contact</a></li>
  </ul>
</div>

CSS

Code:

*
{
/* L'étoile signifie que les consignes s'appliquent à tous les éléments de la page*/
margin: 0; /*Pas de marges extérieures*/
padding: 0; /*Pas de marges intérieures*/
border:0; /*Pas de bordure*/
font-family: verdana; /*Police par défaut Verdana*/
font-size: 12px; /*Taille de police par défaut: 12px*/
}

body
{
background-color: #548796; /*On détermine la couleur de l'arrière plan de tout le corps de la page*/
}

#cosmo
{
width: 870px; /*largeur de la division: la taille totale correspond à sa largeur plus les padding (870px + 30px)*/
margin: auto; /*Cela va calculer automatiquement les marges et donc centrer la division*/   
padding: 15px; /*On donne des marges intérieures de 15px en haut, à droite, en bas et à gauche*/
background-color: #FFFFF2; /*On détermine la couleur de l'arrière plan*/
}

#cosmo a
{
text-decoration: none; /*Pas de surlignement*/
color: #000;
}

#cosmo ul
{
list-style: none; /*Pas de puces*/
}

#cosmo li
{
background-color: #E0ECEF;
width: 100px;
padding: 5px;
margin-top: 5px; /*Pour que vous visualisiez mieux lors de cette première phase; je met une marge extérieure en haut*/
}

Jusqu'ici c'est un menu tout bête créé grâce au listes donc avec les liens les un en dessous des autres.

2. On passe à la navigation en ligne :

Pour mettre ce menu en ligne à présent nous avons deux options:

A. Old school:

On va utiliser la propriété float.
Les éléments vont donc flotter les uns à côté des autres.

On peut dire que les éléments flottent sur la droite ou sur la gauche. Cela va juste jouer sur la manières dont ils positionnent les uns par rapport aux autres.

On doit donner cette propriété à tous les éléments qui doivent flotter.
On va également créer une division qui sera une sorte de barrière, afin que les éléments qui ne doivent pas flotter ne soient pas influencé par les autres. Pour cela on va utiliser la propriété clear

Ce qui donne donc au niveau du code HTML :
(je ne reprends que la partie modifiée et le code à ajouter)

Code:

<div id="cosmo">
    <ul>
      <li><a href="#">Accueil</a></li>
      <li><a href="#">Les familles</a></li>
      <li><a href="#">Les quartiers</a></li>
      <li><a href="#">Les histoires</a></li>
      <li><a href="#">Contact</a></li>
  </ul>
  <div class="clear"></div>
</div>

et pour ce qui est du CSS :

Code:

#cosmo li
{
background-color: #E0ECEF;
width: 100px;
padding: 5px;
margin-right: 5px; /*Pour que vous visualisiez mieux lors de cette première phase; je met une marge extérieure en haut*/
float: left;
}

.clear
{
clear: both;
}

Je vous invite à tester float: right; pour voir ce que ça donne.

B. Nouvelle pratique

C'est la solution que j'utilise, pour certain avoir deux feuilles de style à utiliser semble plus compliqué de même le fait d'avoir à utiliser des "hacks"
Pour ma part je trouve ça plus net, car je n'ai pas besoin de mettre une barrière pour éviter que les divisions ne soient influencer par la propriété "float".

Ce sont donc trois lignes de codes à rajouter. Pour ma part comme ces lignes sont des éléments que j'utilise plusieurs fois dans ma feuille de style, je les met à part. Ainsi à chaque fois que je veux avoir des éléments qui s'appose, je n'ai qu'à rajouter le nom de la class ou de id séparé par une virgule.
Donc à vous de voir si vous voulez réecrire ces lignes à chaque fois ou tout regrouper, cela dépendra de ce qui vous semble le plus clair.

Donc pour le HTML, on ne va rien changer dans ce cas là.

Dans la feuille de style principale on va avoir (style.css):

Code:

#cosmo li
{
background-color: #E0ECEF;
width: 100px;
padding: 5px;
margin-right: 5px; /*Pour que vous visualisiez mieux lors de cette première phase; je met une marge extérieure en haut*/
}

#cosmo li
{
vertical-align: top;
display:-moz-inline-stack; /* code pour Firefox 1 et 2 */
display:inline-block; /* efface la ligne précédente si le navigateur connait la fonction inline */
}

Dans la feuille de style dédiée à Internet Explorer :

Code:

#cosmo li
{
display:inline;
}

Fin du tuto.

Ce bloc servira à recueillir les remarques ou ajouter des éléments suite aux retours s'il y en a.

J'ai décidé de bien segmenter les choses pour y aller progressivement.

Si vous avez besoin de tutos, je vous demanderai de passer par la section prévu à cet effet: c'est par ici . Un réflexe à prendre, moi même et l'équipe seront ravis que vous en fassiez usage, ça nous évite d'imaginer ce qui pourrait éventuellement peut être qui sait vous servir  

Merci Fu pour le tuto

merci pour le tuto!

merci pour le tuto Fu' !

Merci Fu', je connaissais pas la «nouvelle méthode»