5568 sujets

Sémantique web et HTML

Problème de présentation

J'ai créé un menu avec l'aide des tutos. Le seul problème est que lorsque je continue de créer ma page, le menu apparait par dessus le texte et non à côté.
Savez vous comment corriger cela?
Voici le code que j'ai

--------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menugauche</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" media="screen">
<!--
body {
margin: 0;
padding: 0;
background: black;
font: 100% Ringbearer;
}
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: #336600;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #660000;
}
#menu li a, #menu dt a {
color: #FFCC00;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #339900;
}
-->
</style>
</head>

<body>
<dl id="menu">


<dt onclick="javascript:montre();"><a href="accueil.htm">Accueil</a></dt>


<dt onclick="javascript:montre('smenu2');"><font color="#660000">Personnages</font></dt>

<dd id="smenu2">
<ul>

<li><a href="hobbits.htm">Les Hobbits</a></li>

<li><a href="membres.htm">Les Autres Membres de la Communauté</a></li>


<li><a href="alliers.htm">Les Alliés</a></li>

<li><a href="ennemis.htm">Les Ennemis</a></li>

<li><a href="armees.htm">Les Armées</a></li>
</ul>
</dd>


<dt onclick="javascript:montre('smenu3');"><font color="#660000">Lieux</font></dt>

<dd id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>

<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>

<li><a href="#">Sous-Menu 3.1</a></li>
</ul>
</dd>


<dt onclick="javascript:montre('smenu4');"><font color="#660000">Objets</font></dt>

<dd id="smenu4">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.1</a></li>

</ul>
</dd>


<dt onclick="javascript:montre('smenu5');"><font color="#660000">Autour du Film</font></dt>

<dd id="smenu5">
<ul>
<li><a href="#">Interviews</a></li>
<li><a href="#">Anecdotes</a></li>
<li><a href="#">Scripts</a></li>
<li><a href="#">Ils ont dit</a></li>
<li><a href="#">Du livre au Script</a></li>

</ul>

<dt onclick="javascript:montre('smenu6');"><font color="#660000">Tolkien et sa Mythologie</font></dt>

<dd id="smenu6">
<ul>
<li><a href="#">Interviews</a></li>
<li><a href="#">Anecdotes</a></li>
<li><a href="#">Scripts</a></li>
<li><a href="#">Ils ont dit</a></li>
<li><a href="#">Du livre au Script</a></li>

</ul>

<dt onclick="javascript:montre('smenu7');"><font color="#660000">Les D.V.D.</font></dt>

<dd id="smenu7">
<ul>
<li><a href="#">La Communauté de l'Anneau</a></li>
<li><a href="#">Les Deux Tours</a></li>
<li><a href="#">Le Retour du Roi</a></li>

</ul>

<dt onclick="javascript:montre('smenu8');"><font color="#660000">Les Bandes Originales</font></dt>

<dd id="smenu8">
<ul>
<li><a href="#">La Communauté de l'Anneau</a></li>
<li><a href="#">Les Deux Tours</a></li>
<li><a href="#">Le Retour du Roi</a></li>

</ul>

<dt onclick="javascript:montre('smenu9');"><font color="#660000">Les Jeux Vidéos</font></dt>

<dd id="smenu9">
<ul>
<li><a href="#">La Communauté de l'Anneau</a></li>
<li><a href="#">Les Deux Tours</a></li>
<li><a href="#">Le Retour du Roi</a></li>

</ul>

<dt onclick="javascript:montre();"><a href="#">Les Figurines</a></dt>

<dt onclick="javascript:montre('smenu10');"><font color="#660000">Les Galeries</font></dt>

<dd id="smenu10">
<ul>
<li><a href="#">La Communauté de l'Anneau</a></li>
<li><a href="#">Les Deux Tours</a></li>
<li><a href="#">Le Retour du Roi</a></li>

</ul>

<dt onclick="javascript:montre();"><a href="#">Livre d'Or</a></dt>

<dt onclick="javascript:montre();"><a href="#">Forum</a></dt>

<dt onclick="javascript:montre();"><a href="#">Liens</a></dt>

<dt onclick="javascript:montre();"><a href="#">Fan Page</a></dt>
</dd>

</dl>

<p align="center"><font color="#FFCC00" size="+7" face="Ringbearer">Les Personnages</font></p>
<p align="left"><font color="#339900" size="+5" face="Ringbearer">Faites connaissance
avec les personnages...</font></p>
</body>
</html>

--------

Et au bout du compte, le menu est superposé sur le texte
Bonjour à toi aussi Tinystar et bienvenue sur ce forum.

Tu as du louper quelques passages dans les règles du forum, notemment celle qui demande que tous les codes soient placés dans la balise prévue à cet effet Smiley cligne merci bien bien vouloir corriger ton post Smiley smile
Ben ! Justement, tu saurais si tu avais lu les règles Smiley smile

Sérieusement, tu y trouveras toute l'aide nécessaire pour bien utiliser ce forum Smiley cligne

http://forum.alsacreations.com/help.php

Tu dois avoir aussi un lien vers une liste de conseils pour les nouveaux venus... Le but n'est pas d'empêcher d'obtenir des réponses, bien au contraire, c'est pour faire en sorte que tu sois bien accueilli par les membres de cette communauté.
Modifié par dominique (16 Jan 2006 - 16:36)
De rien Smiley cligne mais ne t'inquiète pas, presque tous les nouveaux venus ne lisent pas les règles... Et à un moment ou un autre, ils sont coincés.

D'ailleurs, ce ne sont pas seulement des règles, mais aussi un mode d'emploi du forum et toute l'aide nécessaire Smiley cligne
Sujet clos
Aller à