Bug sur mon menu a bouton, besoin d'aide

**Marmoccelle** · 10/03/2008, 17h11

Bonjour a tous

J'ai créé un menu dont je suis assez fier graphiquement vu que c'est tout nouveau pour moi

(graphique et xhtml datant de la semaine passée)

Il est construit uniquement avec des images d'arrière plan, puis des :hover et des :focus / :active

Voila a quoi il ressemble:

TESTER MON MENU

Le probleme est que, lorsque je selectionne aucun style sur la page, comme le menu ne contient rien si ce n est des images de fond, le menu disparait completement.

Je pensais rajouter du texte dans les liens, mais le texte passe au dessus des boutons de mon menu, je ne peux pas non plus changer la couleur du texte car les boutons sont de plusieurs couleurs...

J'ai également essayé de se faire chevaucher 2 blocs, sur chaque bouton, il y a le bloc <a> (via le CSS display: block) et un autre bloc <h3> contenant le nom de "secours" du bouton. En usant des propriétés de positionnement relative, j'ai réussi a mettre le bloc <h3> sur le bloc <a>, mais un espace équivalent a la taille du <h3> c'est créé entre chaque bouton. De plus le h3 apparait au dessus de mon bouton... bref la cata

Dans l'idée, il faudrait que je superpose mon bloc <a> contenant les images de fond sur un autre bloc contenant le texte de mon menu, mais qui serait invisible pour l'utilisateur sélectionnant une feuille de style.

Est ce qu'il y a moyen de conserver un menu comme le mien sans passer par du CSS pur? et donc d'afficher le menu meme sans style selectionné, ou est ce impossible? (je ne veux pas de javascript)

merci d'avance pour votre aide:

le xhtml:

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">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <title>Ma page</title>
    <link href="../style/menu_bouton3D.css" rel="stylesheet" type="text/css" media="screen" />
  </head>
  <body>
    <div id="menu">
		<ul>
			<li><a href="menu.html" id="accueil" ></a></li>
			<li><a href="menu.html" id="jardin" ></a></li>
			<li><a href="menu.html" id="elec" ></a></li>
			<li><a href="menu.html" id="illu" ></a></li>
			<li><a href="menu.html" id="contact" ></a></li>
		</ul>
	</div>
</html>

le 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
/*********************************************************************/
/*						PAGE							*/
/*********************************************************************/
body
{
   width: 984px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;
   background-color: green;
   border: 2px black dotted;
}
 
/*********************************************************************/
/*						MENU						*/
/*********************************************************************/
#menu li a
{
	display: block;
	height: 66px;
}
 
#menu
{
	width: auto;
	margin-right: 10px;
	padding: 0;
}
 
#menu ul
{
	width: 180px;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
 
#accueil
{
	background-image: url("../img/btn_accueiloff.png");
}
 
#accueil:hover
{
	background-image: url("../img/btn_accueilon.png");
}
 
#accueil:active, #accueil:focus
{
	background-image: url("../img/btn_accueil_on_clic.png");
}
 
#jardin
{
	background-image: url("../img/btn_jardinoff.png");
}
 
#jardin:hover
{
	background-image: url("../img/btn_jardinon.png");
}
 
#jardin:active, #jardin:focus
{
	background-image: url("../img/btn_jardin_on_clic.png");
}
 
#elec
{
	background-image: url("../img/btn_elecoff.png");
}
 
#elec:hover
{
	background-image: url("../img/btn_elecon.png");
}
 
#elec:active, #elec:focus
{
	background-image: url("../img/btn_elec_on_clic.png");
}
 
#illu
{
	background-image: url("../img/btn_illuoff.png");
}
 
#illu:hover
{
	background-image: url("../img/btn_illuon.png");
}
 
#illu:active, #illu:focus
{
	background-image: url("../img/btn_illu_on_clic.png");
}
 
#contact
{
	background-image: url("../img/btn_contactoff.png");
}
 
#contact:hover
{
	background-image: url("../img/btn_contacton.png");
}
 
#contact:active, #contact:focus
{
	background-image: url("../img/btn_contact_on_clic.png");
}

**riaStudio** · 10/03/2008, 21h37

Tu peux utiliser une technique d'image replacement pour obtenir l'effet voulu : http://www.mezzoblue.com/tests/revis...e-replacement/. Attention, chacune présente ses avantages et ses inconvénients.

**Marmoccelle** · 11/03/2008, 09h40

merci, je vais étudier tout ca

Bug sur mon menu a bouton, besoin d'aide

CSS

Vue hybride

Discussions similaires

Partager

Partager