Bonjour , j'essaie de changer des tableaux mais pas facile .
Je voudrais centrer dans la page le menu horizontal d'alsa creation dans un div de 750 px .
de plus j'aimerais que les tailles des sous menus , voir meme des menus soient fonction des mots qu'ils comprennent et qu'ils n'aient pas surtout pour le menu du la meme taille .et pour le sous menu au moins la taille du plus grand .Seul les 3 px de padding font qu'en haut une partie reste orange au survol.
Merci
Modifié par tomtomtom (30 Jan 2006 - 12:54)
Je voudrais centrer dans la page le menu horizontal d'alsa creation dans un div de 750 px .
de plus j'aimerais que les tailles des sous menus , voir meme des menus soient fonction des mots qu'ils comprennent et qu'ils n'aient pas surtout pour le menu du la meme taille .et pour le sous menu au moins la taille du plus grand .Seul les 3 px de padding font qu'en haut une partie reste orange au survol.
Merci
<!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" lang="fr"><head><title>Expanding horizontal menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
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';}
}
//-->
</script>
<style type="text/css">
dl, dt, dd, ul,li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 113;
left: 40;
z-index:100;
width: 750px;
margin: auto auto;
}
#menu dl {
float: left;
width: 68px;
margin: 0;
font-size: 11px;
font-family: Arial;
padding-bottom: 11px;
line-height: 26px;
list-style-type: none;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #FF8C00;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: Yellow;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #00BFFF;
}
a {text-decoration: none;
color: black;
color: #222;
}
-->
</style></head>
<body>
<div id="menu" align="center">
<dl>
<dt onmouseover="javascript:montre();"><a href="" >Actualités</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="" >Visite</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="" >fgyhfty</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="" >Calendrier</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Adresses</dt>
<dd style="display: none;" id="smenu1">
<ul>
<li><a href="#">rtyry</a></li>
<li><a href="#">rytt</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="">Produits</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="">trytry</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Région</dt>
<dd style="display: none;" id="smenu3">
<ul>
<li><a href="#">rtytr</a></li>
<li><a href="#">Tryrty</a></li>
<li><a href="#">rtytry</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Evénements</dt>
<dd style="display: none;" id="smenu4">
<ul>
<li><a href="#">Sub Menu 4.1</a></li>
<li><a href="#">Sub Menu 4.2</a></li>
<li><a href="#">Sub Menu 4.3</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="" >Contact</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="" >Accueil</a></dt>
</dl>
</div>
</body></html>Modifié par tomtomtom (30 Jan 2006 - 12:54)
