Partage
  • Partager sur Facebook
  • Partager sur Twitter

Les menus

Double Menu

Sujet résolu
Zolix
    11 octobre 2006 à 19:52:30

    Bonjour, ^^

    j'ai fais 2 menus sur mon site mais ils ne veulent pas se mettre les uns en dessous des autres. :(

    Voilà le code CSS, je ne vois pas ce qui ne va pas :(

    Merci d'avance pour votre aide :p

    body
    {
            font-family: 'Trebuchet MS', Tahoma, Verdana, 'Times New Roman', Times, serif;
            font-size:0.8em;
            margin:0;
            background-color: #E6E6FA;
    }
    #menu
    {
            width: 15%;
            margin-left:0.6%;
            margin-right:0.6%;
            max-width: 160px;
    }
    #menu h4
    {
           
            text-align: center;
            margin: 0;
            padding-top: 6px;
            padding-left:15px;
            padding-bottom:4px;
            vertical-align: bottom;
            color:#2C485C;
            background-color:#F8F8FF;
            border:1px solid rgb(150,153,154);
    }
    a:link {
            color: #000000;
            text-decoration: none; 
    }

    a:visited {
            color: #000000;
            text-decoration: none;
    }

    a:hover {
        color: #506f82;
        text-decoration: none;
            font-weight:bold;
    }
    .element_menu
    {
            background-color:#F4F9FD;
            margin-bottom:5px;
            border: 1px solid #848686;
    }
    #corps
    {
            width: 82%;
            max-width: 82%;
            background-color: #F4F9FD;
            border: 1px solid rgb(234,244,251);
            padding: 5px;
            padding-bottom: 25px;
            float: right;
            margin-right: 20px;
            margin-bottom: 10px;
            border: 1px solid #848686;
    }
    h1
    {
            text-align: center;
            margin-top:6px;
            margin-bottom:30px;
            font-family: Times, 'Times New Roman', serif;
            color: #4169E1;
    }
    #pied_de_page
    {
            clear: both;
            background-color: #FFFFFF;
            border: 1px solid #848686;
            padding: 5px;
            margin: 0px 5px 8px;
            margin-right: 20px;
            width:82%;
            max-width: 82%;
            float: right;
    }
    • Partager sur Facebook
    • Partager sur Twitter
    k1mpeR
      11 octobre 2006 à 22:07:39

      Ta pas un lien ou un screen, pour voir ce que sa donne.
      • Partager sur Facebook
      • Partager sur Twitter
      caline
        12 octobre 2006 à 12:06:10

        Bonjour,

        Tu pourrais aussi montrer ton code HTML, s'il te plait.
        • Partager sur Facebook
        • Partager sur Twitter
        Zolix
          12 octobre 2006 à 17:17:56


          Bon voilà j'ai réglé déjà le problème, ils sont les uns au dessus des autres mais le corps est encore en dessous.

          J'ai essayé de bouger toutes les différentes balises, mais rien ne marche, peut etre ai je oublier une balise ?

          Voici une capture d'écran : http://pix.nofrag.com/96/ec/dab1f947fc98d20057ce6eb6653f.jpg

          body
          {
                  font-family: 'Trebuchet MS', Tahoma, Verdana, 'Times New Roman', Times, serif;
                  font-size:0.8em;
                  margin:0;
                  background-color: #E6E6FA;
                  overflow : auto ;
          }
          #menu
          {
                  width: 15%;
                  margin-left:0.6%;
                  margin-right:0.6%;
                  max-width: 160px;
          }
          #menu h4
          {
                 
                  text-align: center;
                  margin: 0;
                  padding-top: 6px;
                  padding-left:15px;
                  padding-bottom:4px;
                  vertical-align: bottom;
                  color:#2C485C;
                  background-color:#F8F8FF;
                  border:1px solid rgb(150,153,154);
          }
          a:link {
                  color: #000000;
                  text-decoration: none; 
          }

          a:visited {
                  color: #000000;
                  text-decoration: none;
          }

          a:hover {
              color: #506f82;
              text-decoration: none;
                  font-weight:bold;
          }
          .element_menu
          {
                  background-color:#F4F9FD;
                  margin-bottom:5px;
                  border: 1px solid #848686;
          }
          #corps
          {
                  width: 82%;
                  max-width: 82%;
                  background-color: #F4F9FD;
                  border: 1px solid rgb(234,244,251);
                  padding: 5px;
                  padding-bottom: 25px;
                  float: right;
                  margin-right: 20px;
                  margin-bottom: 10px;
                  border: 1px solid #848686;
          }
          h1
          {
                  text-align: center;
                  margin-top:6px;
                  margin-bottom:30px;
                  font-family: Times, 'Times New Roman', serif;
                  color: #4169E1;
          }
          #pied_de_page
          {
                  clear: both;
                  background-color: #FFFFFF;
                  border: 1px solid #848686;
                  padding: 5px;
                  margin: 0px 5px 8px;
                  margin-right: 20px;
                  width:82%;
                  max-width: 82%;
                  float: right;
          }


          C'est super sympa de votre part de m'aider !
          • Partager sur Facebook
          • Partager sur Twitter
          Candygirl
            12 octobre 2006 à 17:54:44

            Comme quelqu'un te l'a demandé plus haut l'html aurait été utile...

            Perso je vois 2 choses (en supposant ton html):

            - mettre un float:left sur ton menu et il devrait passer à côté mais uniquement sur de très hautes résolutions.

            - Le problème est ton mélange entre les pixels et les %. Si 1px de bordure ne représente pas grand chose en % de la largeur sur un 1280, il représente beaucoup plus en 800x600. Sur ta page, tu as 15% pour le menu + les marges 2*0.6 + la largeur du corps 82%:
            15+1.2+82= 98.2% reste donc 1.8% de marges pour caser des bordures, padding et marges, soit un total de 32px. (bon c'est approximatif parce qu'il y a le max-width de ton menu qui entre en jeu). Bref, sur FF tu peux espérer que ton corps soit à côté de ton menu pour toute les résolution supérieures à environ 1150 de large et sur IE, tu peux oublier vu qu'il ne connaît pas le max-width :)
            • Partager sur Facebook
            • Partager sur Twitter
            Anonyme
              12 octobre 2006 à 17:59:41

              margin-left suffisant pour #corps
              pas besoin de largeur dans ce cas :)
              • Partager sur Facebook
              • Partager sur Twitter
              Zolix
                12 octobre 2006 à 18:01:55

                Merci d'avoir répondu, donc je reprends :

                il faudrait que j'évite le mélange entre les pixels et les %

                Aussi, que me manque t il ?

                Si tu peux me remplacer mon code parce que je comprends pas énormément toutes ces phrases o_O

                Je fais des tests avant de poser des questions, mais là c'est compliqué, je ne comprends pas les erreurs !

                Bon voici ma page html :


                <!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">
                               
                                <head>
                                <title>Acceuil</title><!-- Le titre de la page ici -->
                                <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
                                <link rel="stylesheet" media="screen" type="text/css" title="essai" href= "CSS/index.css" /> <!-- Ici on a le renvoie au CSS-->
                                </head>
                                <!--Séparation-->
                                <body>
                                <div id="en_tete"><!--tout en haut --> <!-- ici on va mettre notre bannière (si un jour on l'a à vrai dire)-->
                                <p>.</p>
                                <p>.</p>
                                <p>.</p>
                                <p>.</p>
                                </div>
                                <!--Séparation-->
                                <div id="menu">
                                        <div class="element_menu">
                                                <h4>Les cours</h4>     
                                                        <ul>
                                                                <ul> <!--Les liens principaux-->
                                                                        <li><a href="www.essai.com">Français</a></li>
                                                                        <li><a href="www.essai.com">Histoire</a></li>
                                                                        <li><a href="www.essai.com">Géographie</a></li>
                                                                        <li><a href="www.essai.com">Education Civique</a></li>
                                                                </ul>
                                                        </ul>
                                        </div>
                                </div>
                                <!--séparation-->
                                <div id="menu">
                                        <div class="element_menu">
                                                <h4>Autres</h4> 
                                                        <ul>
                                                                <ul>
                                                                        <li><a href="www.essai.com">Acceuil</a></li>
                                                                        <li><a href="www.essai.com">Liens extérieurs</a></li>
                                                                        <li><a href="www.essai.com">Jeux</a></li>
                                                                        <li><a href="www.essai.com">Webmasteur</a></li>
                                                                </ul>
                                                        </ul>
                                        </div>
                                </div>
                                <!--séparation-->
                                <div id="corps"> <!-- ici on est dans le centre de la page, le corps --> <!-- ici on aura tout notre texte les news etc... -->


                                        <h1>Merci au Site du Zéro</h1>

                                       
                                        <p>...</p>

                                        <hr>
                                       
                                        <h1>Mise en ligne du Site</h1>
                                       
                                        <p>...</p>
                                       
                                        <hr>
                                </div>
                                <!--Séparation-->
                                <div id="pied_de_page"> <!-- on se situ tout en bas, dans la derniere partie -->
                                        <p class="enbas"> Cette page a été codée par Gabinou</class></p>
                                        <p class="enbas">Contacter l'administration</class></p>
                                        <p class="enbas">Vous êtes au bout, revenir en haut ?</class></p>
                                </div>
                        </body>
                        </html>
                • Partager sur Facebook
                • Partager sur Twitter
                Candygirl
                  12 octobre 2006 à 18:13:12

                  La solution de deuterium est la plus simple dans ce cas mais elle t'expose au bug des 3px sur IE.

                  Aussi un id doit être unique sur la page; tu ne peux pas avoir 2 id="menu" dabns ce cas tu dois appliqer une classe: class="menu" et dans ton css .menu {}

                  en fait dans ton cas si tu veux tes 2 sous-menus l'un en dessous de l'autre il faut juste virer ton </div><div id=menu"> (le 2ème)
                  • Partager sur Facebook
                  • Partager sur Twitter
                  Zolix
                    12 octobre 2006 à 18:15:36

                    Deuterium je connais que ça dans un jeu :lol:

                    Tu peux être plus explicite. o_O

                    Merci de m'aider, c'est super sympa :D
                    • Partager sur Facebook
                    • Partager sur Twitter

                    Les menus

                    × 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