Discussion :

[Pepito]

Ami du jour, bonjour

J'ai un probleme avec un menu horizontal que j'ai sur les pages de mon site.
http://raiders.eysines.free.fr

Comme vous pouvez le voir, quand on passe la sourie sur les rubriques, les sous-rubriques s'affichent mais ca agrandi le tableau.

Est-il possible de faire afficher les sous-rubriques sans que ca modifie la table :

Voici quelques parties de mon code

la partie 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
 
dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	spacing: 0;
	list-style-type: none;
}
 
#menu1 {
	z-index:150;
}
 
#menu1 dl {
	float: left;
	margin: 0 0px;
}
 
#menu1 dt {
	background: #00FFFF;
	border: 0px;
   float: left;
	height: 20px;
}
 
#menu1 dd {
	border: 0px;
	width: 645px;
}
 
#menu1 li {
	background: #003366;
}
 
#menu1 li a, #menu1 dt a {
	text-decoration: none;
	display: block;
	border: 0;
}

Le menu en HTML

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="menu1">
	<dl>			
   <dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:cache('smenu1');"><img src="images/leclub.jpg"></dt>
	<dd id="smenu1">
	<ul>
	<li><a href="pages.php?id=1"><img src="images/histoire.jpg" border="0"></a></li>
	<li><a href="pages.php?id=3"><img src="images/palmares.jpg" border="0"></a></li>
   <li><a href="pages.php?id=4"><img src="images/contacts.jpg" border="0"></a></li>
	</ul>
	</dd>
	</dl>
 
        Les autres rubriques sont realisé de la meme facon

Et le javaScript au cas où...

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
 
<script type="text/javascript">
window.onload=montre;
 
 
function montre(id) {
	var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) 
			{document.getElementById('smenu'+i).style.display='none';}
	}
	if (d) 
		{d.style.display='block';}
}
 
function cache(id) {
	var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) 
			{document.getElementById('smenu'+i).style.display='hidden';}
	}
	if (d) 
		{d.style.display='block';}
}
</script>

Je pense que le probleme provient du CSS mais je n'arrive pas a trouver les propriétés qu'il faut. Je tourne en rond a modifier plein de propriétés sans que ca ne modifie rien au menu

Merci d'avance de votre aide
Pepit'

[Nee]

ca devrait fonctionner :

Code :

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

1
2
3
dd { 
position:absolute;
}

ton menu sortira du flux, mais restera à sa place.

[wikipierre]

Salut,
Un conseil supprime les tableaux du site et utilise les DIV avec le CSS.

[Pepito]

Merci pour ton code Nee.
C'est beaucoup mieux, mais maintenant, les sous-rubriques s'affichent à la place de la rubrique plutot que de se mettre sous la rubrique.

Pour le moment ca fait ca quand on passe la sourie sur une rubrique :
==============
SOUS-RUBRIQUE 1
SOUS-RUBRIQUE 2
SOUS-RUBRIQUE 3
......
==============

et j'aimerai qu'on puisse voir ca
==============
=== RUBRIQUE ===
==============
SOUS-RUBRIQUE 1
SOUS-RUBRIQUE 2
SOUS-RUBRIQUE 3
.....
==============

je sais pas si mon explication est tres clair mais vous pouvez aller voir le resultat sur mon site : http://raiders.eysines.free.fr



Pour repondre a Wikipierre, je fais ce site en tableau car beaucoup de sites sont réalisé de cette facon et je souhaite connaitre les avantages et les inconvenients des deux methodes par moi meme. Donc ce site là, je le fais en tableau. J'en ai fait d'autres en CSS.
Il faut connaitre les 2 techniques.

Merki pour vos aides
Pepit'