Partage
  • Partager sur Facebook
  • Partager sur Twitter

Mettre un menu a gauche et a droite

comment qu'on fait ?

Sujet résolu
NeoLitik
    4 août 2006 à 21:46:48

    Alors voila, j'ai une page css et une page html (jusque là tout vas bien) mais je veux mettre a gauche un menu normal
    et un autre (menu email) a droite

    le probléme c'est que si vous essayez de voir ce que sa donne, le menu email n'est pas du tout a droite !

    <code type="html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
    <title>DUEL DE YOUNGLINGS : Le site officiel</title>


    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <!-- Ci-dessous le design "par défaut" du site -->
    <link rel="stylesheet" media="screen" type="text/css" title="css" href="css.css" />
    <!-- Ci-dessous les designs alternatifs que vous proposez -->
    <link rel="alternate stylesheet" media="screen" type="text/css" title="bleu" href="pourrav.css" />
    </head>
    </head>
    <body>

    <!-- L'en-tête -->

    <div id="en_tete">

    </div>

    <!-- Les menus -->

    <div id="menu">
    <div class="element_menu">
    <h3>Menu</h3>
    <ul>
    <li><a href="index.html">Accueil</a></li>
    <li><a href="cons.html">LE FILM !</a></li>

    </ul>
    </div>



    <div class="element_menu">
    <h3>La prod...</h3>
    <ul>
    <li><a href="prodcons.html">Dark Snake<a>
    <li><a href="prodcons.html">Captain Cookie<a>
    <li><a href="prodcons.html">Captain Pizza<a>
    <li><a href="prodcons.html">NeoLitik<a> </li></ul>
    </div>
    </div>

    </div>
    <div id="menu">
    <div class="droite">
    <h3>Contacts</h3>
    <ul>
    <li><a href="mail.html">Email</a></li>
    </div>
    </div>

    <!-- Le corps -->

    <div id="corps">
    <h1>Mon super site</h1>

    <p>
    Bienvenue sur mon super site !<br />
    Vous allez adorer ici, c'est un site génial qui va parler de : DUEL DE YOUNGLINGS, un film d'une production amateur
    sur l'univers star wars ! ne me demandez pas ce qu'est un younglings, on en reparlera plus tard... Pour l'instant le site est pas top
    mais revenez dans quelques jours... vous serez surpris !
    </p>

    <h2>A qui s'adresse ce site ?</h2>
    <p>
    Aux fan de star wars et de l'univers star wars ! (enfin si vous etes pas spécialement fan vous pouvez venir aussi ! :p) </p>

    </div>

    <!-- Le pied de page -->

    <div id="pied_de_page">
    <p>Copyright "Duel De Younglings©" 2006, tous droits réservés</p>
    </div>


    </body>
    </html>
    </code>






    body
    {
       width: 760px;
       margin-right:auto
       margin-top: 20px;
       margin-bottom: 20px;   
       background-image: url("images/wall.png");
    }

    /* L'en-tête */

    #en_tete
    {
       width: 760px;
       height: 100px;
       background-image: url("images/ban.png");
       background-repeat: no-repeat;
       margin-bottom: 10px;
    }


    /* Le menu */

    #menu
    {
       float: left;
       width: 100px;
    }

    .element_menu
    {
       background-color: black;
       background-image: url("images/menu.png");
       background-repeat: repeat-x;
       
       border: 2px solid red;
       
       margin-bottom: 20px;
    }


    /* Quelques effets sur les menus */


    .element_menu h3
    {   
       color: #B3B3B3;
       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
       text-align: center;
    }

    .element_menu ul
    {
       list-style-image: url("images/puce.gif");
       padding: 0px;
       padding-left: 20px;
       margin: 0px;
       margin-bottom: 5px;
    }

    .element_menu a
    {
       color: yellow;
    }

    .element_menu a:hover
    {
       color: yellow;
       background:red;
    }
    .element_menu a:active
    {
    color:orange;
    }



    /* Le corps de la page */

    #corps
    {
       margin-left: 140px;
       margin-bottom: 20px;
       padding: 5px;
       min-height : 300
       color: white;
       background-color: black;
       background-image: url("images/wall.png");
       background-repeat: repeat-x;
       
       border: 2px solid red;
    }



    #corps h1
    {
       color: yellow;
       text-align: center;
       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
       font-style: strong;
       font-style: underline;
    }

    #corps h2
    {
       height: 30px;

       background-image: url("images/warn.gif");
       background-repeat: no-repeat;
       
       padding-left: 30px;
       color: orange;
       text-align: left;
    }


    /* Le pied de page */

    #pied_de_page
    {
       padding: 5px;

       text-align: center;
       margin-left: 140px;
       margin-top: 20px;

       color: white;
       background-color: black;
       background-image: url("images/menu.png");
       background-repeat: repeat-x;
       
       border: 2px solid red;
    }

    #menu

    {
       float: left;
       width: 100px;
    }

    .droite
    {
       background-color: black;
       background-image: url("images/menu.png");
       background-repeat: repeat-x;
       
       border: 2px solid red;
       
       margin-bottom: 20px;
    }


    /* Quelques effets sur les menus */


    .droite h3
    {   
       color: #B3B3B3;
       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
       text-align: center;
    }

    .droite ul
    {
       list-style-image: url("images/puce.gif");
       padding: 0px;
       padding-left: 20px;
       margin: 0px;
       margin-bottom: 5px;
    }

    .droite a
    {
       color: yellow;
    }

    .droite a:hover
    {
       color: yellow;
       background:red;
    }
    .droite a:active
    {
    color:orange;
    }
    • Partager sur Facebook
    • Partager sur Twitter
    Torajio Bangani
      4 août 2006 à 21:53:55

      Tu as mis un <div id="menu"> à ton menu contact.

      1. On ne peut mettre qu'une seule fois un id par page.
      2. En plus, il est en float:left;...

      Je te conseille de remplacer l'id du menu contact en menu_droit et donc mettre dans ton css un float:right;.

      <div id="menu_droit">
          <div class="droite">
              <h3>Contacts</h3>
              <ul>
                  <li><a href="mail.html">Email</a></li>
          </div>
      </div>


      #menu_droit
      {
         float: right;
         width: 100px;
      }
      • Partager sur Facebook
      • Partager sur Twitter
      NeoLitik

      Mettre un menu a gauche et a droite

      × 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