Probléme pour centrer un menu.

Résolu
yos -  
medoc13 Messages postés 65 Statut Membre -
Bonjour, a tous

je voudrai savoir s'il serai possible de centre le menu déroulant de la page si dessou?
http://radservebeer.free.fr/...
Configuration: Windows XP
Internet Explorer 7.0

14 réponses

  1. biguiz Messages postés 206 Statut Membre 36
     
    Rajoutes des marges automatiques ici :

    #menu {
    position: absolute;
    top: 0;
    left: 0;
    z-index:100;
    width: 100%;
    margin-left:auto;
    margin-right:auto;

    }
    0
  2. xxkirastarothxx Messages postés 415 Statut Membre 40
     
    tu met tout entre balise <center> ton code </center>
    sinon tu definis un margin:auto dans le css, et le tour est joué ;)

    Réponse à ta question: Oui ^^
    0
  3. yos
     
    désolé je suis débutant, je ni arrive pas.
    rien ne change quan j'essai...
    0
  4. biguiz Messages postés 206 Statut Membre 36
     
    J'ai reessayé et effectivement ça ne marche pas, alors que ça devrait...
    Ca doit bien être possible, ça marche sur mes sites en faisant ainsi... Essayes peut etre de rajouter une largeur au menu :
    width: ???px;
    0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. yos
     
    toujour rien...
    ça serai possible d'avoir des exemple de menu que je pourai utilisé?
    0
  7. Yorundr Messages postés 284 Date d'inscription   Statut Membre Dernière intervention   44
     
    Donne ton morceau de code pour voir
    0
  8. petinouv Messages postés 696 Statut Membre 82
     
    Ton menu est en posision:absolute

    dans la ton css, ajoute ça dans #menu :

    width:800px;
    margin-left:-400px;
    left:50%;
    0
  9. biguiz Messages postés 206 Statut Membre 36
     
    Si si finalement ça marche bien chez moi !
    Dans le code css "menu" de la page, effaces et remplaces par ça :

    #menu {
    margin-left:auto;
    margin-right:auto;
    top: 0;
    left: 0;
    z-index:100;
    width: 800px;
    }
    0
  10. yos
     
    le problém est résolu.
    mercie a vous tous.
    0
  11. medoc13 Messages postés 65 Statut Membre 21
     
    bon je sais pas si ça va t'aider mais je te met les css avec une petite modif
    <style type="text/css">
    <!--
    /* CSS issu des tutoriels https://www.alsacreations.com/ */
    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 {
    margin: 0px auto;
    width: 790px;
    height: 20px;
    }
    #menu .ab {
    position: absolute;
    }

    #menu dl {
    float: left;
    width: 12em;
    margin: 0 1px;
    }
    #menu dt {
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    background: #ccc;
    border: 1px solid gray;
    }
    #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;
    height: 100%;
    border: 0 none;
    }
    #menu li a:hover, #menu dt a:hover {
    background: #eee;
    }
    #site {
    margin: 20px auto;
    color: #000;
    background-color: #ddd;
    border: 1px solid gray;
    text-align: center;
    }
    #site a {text-decoration: none;
    color: black;
    color: #222;
    }
    -->
    </style>

    ainsi qu'une partie du html
    <div id="menu">
    <div class="ab">
    <dl>
    <dt onmouseover="javascript:montre();">
    <a href="#" title="Retour à l'accueil">Accueil</a>
    </dt>
    </dl>
    <dl>
    <dt onmouseover="javascript:montre('smenu1');">

    Menu 1
    </dt>
    <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
    <ul>
    <li>
    <a href="#">Sous-Menu 1.1</a></li>
    <li>
    <a href="#">Sous-Menu 1.2</a></li>

    <li>
    <a href="#">Sous-Menu 1.3</a></li>
    <li>
    <a href="#">Sous-Menu 1.4</a></li>
    <li>
    <a href="#">Sous-Menu 1.5</a></li>
    <li>

    <a href="#">Sous-Menu 1.6</a></li>
    </ul>
    </dd>
    </dl>
    <dl>
    <dt onmouseover="javascript:montre('smenu2');">
    Menu 2
    </dt>
    <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">

    <ul>
    <li>
    <a href="#">Sous-Menu 2.1</a></li>
    <li>
    <a href="#">Sous-Menu 2.2</a></li>
    <li>
    <a href="#">Sous-Menu 2.3</a></li>

    <li>
    <a href="#">Sous-Menu 2.4</a></li>
    </ul>
    </dd>
    </dl>
    <dl>
    <dt onmouseover="javascript:montre('smenu3');">
    Menu 3
    </dt>

    <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
    <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>

    <li>
    <a href="#">Sous-Menu 3.4</a></li>
    <li>
    <a href="#">Sous-Menu 3.5</a></li>
    </ul>
    </dd>
    </dl>
    <dl>

    <dt onmouseover="javascript:montre('smenu4');">
    Menu 4
    </dt>
    <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
    <ul>
    <li>
    <a href="#">Sous-Menu 4.1</a></li>
    <li>
    <a href="#">Sous-Menu 4.2</a></li>

    <li>
    <a href="#">Sous-Menu 4.3</a></li>
    </ul>
    </dd>
    </dl>
    </div>
    </div>
    <div id="site">
    <ul>
    <li><a href="../../../index.html">Back</a></li>
    </ul>
    <h1>Menu horizontal déroulant en CSS</h1>
    <p>
    Testé sous (tested under) Internet Explorer, Netscape, Mozilla, Opera et Firebird
    </p>
    <p>
    Il vous suffit d'adapter le code source de cette page à vos besoins.
    </p>
    <p>

    Raphaël GOETTER<br />
    <a href="https://www.alsacreations.com/">Alsacréations</a><br />
    <a href="http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal">Explications / Explanations</a>
    </p>
    </div>
    0
  12. biguiz Messages postés 206 Statut Membre 36
     
    C'est quoi le #menu .ab ?
    0
  13. medoc13 Messages postés 65 Statut Membre 21
     
    c'est la class d'un div que j'ai rajouté; reprend le code que j'ai collé et remplace celui que tu as la partie css, etpourle html met le entre les balise <body> html </body>
    0
  14. medoc13 Messages postés 65 Statut Membre 21
     
    pas de probleme
    0