Voilà, j'ai un petit problème, malrgès les nombreux tutos que j'ai lu j'arrive à créer un menu déroulant mais PAS à l'intégrer correctement.
Mon site fonctionne avec une css et une page contenu.
Voilà la css :
/************************ Eléments de la page ************************/
body {
margin: 0;
padding: 0;
background: #f0f0f0 url('./body_background.jpg') repeat-x top right;
font-family: "Tahoma", Trebuchet MS, Verdana, Arial, sans-serif;
font-size: 10px;
color: #2998E6;
}
html {
width : 100%;
height: 100%;
}
img a {
border: 0;
}
M
/*********************************************************************/
/******************** Header - Menu - Contenu ************************/
/*********************************************************************/
/******* header ********/
#body {
width: 801px;
height: 100%;
margin: 0;
padding: 0;
}
/******** Menu *********/
#navigation {
width: 192px;
height: 550px;
float: left;
padding: 0;
margin: 0;
background: url('./navigation_background.jpg') no-repeat top right;
}
#menu {
width: 160px;
height: 200px;
float: left;
padding: 0;
margin: 280px 0 0 25px;
}
#menu ul {
list-style-type: none;
margin: 0 0 0 0;
padding: 0;
}
#menu li {
width: 160px;
height: 24px;
margin-left: 12px;
}
#menu li a {
display: block;
padding: 6px 10px 6px 0;
text-decoration: none;
text-align: right;
color: #343434;
font-size: 11px;
border-bottom: 1px solid #DDD;
}
#menu li a:hover {
color: #2998E6;
padding: 6px 10px 6px 0;
}
/******** Contenu *********/
#content {
min-height: 448px;
width: 564px;
float: left;
padding: 0;
margin: 0;
background: url('./content_background.jpg') repeat-y left;
}
/* hack pour internet explorer only */
* html #content {
height: 468px;
}
#content .top {
width: 604px;
height: 274px;
background: url('./content_top.jpg') no-repeat top left;
}
#content .middle {
width: 509px;
min-height: 448px;
margin: -192px 0 0 23px;
padding: 5px 5px 0 5px;
text-align: justify;
background-color: #fff;
}
/* hack pour internet explorer only */
* html #content .middle {
height: 468px;
}
#content .bottom {
width: 564px;
height: 70px;
background: url('./footer.jpg') no-repeat top left;
}
#content .bottom-left {
float: left;
text-align: left;
color: #000;
padding: 0;
padding-top: 30px;
padding-left: 24px;
}
#content .bottom-right {
text-align: right;
float: right;
color: #000;
padding: 0;
padding-top: 30px;
padding-right: 24px;
}
#content .bottom-right a, .bottom-left a {
color: #000;
text-decoration: none;
}
#content .bottom-right a:hover, .bottom-left a:hover {
color: #2998E6;
text-decoration: underline;
}
/*********************************************************************/
/******************* Les mises en forme textes ***********************/
/*********************************************************************/
h1 {
margin: 5px 10px; padding: 0;
font-size: 11px;
font-weight: bold;
color: #2998E6;
line-height : 16.18px;
}
h2 {
margin: 5px 10px; padding: 0;
font-size: 13px;
font-weight: bold;
color: #2998E6;
}
Et voilà le contenu :
<body>
<div id="body">
<div id="navigation">
<div id="menu">
<ul id="menu">
<li><a href="./index.html">Accueil</a></li>
<li><a href="./profil.html">Profil</a></li>
<li><a href="./blog.html">Blog</a></li>
<li><a href="./Sciences.html">Sciences</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</div>
</div>
Il faudrait que je puisse intégrer ce menu ci : (il est complet et comme je voudrais qu'il soit ^^ :=)
<style type="text/css" media="screen">
<!--
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
}
#menu {
width: 15em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
-->
</style>
<head>
<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>
</head>
<body>
<dl id="menu">
<dt onclick="javascript:montre();"><a href="index.html">Accueil</a></dt>
<dt onclick="javascript:montre();"><a href="profil.html">Profil</a></dt>
<dt onclick="javascript:montre('Blog');">Blog</dt>
<dd id="Blog">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('Sciences');">Sciences</dt>
<dd id="Sciences">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.1</a></li>
</ul>
</dd>
<dt onclick="javascript:montre();"><a href="contact.html">Contact</a></dt>
</ul>
</dd>
</dl>
</body>
J'espère que c'est pas trop long et que vous pourrez m'aider...
C'est un problème de coordination entre la css et le contenu, mais je ne vois pas...
Please, help me :=)
