Discussion :

[rickgoz]

Bonsoir,

Voilà j'ai un menu horizontal formé de plusieurs images cliquables. Voici le code, cela fonctionne, mais je ne sais pas si c'est le plus judicieux...

CODE HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div id="menu_en_tete" >
	<ul type=none>
 
		<li><a href="rickgoz_index.html"><img src="rickgoz_bouton_accueil.jpg" /></a><li>
		<li><a href="rickgoz_residence.html " ><img src="rickgoz_bouton_domaine.jpg" /></a></li>
		<li><a href="rickgoz_services_public.html" ><img src="rickgoz_bouton_services.jpg" /></a></li>
		<li><a href="rickgoz_contact_public.html "><img src="rickgoz_bouton_contact.jpg" /></a></li>
		<li><a href="rickgoz_inscription.html"><img src="rickgoz_bouton_inscription.png" /></a></li>
 
	</ul>
</div>

CODE CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#menu_en_tete 
{
margin:auto;
height: 25px;
padding: 5px; 
width: 525px;
 
}
 
#menu_en_tete ul 
{
 margin-top: 0px;
 padding: 0px;
 line-height: 30px;
 white-space: nowrap;
}
 
#menu_en_tete li 
{
 list-style-type: none;
 display: inline; /* Permet d'aligner les boutons sur la barre de menu*/
}

Si vous avez des remarques pour que ce soit plus " correct "...

Merci d'avance!

Bonne nuit!

[Madfrix]

Bonjour,

Qu'est ce qui te convient pas dans ton menu ?

[rickgoz]

Désolé,

Non ça fonctionne, mais je voulais savoir si c'était bien comme ca qu'il fallait faire....

[devyan]

Désolé,

Non ça fonctionne, mais je voulais savoir si c'était bien comme ca qu'il fallait faire....

Le HTML est simple, le CSS également, ça fonctionne ...

Que demander de plus ?

[Erwan31]

Désolé,
Non ça fonctionne, mais je voulais savoir si c'était bien comme ca qu'il fallait faire....

Non, il fonctionnera dans un contexte d'utilisation standard (via un navigateurs graphique) MAIS pas du tout via un navigateur texte comme lynx, un lecteur d'écran (logiciel de synthèse vocal pour personnes mal/non-voyantes) ou si pour une raison ou une autre les images ne sont pas chargées (rien de s'affichera).
Même chose pour un moteur d'indexation, c'est comme si tu avais des liens vides. Donc, si tu n'as pas prévu de plan de site, les pages intérieures ne pourront pas être référencées.

Pour pallier à cela, tu dois impérativement renseigner l'attribut alt des tes images lien du nom de la rubrique et leur donner systématiquement leur taille intrinsèque via les attributs HTML adéquates (pour les navigateurs de mobiles).

Ce qui donnerait par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<li><a href="rickgoz_index.html"><img src="rickgoz_bouton_accueil.jpg" alt="A propos" width="150" height="150" /></a><li>

Sachant que pour des raisons d'accessibilité visuelle, le nom de la rubrique et son fond doivent être suffisamment contrastées et que celui-ci doit avoir un taille suffisamment grande au même titre que la surface cliquable du bouton (question d'ergonomie entres autres).
Il faudra aussi t'assurer qu'en l'absence d'images, le alt équivalent est suffisamment contrasté avec son fond.

Il est préférable de ne pas fixer la hauteur du menu en pixel mais en em puisque cela empêche son redimensionnement proportionnellement à la taille du texte sous IE6... sachant qu'1em est la taille du texte de l'élément auquel elle s'applique.

Ce qui donnerait (en supposant que la taille du texte est de 12px)
:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#menu_en_tete 
{
margin: 0 auto;
height: 2em;
padding: 0.4em; 
width: 525px;
 
}
 
#menu_en_tete ul 
{
 margin-top: 0; /*pas besoin des px quand la valeur est à 0*/
 padding: 0;
 margin-left:0; /*pour IE et Opera 9-*/
 line-height: 2.5em;
 white-space: nowrap;
}

Lis les commentaires.

Attention au display:inline des li qui génère des espaces horizontaux supplémentaires (d'environ 4px) non significatif entre les li.
Pour résoudre ce problème, mettre les li en float:left.

[c_s_s]

<img src="rickgoz_bouton_accueil.jpg" alt="A propos" width="150px" height="150px" />

L'unité ne doit pas être précisée ici.
Seul un nombre entier ou un pourcentage est permis.

<img src="rickgoz_bouton_accueil.jpg" alt="A propos" width="150" height="150" />

[Erwan31]

L'unité ne doit pas être précisée ici.
Seul un nombre entier ou un pourcentage est permis.

<img src="rickgoz_bouton_accueil.jpg" alt="A propos" width="150" height="150" />

Je sais je sais une erreur d'inattention