28173 sujets

CSS et mise en forme, CSS3

Menu, bordure

je voudrais mettre une bordure à chaque élément de mon menu, mais seul l'élément du haut accepte la bordure. En mode création, c'est OK, mais a l'apercu, c'est pas bon.
Voilà le code :

<!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>un menu vertical déroulant en CSS</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">
<!--
body {
background: white;
padding:0;
margin:0;
font-family: verdana, arial, sans-serif;
font-size: 90%;
color: black;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 1em;
left: 1em;
width: 10em;
}

#menu dt {
cursor: pointer;
background: #66cccc;//couleur de base des éléments du menu

height: 20px;
line-height: 20px;
margin: 0px;//espace entre les éléments du menu
border: 1px solid gray;//bordure des éléments du menu
text-align: center;
font-weight: bold;
}

#menu dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #66cccc;
border: 0px solid gray;//bordure des éléments du sous-menu
}

#menu ul {
padding: 2px;
}
#menu li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
}

#menu li a:hover {
text-decoration: underline;
}


#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
-->
</style>

</head>
<body>

<!-- Menu -->
<dl id="menu" style="text-align: center">
<div style="border: 1px solid #66CCCC; padding: 1px">
<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
<span style="font-weight: 400"><font face="Arial" size="1">Menu 1</font></span></dt>
</div>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
<ul>
<li><font face="Arial" size="1"><a href="#">Sous-Menu 1.1</a></font></li>
<li><font face="Arial" size="1"><a href="#">Sous-Menu 1.2</a></font></li>
<li><font face="Arial" size="1"><a href="#">Sous-Menu 1.3</a></font></li>
</ul>
</dd>

<div style="border: 3px double #66CCCC; padding: 4px">

<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
<span style="font-weight: 400"><font face="Arial" size="1">Menu 2</font></span></dt>
</div>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
<ul>
<li><font face="Arial" size="1"><a href="#">Sous-Menu 2.1</a></font></li>
<li><font face="Arial" size="1"><a href="#">Sous-Menu 2.2</a></font></li>
</ul>
</dd>

<div style="border: 9px double #66CCCC; padding-left: 4px; padding-right: 5px; padding-top: 6px; padding-bottom: 5px">

<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
<span style="font-weight: 400"><font face="Arial" size="1">Menu 3</font></span></dt>
</div>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
<ul>
<li><font face="Arial" size="1"><a href="#">Sous-Menu 3.1</a></font></li>
<li><font face="Arial" size="1"><a href="#">Sous-Menu 3.2</a></font></li>
<li><font face="Arial" size="1"><a href="#">Sous-Menu 3.3</a></font></li>
<li><font face="Arial" size="1"><a href="#">Sous-Menu 3.4</a></font></li>
<li><font face="Arial" size="1"><a href="#">Sous-Menu 3.5</a></font></li>
<li><font face="Arial" size="1"><a href="#">Sous-Menu 3.6</a></font></li>
</ul>
</dd>

<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
<span style="font-weight: 400"><font face="Arial" size="1">Menu 4</font></span></dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
<ul>
<li><font face="Arial" size="1"><a href="#">Sous-Menu 4.1</a></font></li>
<li><font face="Arial" size="1"><a href="#">Sous-Menu 4.2</a></font></li>
</ul>
</dd>
</dl>

</body>
</html>
Bonsoir et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Sujet clos
Aller à