Discussion :

[Marc22]

Bonjour,

j'aimerais concevoir un site de foot sur la L1 et L2, et j'aimerais que les boutons du menu soient collés comme sur ce site :

http://www.planete-marseille.net/

et je ne sais pas comment faire, j'ai créé les boutons en .gif, et je vais opter pour des rectangles aux angles pointus (pas arrondis), pour justement les coller afin que ça fasse relativement sobre.

Sur cette petite capture comme vous le verrez, j'ai un petit intervalle :



Je voudrais l'enlever et coller les boutons.

Le code est tout simplement :

Code :

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

1
2
3
4
5
<div id="menu">
	<input type="image" src="Graphisme/Ligue1.gif" />
	<input type="image" src="Graphisme/Bonton2Ligue1.gif" />
	<input type="image" src="Graphisme/Bonton2Ligue1.gif" />
</div>

Et je n'ai encore rien mis dans le CSS pour le style, les marges, etc...

Auriez-vous une idée? Merci.

[Vil'Coyote]

salut

comme tu l'as dit tu n'as encore rien mis dans le css alors que c'est là que tu va pouvoir justement gérer ton problème.

[Marc22]

Très bien, dès que je passe au CSS, j'essaierai de résoudre ça. Merci.

[Marc22]

Bonjour, pour revenir sur le site que j'ai mis en lien,

http://www.planete-marseille.net/

Dans le menu, pour que le défilement se fasse un peu lentement, c'est au niveau du CSS ou d'Ajax?

Merci.

[Vil'Coyote]

Salut,
pour cela il va falloir que tu nous montre un peu le code de ton menu

[Marc22]

Salut

y a pas trop d'organisation dans ce que je fais, je me suis lancé dans le back office avec joomla en parallèle.

Pour le menu, graphiquement c'est nul et ça manque de sobriété.

Les effets causés par les évènements onMouseOver etc.. sont gérés dans le CSS, bien que j'ai vu que je pouvais le faire dans le html. Je crois qu'Ajax ça aurait été trop difficile.

Bon si le curseur se déplace sur Ligue 1, ça devient bleu, c'est nickel, mais j'aimerais aussi que lorsque je descend dans le sous menu de Ligue 1, Ligue 1 reste en bleu, or il revient à son état initial.

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
<ul id="menu2">
		<li>
			<a href="pages/ligue1.php">Ligue 1</a>
			<ul class="sousMenu">
				<li><a href="#">Classement</a></li>
				<li><a href="#">Calendrier</a></li>
			</ul>
		</li>
...
</ul>

et le CSS

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
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
#menu2
{
	width: 644px;
	height: 21px;
	list-style-type: none;
	margin-top:50px;
	margin-left:340px;
	margin-right:300px;
	padding: 0;
	border: 0;
	position: absolute;
	font-weight : bold;
	color : #fff;
}
#menu2 li
{
	float: left;
	width: 100px;
	margin: 0;
	padding: 0;
	border: 0;
}
#menu2 li a:link, #menu2 li a:visited
{
	display: block;
	height: 1%;
	color: #000;
	background-image : url(../Graphisme/bouton.gif);
	text-align : center;
 
	margin: 0;
	padding: 4px 8px;
/*	border-right: 1px solid #fff;*/
	text-decoration: none;
}
#menu2 li a:hover { background-image: url(../Graphisme/boutonOver.gif); }
#menu2 li a:active { background-image: url(../Graphisme/boutonActive.gif); }
 
 
#menu2 .sousMenu
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#menu2 .sousMenu li
{
	float: none;
	margin: 0;
	padding: 0;
	width: 100px;
	border-bottom: 1px solid #fff;
}
#menu2 .sousMenu li a:link, #menu2 .sousMenu li a:visited
{
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: url("fond.jpg") repeat;
}
#menu2 .sousMenu li a:hover
{
	background-image: none;
	background-color: #F2462E;
}
 
#menu2 li:hover > .sousMenu { display: block; }

ça ressemble pas à grand chose donc j'ai fait un tout petit screen (avec le curseur positionné sur Ligue 1)