28220 sujets

CSS et mise en forme, CSS3

Ancien menu css

Bonjour, je sens que je vais me faire engueuler Smiley bawling mais ayant quelque probleme avec le menu déroulant css/javascript car j'y rajoute des fonctions php pour le mettre a jour depuis une interface d'admin.

J'ai décidé de partir d'un ancien tuto de raphael qui s'accorde bien mieux avec mon php, seul probleme c'est un menu vertical et je veut faire un menu horizontal. Donc, je vais continuer à bosser pour réeussir à le mettre à l'horizontal, mais si vous aviez quelques petites pistes ça m'avancerait beaucoup dans mon travail. Voici le code :



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
ul, li {
margin: 0;
padding: 0;
list-style-type: none;
float: left;
}

.menu {
float: left;
width: 100%
top: 0;
left: 0;
margin-top: 1px;
width: 150px;
height: 20px;
border: 1px solid red;
text-align: center;
}

a:hover {
background: yellow;
}

#smenu1, #smenu2, #smenu3 {
float :left;
text-align: center;
display: none; /* par défaut, les sous-menus ne seront pas affichés */
padding: 5px 100;
width: 150px;

}
a {text-decoration: none;
color: black;
}
-->
</style>
<script language="JavaScript">
<!-- 
function montre(id) {
if (document.getElementById) {
document.getElementById(id).style.display="block";
} else if (document.all) {
document.all[id].style.display="block";
} else if (document.layers) {
document.layers[id].display="block";
} 
} 

function cache(id) { 
if (document.getElementById) { 
document.getElementById(id).style.display="none"; 
} else if (document.all) { 
document.all[id].style.display="none"; 
} else if (document.layers) { 
document.layers[id].display="none"; 
} 
}
//-->
</script>
</head>

<body>
<div id="menu">
<ul>
<li class="menu" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Menu 1</li>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">

<li>SousMenu 1</li>
<li>SousMenu 2</li>
<li>SousMenu 3</li>

</ul>

<li class="menu" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Menu 2</li>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li>SousMenu 1</li>
<li>SousMenu 2</li>
<li>SousMenu 3</li>

</ul>

<li class="menu" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Menu 3</li>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li>SousMenu 1</li>
<li>SousMenu 2</li>
<li>SousMenu 3</li>

</ul>
</ul>
</div>
</body>  

</html>



Voila en fait le menu est à l'horizontal mais comment faire passer le sous menu sous chaque menu principal.
Merci d'avance
Yan
Modifié par yan (23 Mar 2005 - 18:03)
Salut,

tu utilise :

.menu {
float: left;
...

Donc tu fais floater le menu complet, ce que tu doit faire floater c'est les différente ligne de ton menu, essaye quelquechose comme

ul li {
float left;}

Cela fera floater les éléments de la liste à l'interieur de la liste.

FoW
Merci mais malheuresement ce n'est pas suffisant, ça marche presque sur IE, mais sur Firefox, les sous menu apparaisent toujours à coté des menus.
Euh, pourrais tu préciser ou nous donner un lien ou u sreen shot, cela serait plus facile pour te répondre.
Oui excuse moi, c'est vrai que dis comme ça, c'est... heu....incompréhensible? Smiley smile
En fait si tu regarde dans le code que j'avais mis il y'avait déja des float sur toute les balises, la j'ai seulement laissé les float sur ul li et je l'ai viré sur menu. Bref de toute façon ça donne le meme resultat a savoir ça sur IE :
upload/1285-ie.jpg

et ça sur firefox :

upload/1285-ff.jpg

En fait j'aurais bien mis un lien c'est plus parlant mais comme je suis au boulot sur le réseau je ne peut pas faire d'upload ftp.
Comme tu peux le voir le sous-menu se positionne à coté et non en dessous du menu qui lui correspond.
Merci en tous cas.
Modifié par yan (24 Mar 2005 - 15:44)
Sujet clos
Aller à