[CSS 2] Boutons images de menu

fazpedro · 15/09/2011, 15h07

Bonjour,

je souhaite mettre des boutons avec une image (bouton_web.png), dans mon menu (horizontal)

Mais l'image n'apparait pas..

avez-vous une idée ? Merci de votre aide.

Code HTML généré :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />	
<title>MON SITE</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- colonne MENU -->
<ul id="colonne1">
                         <li class="lienactif"><a href="index.php">Accueil</a></li>
			<li class="lienclassique"><a href="agenda.php">Rechercher</a></li>
			<li class="lienclassique"><a href="liens.php">Liens</a></li>
			<li class="lienclassique"><a href="contact.php">Contact</a></li>
			<li class="lienclassique"><a href="newsletter.php">Newsletter</a></li>
</ul> <!-- FIN DE colonne MENU -->
</body>
</html>

mon 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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
body { /* corps du site */
margin-bottom : 1%;
background-image: url(Faz_fond.JPG);
font : 80% Georgia, Arial, Helvetica, sans-serif;
text-align : left;
}
#en_tete { /* en tête avec image en haut */
margin : 0%;
text-align : center;
}
#colonne1 {	overflow: hidden; /* pour eviter de les depassements */
			display : inline;
			padding: 1px 20px;
			list-style-type:none;
			background-image:url(bouton_web.png);
			}
#colonne2 {	overflow: hidden;
			padding: 1px 20px;
			list-style-type:none;
			}
#mainContent { /* contenu principal */
			margin-bottom : 1%;
			overflow: hidden;
			padding: 1px 20px;
			clear: both;   /* style mobile : pour se positionner en-dessous du bloc précédent */
			}
/* pour onglet de MENU sélectionné ou non */
#colonne1 .lienclassique { 
display : inline;
font-size : 100%;
list-style-type:none;
margin-bottom : 1%;
background-image:url(bouton_web.png);
}
#colonne1 .lienactif {
display : inline;
font-size : 110%;
font-weight : bold;
margin-bottom : 1%;
list-style-type:none;
background-color : #EAEAAE;
background-image:url(bouton_web.png);
}
 
/* pour affichage en ligne du menu */
ol, ul, li {
		padding: 0;
		margin: 0.4%;
		display: inline; 
		list-style-type:none;
		background-color : ##ff6600;
		}

jreaux62 · 15/09/2011, 19h30

Code :

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

background-image:url(bouton_web.png);

Il faut mettre le chemin relatif entre l'image et l'emplacement du fichier CSS.
+ vérifier les majuscules/minuscules ?

fazpedro · 15/09/2011, 21h16

@ jreaux62 :
que veut dire "chemin relatif" entre l'image et l'emplacement du fichier CSS ?
l'image est à la racine, j'ai même essayé de mettre la ligne background dans #mainContent et l'image se positionne bien l'image dans le corps de la page mais c'est pas ce que je veux...

jreaux62 · 16/09/2011, 11h15

Citation:

Le chemin relatif désigne la succession des répertoires à parcourir depuis le répertoire courant pour accéder au fichier spécifié.

Donc, il faut savoir où se trouve l'image PAR RAPPORT à l'emplacement du fichier style.css

Si :
- l'image est dans le dossier "www/mesimages" ;
- le fichier CSS dans le dossier "www/mescss" ;
alors le chemin relatif DEPUIS le fichier CSS est : "../mesimages/image.png"

fazpedro · 16/09/2011, 11h20

@ jreaux62 :
le chemin est le même, c'est à dire à la racine du site ( je n'ai pas créé de dossier particulier...) le fichier "style.css" est aussi à la racine du site... je ne vois pas comment faire ?

Merci.

jreaux62 · 16/09/2011, 12h47

Dans ce cas, tu devrais voir l'image.
Comme j'ai vu que tu as aussi une autre image "Faz_fond.JPG" :
-> vérifie le nom de l'image : bouton_web.png TOUT EN MINUSCULE (sensible à la casse ?).

ps: tu peux aussi écrire :

Code :

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

1
2
3
background:url(home.png) repeat-y;
background:#EAEAAE url(home.png) no-repeat;
...

-> voir CSS Background (Background - Shorthand property)

fazpedro · 16/09/2011, 14h37

j'ai rajouté la ligne "padding" :

Code :

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

1
2
3
4
5
6
7
#colonne1 .lienclassique {
padding: 1.5%;
..........
}
#colonne1 .lienactif {
padding: 1.5%;
..........

là je retrouve bien mon image "bouton"... mais le texte se retrouve au-dessus du bouton et je voudrais qu'il soit par-dessus mon bouton bleu, j'ai essayé ceci mais cela ne fonctionne pas :

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
 
/* pour onglet de MENU sélectionné ou non */
#colonne1 .lienclassique {
padding: 1.5%;
background: url(bouton_web.png);
opacity : 15;
-moz-opacity : 15;
-ms-filter: "alpha(opacity=10)"; /* IE 8 */
filter : alpha(opacity=10); /* IE < 8 */
display : inline;
font-size : 100%;
list-style-type:none;
margin-bottom : 1%;
}
#colonne1 .lienactif {
padding: 1.5%;
display : inline;
font-size : 110%;
font-weight : bold;
margin-bottom : 1%;
list-style-type:none;
background: url(bouton_web.png);
opacity : 15;
-moz-opacity : 15;
-ms-filter: "alpha(opacity=10)"; /* IE 8 */
filter : alpha(opacity=10); /* IE < 8 */
 
}

en fait je veux avoir le lien par-dessus le bouton un peu comme celui-ci :
http://css.mammouthland.net/

Merci.

15/09/2011, 19h30	#2
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 994 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 994 Points : 5 787 Points : 5 787	Code : Sélectionner tout - Visualiser dans une fenêtre à part background-image:url(bouton_web.png); Il faut mettre le chemin relatif entre l'image et l'emplacement du fichier CSS. + vérifier les majuscules/minuscules ? __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

15/09/2011, 21h16	#3
fazpedro Membre du Club Inscription : août 2009 Messages : 360 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : août 2009 Messages : 360 Points : 64 Points : 64	@ jreaux62 : que veut dire "chemin relatif" entre l'image et l'emplacement du fichier CSS ? l'image est à la racine, j'ai même essayé de mettre la ligne background dans #mainContent et l'image se positionne bien l'image dans le corps de la page mais c'est pas ce que je veux...
	00

16/09/2011, 11h20	#5
fazpedro Membre du Club Inscription : août 2009 Messages : 360 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : août 2009 Messages : 360 Points : 64 Points : 64	@ jreaux62 : le chemin est le même, c'est à dire à la racine du site ( je n'ai pas créé de dossier particulier...) le fichier "style.css" est aussi à la racine du site... je ne vois pas comment faire ? Merci.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email