Discussion :

[Gizmil]

Salut,

Je suis en train de créer des barres de menu horizontales. J'utilise pour ça les balises de liste pour respecter la syntaxe! Problème: quand j'utilise ces balises, ça me semble tout de suite plus compliqué...

Pour ma part, côté xhtml, j'ai l'impression d'avoir placé correctement mes balises mais faut croire que non... ou alors, c'est du côté css qu'il faut chercher.

Voici ma page:

http://www.studiocreapix.com/fr/fr_body.ph...nu=fr%5Faccueil

J'essaye qu'il y aie une séparation (une petite barre verticale) entre mes boutons mais les blocs contenant ces barres ne se placent pas correctement!

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
<ul id="menu1">
		<span id="menu1extgauche"></span>
		<span id="menu1extdroite"></span>
		<li class="btnmenu"><a class="btnmenu" href="http://www.studiocreapix.com">INDEX</a></li>
		<span class="btnseparateur"></span>
		<li class="btnmenu"><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Faccueil">ACCEUIL</a></li>
		<span class="btnseparateur"></span>
		<li class="btnmenu"><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fgaleries">GALERIES</a></li>
		<span class="btnseparateur"></span>
		<li class="btnmenu"><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fqui%5Fsommes%5Fnous">QUI SOMMES-NOUS?</a></li>
		<span class="btnseparateur"></span>
		<li class="btnmenu"><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fstudio">LE STUDIO</a></li>
		<span class="btnseparateur"></span>
		<li class="btnmenu"><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fproduits">NOS PRODUITS</a></li>
		<span class="btnseparateur"></span>
		<li class="btnmenu"><a class="btnmenu" href="mailto:aymeric.lephotographe@gmail.com">CONTACT</a>
		</li>
</ul>

Ma css (j'ai retiré tout ce qui n'entrait pas en interaction directe avec les boutons):

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
html{
	width:100%;
}
body {
	background-color:#060B14;
	width:100%;
	text-align: center;
}
* {
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#293C66;
	margin: 0;
	padding: 0;
	border: 0;
}
/*---------------------------------------------------------------------------------------------*/
#contenerglobal{
	width:800px;
	margin:auto;
	text-align:center;
}
#margehaut1 {
	width:784px;
	height:150px;
	font-size:5px;
	color:#000000;
	margin-left: auto;
	margin-right: auto;
}
#margehaut2 {
	width:784px;
	height:20px;
	font-size:5px;
	color:#000000;
	margin-left: auto;
	margin-right: auto;
}
#menu1{
	display:block;
	width:780px;
	height:28px;
	margin:auto;
	background-image:url(images/menu_surface_spacer.gif);
	background-repeat:repeat-x;
	list-style-type:none;
}
#menu1extgauche{
	float:left;
	display:block;
	width:3px;
	height:28px;
	background-image:url(images/menu1_extremity_left.gif);
	background-repeat:no-repeat;
}
#menu1extdroite{
	float:right;
	display:block;
	width:3px;
	height:28px;
	background-image:url(images/menu1_extremity_right.gif);
	background-repeat:no-repeat;
}
#menu2extgauche{
	float:left;
	display:block;
	width:11px;
	height:28px;
	background-image:url(images/menu2_extremity_left.gif);
	background-repeat:no-repeat;
}
#menu2extdroite{
	float:right;
	display:block;
	width:11px;
	height:28px;
	background-image:url(images/menu2_extremity_right.gif);
	background-repeat:no-repeat;
}
li.btnmenu{
	float:left;
	display:block;
	height:28px;
	background-image:url(images/menu_rollover.gif);
	background-repeat:repeat-x;
}
a.btnmenu:link{
	color:#A0B5E5;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
}
a.btnmenu:hover{
	color:#ABDA4D;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
}
a.btnmenu:visited{
	color:#A0B5E5;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
}
.btnseparateur{
	float:left;
	display:block;
	width:7px;
	height:28px;
	background-image:url(images/btn_separator.gif);
	background-repeat:no-repeat;
}

Merci d'avance si vous avez la patience d'y regarder!

[pop_up]

je n'ai pas trop regardé mais pourquoi mets tu des span entre chaque balise li ?

Tu peux trés bien te faire une liste avec une image de fond situé sur la partie droite de tes "li" et cette image sera ton séparateur non ?