Menu avec images

Version imprimable

Menu avec images

Bonjour à tous,

je souhaiterai faire un menu avec une image par lien (trois liens : accueil, mes écrits, contact).

Seulement je n'y arrive pas.

Voici le code css que j'utilise:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 #navigation{ margin: 0 ; padding: 0 ; list-style: none ; text-align: center ; } #navigation li{ display: inline; margin-right: 1px ; color: #fff ; background: #c00 ; } #navigation li a.accueil{ background: #c00 url(../images/menu_accueil.gif) left top no-repeat; padding: 4px 20px ; color: #fff ; border: 1px solid #600 ; font: 1em "Trebuchet MS",Arial,sans-serif ; line-height: 1em ; text-align: center ; text-decoration: none ; } #navigation li a.accueil:hover, #navigation li a.accueil:focus, #navigation li a.accueil:active { background: #c00 url(../images/menu_accueil.gif) left top no-repeat; text-decoration: underline ; }
Et voici le résultat : http://www.ahrpe.fr/else

Comme vous pouvez le voir, l'image (http://www.ahrpe.fr/else/images/menu_accueil.gif), n'est pas centrée !

Auriez-vous une solution à me proposer ?

Merci !

04/05/2012, 21h40
miss_socrates

Image à centrer

Personnellement, je ne trouve pas cette image très jolie. Pourquoi ne pas laisser le texte avec une couleur de fond et une couleur pour le hover ?
Sinon, essayer en rajoutant

Code:

text-align: center;

pour chaque ID.

Bonjour,
dans ton CSS, il ne faut pas mettre l'image sur le "li a", mais sur le "li".
De même , le hover se fait aussi sur le li :
li:hover { ...}
li:hover a { ...}

Cela dit, miss_socrates a raison. Soyons franc, l'image est moche.

Tu peux obtenir un beau résultat uniquement en CSS :
Pour les arrondis : border-radius

Code:

1
2
	border-radius-topright:10px; -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px;
	border-radius-topleft:10px; -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px;

Essaye ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style type="text/css">
#navigation{
  margin: 0 ;
  padding: 0 ;
  list-style: none ;
  text-align: center ;
 }
 
#navigation li {
  display: inline;
  margin-right: 1px ;
  padding: 4px 20px ;
  color: #fff ;
  background: #c00 ;
  border:2px solid #600;
  border-bottom:0;
	border-radius-topright:10px; -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px;
	border-radius-topleft:10px; -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px;
}
 
#navigation li a {
  color: #fff ;
  font: 1em "Trebuchet MS",Arial,sans-serif ;
  line-height: 1em ;
  text-align: center ;
  text-decoration: none ;
 }
 
#navigation li:hover {
  background: green;
}
#navigation li:hover a {
  text-decoration: underline;
}
</style>

PS : cette bouse d'I.E. n'interprète pas (encore) les arrondis...
Donc : à voir sur Firefox, Chrome,...

Bonjour,

j'ai mis l'image sur la puce (li), et j'ai transformé la puce en block (display:block)

J'obtiens un résultat, qui n'est pas encore satisfaisant : http://www.ahrpe.fr/else

En effet, le texte n'est pas centré sur l'image..

Voici mon code CSS actuel, toutes vos remarques sont les bienvenues:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 #navigation li .accueil{ position: absolute; top: 10px; left: 200px; display:block; width:130px; height:30px; background: url(../images/menu_accueil.gif) no-repeat; display: inline; color: #fff ; } #navigation li a.accueil{ color: #fff ; font: 1em "Trebuchet MS",Arial,sans-serif ; text-align: center ; text-decoration: none ; } #navigation li a.accueil:hover, #navigation li a.accueil:focus, #navigation li a.accueil:active { background: url(../images/menu_accueil.gif) left top no-repeat; text-decoration: underline ; }
Merci de vos réponses, et merci de m'aider,

05/05/2012, 16h13
Invité

Hello,
je suppose que tu n'as même pas essayé mon code ci-dessus.

Pour info, ton image fait 130px × 30px.
Ca devrait t'aider à centrer ton texte.
05/05/2012, 16h19
Melenda

Je n'ai pas essayé, car mon objectif est de savoir faire un menu à images... peu importe la qualité de l'image, seul le code m'intéresse..

Je sais que l'image fait 130px sur 30px, mais je ne sais pas en quoi ça peut m'aider de savoir ça ????

oO

Merci de tes réponses,
05/05/2012, 16h23
Invité

Citation:

Envoyé par Melenda

Je n'ai pas essayé, car mon objectif est de savoir faire un menu à images... peu importe la qualité de l'image, seul le code m'intéresse..

Ok, compris.

Citation:

Je sais que l'image fait 130px sur 30px, mais je ne sais pas en quoi ça peut m'aider de savoir ça ????

Peut-être à dimensionner les li ? :nono:
05/05/2012, 16h28
Melenda
Bah, c'est ce que je fais en mettant:
Code:

1 2 3 4 #navigation li a.accueil{ width:130px; height:30px; }
Non ?
05/05/2012, 16h42
Invité

1 pièce(s) jointe(s)

[edit] Je viens de télécharger ton image de fond...
En réalité, l'image n'est même pas centrée !... (elle devrait faire 115px de large pour être affichée centrée)
Commence déjà par prendre une image "correcte".

Essaye avec CETTE IMAGE (pièce jointe), qui elle, fait bien 130 x 30 px.
Au moins tu verras mieux ce qui se passe...

Le calage vertical du texte se fera avec margin-top ou padding-top.
05/05/2012, 16h45
Melenda

En effet ça marche mieux, comment se fait-il que mon image ne soit pas centrée.. ?

Le problème vient-il de la découpe ?
05/05/2012, 16h48
Invité

1 pièce(s) jointe(s)

Citation:

Envoyé par Melenda

Le problème vient-il de la découpe ?

Bien vu...

Voici une AUTRE IMAGE pour le :hover
05/05/2012, 16h53
Melenda

Ok, merci beaucoup, je vais m'en sortir avec ça !

Jette au moins un oeil à ce code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style type="text/css">
* { margin:0; padding:0; }
#navigation li {
	margin:10px 20px;
	display: inline-block;
	width:130px;
	height:30px;
	padding-top:4px;
	background: url('http://www.developpez.net/forums/attachments/p94566d1336228942/webmasters-developpement-web/css/menu-images/image-130x30.png/') no-repeat;
	text-align: center ;
 }
#navigation li a {
	color: red;
	font-size:1.0em;
	font: 1em "Trebuchet MS",Arial,sans-serif ;
	text-decoration: none ;
 }
/* hover */
#navigation li:hover {
	background: url('http://www.developpez.net/forums/attachments/p94567d1336229335/webmasters-developpement-web/css/menu-images/image-130x30-hover.png/') no-repeat;
}
#navigation li:hover a {
	font-weight: bold ;
}
</style>

Important :
display: inline-block;

05/05/2012, 17h07
Melenda

Merci de ton aide jreaux62, je regarderai ce code attentivement.

A+,