18079 sujets

Questions générales et questions de débutants

Menu Vertical V2 - pb de margin ou d'align voire autre !

Bonjour à tous,

premier post, mais pas premiere visite Smiley cligne

je suis parti du menu vertical v2 pour faire "mon" menu => Merci !
J'ai commencé par modifier l'apparence générale, en voulant avoir un fond qui soit ajusté aux liens j'ai changé un margin (menu dt). Malheureusement apres de nombreux essais, recherches, etc cela ne fonctionne pas correctement dans le sous-menu car ce dernier conserve un margin !
j'ai pu l'enlever en mettant un attribut _display: inline; (dans menu li) mais cela m'enleve l'alignement au centre du texte ...

pouvez-vous m'éclairer ?

merci d'avance

voici le code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu Alsacréations</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<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';}
}
//-->
</script>

<style type="text/css">
<!--

* {margin:0; padding:0}

body {
background: white;
padding:0;
margin:0;
font-family: arial, sans-serif;
font-size: 90%;
letter-spacing: 1px;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 1em;
left: 21em;
width: 10em;
}
#menu dt {
cursor: pointer;
background: white;
height: 30px;
line-height: 30px;
[#blue]margin: 0px;[/#] [#olive]/*ca fonctionne*/[/#]
text-align: center;
font-weight: normal;
}
#menu dd {
position: absolute;
z-index: 100;
left: -10em;
margin-top: -2.15em;
width: 10em;
background: white;
}
#menu li {
text-align: center;
font-size: 85%;
height: 30px;
line-height: 30px;
[#blue]margin: 0px;[/#]  [#olive]/*ca fonctionne pas !!!*/
/*_display:inline;*/        /*ca fonctionne mais ca enleve*/ 
                                  /*le centrage du texte*/[/#]
}
#menu dt a {
background: white;
color: #333333;
text-decoration: none;
display: block;
}
a.bas_menu1{
border-width: 0px 0px 1px 0px;
border: solid;
border-color: #999999;
display: block;
}
#menu li a{
background: white;
color: #333333;
text-decoration: none;
display: block;
}
a.bas_menu2{
border-width: 0px 0px 1px 0px;
border: dashed;
border-color: #999999;
display: block;
}
a.langue{
letter-spacing: 0px;
font-weight:lighter;
height: 18px;
line-height: 18px;
}
#menu li a:hover, #menu dt a:hover{
background: #CCCCCC;
text-decoration: none;
font-weight: 600;
color:#FF9900;
}
-->
</style>

</head>
<body>

<!-- Menu  -->
<dl id="menu">
		<dt><a class="bas_menu1" href="#">artistes</a></dt>
		<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"><a class="bas_menu1" href="#">expositions</a></dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
				<ul>
					<li><a class="bas_menu2" href="#">à venir</a></li>
					<li><a class="bas_menu2" href="#">actuellement</a></li>
					<li><a href="">archives</a></li>
				</ul>
			</dd>	

		<dt><a class="bas_menu1" href="#">galerie</a></dt>
		<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"><a class="bas_menu1" href="#">infos</a></dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();" name="smenu4">
				<ul>
					<li><a class="bas_menu2" href="#">accès</a></li>
					<li><a class="bas_menu2" href="#">contact</a></li>
					<li><a href="#">liens</a></li>
				</ul>
			</dd>
  		<dt><a class="langue" href="#">deutsch</a><a class="langue" href="#">english</a></dt>
  			
</dl>
</body>
</html>

Modifié par yus (18 Dec 2005 - 16:08)
résolu


/*DEBUT MENU*/
.menu {
position: absolute;
width: 200px;
height: 340px;
background-color:#CCCCFF;
}
#menu {
position: absolute;
top: 106px;
right: 15px;
width: 100px;
letter-spacing: 1px;
}
#menu dt {
cursor: pointer;
background: white;
height: 30px;
line-height: 30px;
margin: 0px;
text-align: center;
font-weight: normal;
}
#menu dd {
position: absolute;
z-index: 100;
left: -80px;
margin-top: -31px;
width: 80px;
background: white;
}
#menu li {
text-align: center;
font-size: 85%;
letter-spacing: 0px;
height: 30px;
line-height: 30px;
margin: 0px;
width: 80px;
[#green]_display: inline;[/#]
}
#menu dt a {
background: white;
color: #333333;
text-decoration: none;
display: block;
}
a.bas_menu1{
border-width: 0px 0px 1px 0px;
border: solid;
border-color: #999999;
display: block;
}
#menu li a{
[#green]text-align: center;[/#]
background: white;
color: #333333;
text-decoration: none;
display: block;
}
a.bas_menu2{
border-width: 0px 0px 1px 0px;
border: dashed;
border-color: #999999;
display: block;
}
a.langue{
letter-spacing: 0px;
font-weight:lighter;
height: 18px;
line-height: 18px;
}
#menu li a:hover, #menu dt a:hover{
background: #CCCCCC;
text-decoration: none;
font-weight: 600;
color:#FF9900;
}

/*FIN MENU*/



par contre les bordures passent pas sous Firefox ! elles sont plus grosses et décalées ....
quelqu'un a une idée ?
Modifié par yus (21 Dec 2005 - 22:18)
Sujet clos
Aller à