Un menu horizontal

Version imprimable

Un menu horizontal

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:

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:

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!

06/12/2008, 11h47
Madfrix

Bonjour,

Qu'est ce qui te convient pas dans ton menu ?
06/12/2008, 12h58
rickgoz

Désolé,

Non ça fonctionne, mais je voulais savoir si c'était bien comme ca qu'il fallait faire....
06/12/2008, 18h22
devyan

Citation:

Envoyé par rickgoz

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 ?

Citation:

Envoyé par rickgoz

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:

<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:

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.

06/12/2008, 23h56
c_s_s

Citation:

Envoyé par Erwan31

<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" />
07/12/2008, 02h31
Erwan31

Citation:

Envoyé par c_s_s

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 ;)
11/12/2008, 01h41
rickgoz

Merci en tout cas!

Juste une petite chose, je voudrais que mes boutons soit collés, et non séparés
http://www.akengro.t1hosting.co.uk/i...goz_index.html

Avez vous une idée? Que dois-je modifier ou ajouter dans mon fichier css?

Merci d'avance!
11/12/2008, 10h08
Erwan31

Citation:

Envoyé par rickgoz

Merci en tout cas!
Juste une petite chose, je voudrais que mes boutons soit collés, et non séparés
http://www.akengro.t1hosting.co.uk/i...goz_index.html
Avez vous une idée? Que dois-je modifier ou ajouter dans mon fichier css?
Merci d'avance!

Ah tu n'as pas mu mon message jusqu'au bout, en tous cas je ne vois aucune amélioration par rapport à ce que je t'ai expliqué, à moins que tu ne l'aies pas encore intégré?

Citation:

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.
11/12/2008, 11h23
rickgoz

Désolé je n'ai pas eut le temps en effet.

Je viens de mettre à jour une partie de ce que tu m'avais conseillé.

Cependant en ce qui concerne les

Code:

width="150" height="150"

Je ne les ai pas encore ajouté car je n'ai pas compris comment les utilisés. C'est des pixels? comment savoir quelle taille mettre?

Pour ce qui est du float:left, cela reduit bien l'écart entre chaque image (merci!) mais ne me centre plus mon menu...

Merci pour ton aide en tout cas!
11/12/2008, 14h46
Erwan31

Citation:

Envoyé par rickgoz

Je ne les ai pas encore ajouté car je n'ai pas compris comment les utilisés. C'est des pixels? comment savoir quelle taille mettre?

C'est la taille de ton image tout simplement. Sur Windows XP: clic droit>propriété>onglet résumé>cliquer sur avancé>puis là tu verra la taille de ton image, sinon dans un visualiser/éditeur d'image.

Citation:

Envoyé par rickgoz

Pour ce qui est du float:left, cela reduit bien l'écart entre chaque image (merci!) mais ne me centre plus mon menu...

Même avec le display:inline il n'était pas centré. ;)
Tu dois centrer ton UL en lui donnant une largeur (addition de la largeur de toutes les img) + margin: 0 auto
11/12/2008, 15h22
rickgoz

D'accord pour les images merci

Pour ce qui est du menu, avant il était centré grâce à un text-align:center; que je mettais dans #menu_en_tete.
Maintenant il est inutilisable.

Pour la méthode des dimensions, j'ai essayé mais j'ai un soucis: lorsqu'on accède au pages des membres, le menu se réduit. Donc même avec ta technique ça ne fonctionne pas.

A moins de créer un autre fichier css? C'est ça?