Partage
  • Partager sur Facebook
  • Partager sur Twitter

problème avec mon menu

apparait par dessus le texte

Sujet résolu
tinystar
    16 janvier 2006 à 16:09:49

    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?
    Merci pour vos réponses
    • Partager sur Facebook
    • Partager sur Twitter
    tonnevillec
    • HTML / CSS
      16 janvier 2006 à 16:21:29

      Commence par nous montrer ton code (page + css) ;)

      Après, ton problème vient certainement d'une valeur de margin soit trop petit pour ton "corps" de page soit trop grande pour ton menu
      • Partager sur Facebook
      • Partager sur Twitter

      Vers l'infini et au-delà!

      tinystar
        16 janvier 2006 à 16:26:17

        Voici le code complet de ma page

        -----

        <!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>

        ------

        Le menu est superosé sur le texte
        Ca fait pas terrible
        Aidez moi s'il vous plait jeune Jedi
        • Partager sur Facebook
        • Partager sur Twitter
        tonnevillec
        • HTML / CSS
          16 janvier 2006 à 16:37:33

          je vois pas de bloc pour ta partie principale affichant le titre et "Faites connaissance avec les persos" et tu mets un p align=left donc forcement ton text sera placé a gauche de ta page principale!

          Citation : tinystar


          <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>



          il faudrait que tu fasse un bloc <div class="page"> par exemple avec le code de ta page et que tu rajoute une partie dans ton css pour placer ton ccs a coté de ton menu et diminue aussi la police de ton text...

          Citation


          ....

          #page
          {
          margin-left: 300px;
          }

          ....


          <div id="page">
          <p align="center"><font color="#FFCC00" size="+7" face="Ringbearer">Les Personnages</font></p>
          <p align="left"><font color="#339900" size="+2" face="Ringbearer">Faites connaissance
          avec les personnages...</font></p>
          </div>




          Ton code peut etre amélioré si tu sépares le css de ta page... pour commencer ;)
          • Partager sur Facebook
          • Partager sur Twitter

          Vers l'infini et au-delà!

          problème avec mon menu

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur ●
          • Markdown