Discussion :

[Melenda]

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 :

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

[miss_socrates]

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 :

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

text-align: center;

pour chaque ID.

[Invité]

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 :

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

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

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
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,...

[Melenda]

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 :

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

[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.

[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,