Comment centrer mon menu avec Kompozer

Bonjour,

Je fais un site avec Kompozer mais j'ai un petit soucis je n'arrive pas à centrer mon menu comment puis je faire

Merci pour votre aide



--

6 réponses

  1. <style type="text/css" media="screen"> body {
    margin: 0 auto;
    padding: 0;
    background: yellow none repeat scroll 0% 50%;
    font-family: verdana,arial,sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 80%;
    line-height: normal;
    font-size-adjust: none;
    font-stretch: normal;
    text-align: center;
    width: 1000px;
    }
    dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }<meta name="description" content="Ecole "><meta name="keywords" content="venez decouvrir le travail de vos enfants, les activites, sortie...."><meta #menu {
    position: relative;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    margin-right:0 auto;
    margin-left: 0 auto;
    }
    #menu dl {
    float: left;
    width: 12em;
    }
    #menu dt {
    border: 3px solid blue;
    margin: 1px;oh !! le bon gâteau qu'a fait maman
    background: #ffffff none repeat scroll 0% 50%;
    cursor: pointer;
    text-align: center;
    }
    #menu dd {
    border: 1px solid blue;
    display: none;
    }
    #menu li {
    background: #ffffff none repeat scroll 0% 50%;
    text-align: center;
    }
    #menu li a, #menu dt a {
    border: none;
    color: #3333FF;
    text-decoration: none;
    display: block;
    height: 100%;
    }
    #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
    background: #eeeeee none repeat scroll 0% 50%;
    }
    #site {
    border: 1px solid yellow;
    padding: 5px;
    position: absolute;
    z-index: 1;
    top: 70px;
    left: 10px;<meta name="description" content="Ecole "><meta name="keywords" content="venez decouvrir le travail de vos enfants, les activites, sortie...."><meta color: #000000;
    background-color: #dddddd;
    }
    p {
    font-size: 1.3em;
    }
    h1 {
    font-family: Times new roman;
    font-size: 2.4em;
    1. Bonjour avec un peu de html ca aurait été un peu plus facile , mais j'ai essayé de me l'imaginer

      si c'est pas bon se que je dit, donné moi aussi un partie du html

      je suppose que menu est dans une balise <div></div>

      une balise de ce type fait 100% du bloc qui la contient

      je vois que votre body fait 1000px et est centré. Curieux d'avoir réduit body et ne pas avoir mi plutôt un bloc conteneur ...enfin chacun ça façon de coder.

      je vois une largeur pour les dl à l'intérieur du menu de 12 em.

      essayé ceci pour voir

      #menu{
      border: 2px solid red;
      }
      


      si le cadre fait toute la largeur de la page, vous le réduisez en réduisant les pixel de width

      #menu{
      border: 2px solid red;
      width: 700px;   /*là j'ai mi sa au hazard */
      marin: auto;
      }
      

      le but est qu'il soit le moins large possible et que la position bien entendu des élément intérieur de change pas. Ensuite une fois au minimum avec le margin: auto; il sera centré

      si c'est pas ça donnez moi du html que je voie un peu
      1. bonsoir,

        déjà il y a du html dans ton css (balise meta) ensuite il y a certaines déclarations qui ne sont pas fermées ensuite je ne pense pas que oh !! le bon gâteau qu'a fait maman soit une valeur css...

        bref

        je te conseille de démarrer ici:

        http://css.mammouthland.net
        1. mouhahaha j'avais même pas vu...
      2. Bonjour

        Je vous remercie mais çà ne fonctionne pas mon menu reste bloquer à gauche
        1. ben tu nous le donne ton html avec ton css ?
      3. <html>
        <head>
        <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
        <meta name="google-site-verification"
        content="XX50xEAhSDAZ0utk8thZADqBKb2YiS4p9B__R4075ls">
        <title>Accueil</title>
        <meta
        content="venez decouvrir le travail de vos enfants, les activites les sorties, fetes sorties..."
        name="author">
        <style type="text/css" media="screen">
        body {
        margin: 0 auto;
        padding: 0;
        background: yellow none repeat scroll 0% 50%;
        font-family: verdana,arial,sans-serif;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        font-size: 80%;
        line-height: normal;
        font-size-adjust: none;
        font-stretch: normal;
        text-align: center;
        width: 1000px;
        }
        dl, dt, dd, ul, li {
        margin: 0;
        padding: 0;
        list-style-type: none;
        }<meta name="description" content="Ecole "><meta name="keywords" content="venez decouvrir le travail de vos enfants, les activites, sortie...."><meta #menu {
        position: relative;
        top: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        }
        #menu dl {
        float: left;
        width: 12em;
        }
        #menu dt {
        border: 3px solid blue;
        margin: 1px;oh !! le bon gâteau qu'a fait maman
        background: #ffffff none repeat scroll 0% 50%;
        cursor: pointer;
        text-align: center;
        }
        #menu dd {
        border: 1px solid blue;
        display: none;
        }
        #menu li {
        background: #ffffff none repeat scroll 0% 50%;
        text-align: center;
        }
        #menu li a, #menu dt a {
        border: none;
        color: #000099;
        text-decoration: none;
        display: block;
        height: 100%;
        }
        #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
        background: #eeeeee none repeat scroll 0% 50%;
        }
        #site {
        border: 1px solid yellow;
        padding: 5px;
        position: absolute;
        z-index: 1;
        top: 70px;
        left: 10px;<meta name="description" content="Ecole "><meta name="keywords" content="venez decouvrir le travail de vos enfants, les activites, sortie...."><meta color: #000000;
        background-color: #dddddd;
        }
        p {
        font-size: 1.3em;
        }
        h1 {
        font-family: Times new roman;
        font-size: 2.4em;
        }
        </style>
        </head>
        <body
        style="height: 58px; color: rgb(0, 0, 102); background-color: white; background-image: url(misc274.gif);"
        alink="#000099" link="#000099" vlink="#000099">
        <div style="text-align: left;"><br>
        </div>
        <div style="text-align: center;">
        <h1><img style="width: 130px; height: 115px;" alt="alyscamps"
        src="alyscamps.jpg"> <small><span
        style="font-family: Comic Sans MS;">BIENVENUE
        SUR NOTRE SITE</span></small> <img
        style="width: 143px; height: 111px;" alt="alyscamps"
        src="alyscamps.jpg">
        <script type="text/javascript"><!--
        window.onload=show;
        function show(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></h1>
        </div>
        <div
        style="margin-right: auto; margin-left: auto; position: relative; width: 839px;"
        id="menu">
        <dl style="font-weight: bold;">
        <dt style="margin-left: 0px; width: 152px; height: 23px;"
        onmouseover="javascript:show('smenu1');">PRESENTATION</dt>
        <dd id="smenu1" onmouseover="javascript:show('smenu1');"
        onmouseout="javascript:show('');">
        <ul>
        <li><a href="ecole.html">Ecole</a><br>
        </li>
        <li><a href="la%20cantine.html">La
        cantine </a><br>
        </li>
        <li><a href="le%20reglement.html">Le
        reglement </a><br>
        </li>
        <li><a href="les%20vacances.html">Les vacances </a><br>
        </li>
        <li><a href="LES%20PHOTOS.html">Photos</a><br>
        </li>
        <li><a href="liens.html">Liens</a><br>
        </li>
        </ul>
        <br>
        </dd>
        </dl>
        <dl>
        <dt style="width: 146px; height: 23px;"
        onmouseover="javascript:show('smenu2');"> <span
        style="font-weight: bold;">CLASSE PETITS</span></dt>
        <dd id="smenu2" onmouseover="javascript:show('smenu2');"
        onmouseout="javascript:show('');">
        <ul>
        <li><a href="la%20classe.html"> La classe</a><br>
        </li>
        <li><a href="comptines%20des%20petits.html">Lescomptines </a><br>
        </li>
        <li><a href="travail%20des%20petits.html">Le travail</a><br>
        </li>
        <li><a href="motricite%20des%20petits.html">La motricité </a><br>
        </li>
        <li><a href="danse%20des%20petits.html">La danse</a><br>
        </li>
        </ul>
        <br>
        </dd>
        </dl>
        <dl>
        <dt style="margin-left: 0px; width: 148px; height: 23px;"
        onmouseover="javascript:show('smenu3');"><a href="la%20motricite.html"><span
        style="font-weight: bold;">CLASSE MOYENS</span> </a></dt>
        <dd id="smenu3" onmouseover="javascript:show('smenu3');"
        onmouseout="javascript:show('');">
        <ul>
        <li><a href="Classe.html">La classe</a><br>
        </li>
        <li><a href="les%20comptines.html">Les
        comptines</a><br>
        </li>
        <li><a href="travail.html">Le
        travail</a><br>
        </li>
        <li><a href="la%20motricite.html">La
        motricité</a><br>
        </li>
        <li><a href="les%20danses.html">La
        danse</a><br>
        </li>
        </ul>
        <br>
        </dd>
        </dl>
        <dl style="font-weight: bold;">
        <dt
        style="margin-left: 0px; width: 147px; margin-top: 1px; height: 24px;"
        onmouseover="javascript:show('smenu4');"><a href="classe" des=""
        grands.html="">CLASSE GRANDS</a></dt>
        <dd id="smenu4" onmouseover="javascript:show('smenu4');"
        onmouseout="javascript:show('');">
        <ul>
        <li><a href="classe.html">la Classe</a><br>
        </li>
        <li><a href="Travail.html">Notre travail</a><br>
        </li>
        <li><a href="comptines.html">Les Comptines </a><br>
        </li>
        <li><a href="Motricit%E9.html">La Motricité</a><br>
        </li>
        <li><a href="Danse.html">La Danse</a><br>
        </li>
        </ul>
        <br>
        </dd>
        </dl>
        <dl>
        <dt
        style="margin-left: 0px; width: 148px; height: 23px; font-weight: bold;"
        onmouseover="javascript:show('smenu5');"> <a href="Activit%E9s.html">ACTIVITES</a></dt>
        <dd id="smenu5" onmouseover="javascript:show('smenu5');"
        onmouseout="javascript:show('');">
        <ul>
        <li><a href="Coin%20cuisine.html">Coin Cuisine</a><br>
        </li>
        <li><a href="March%E9+no%EBl.html">Marché de Noël</a><br>
        </li>
        <li><a href="Chandeleur.html">La Chandeleur </a><br>
        </li>
        <li><a href="Les%20Rois.html">Les Rois</a><br>
        </li>
        <li><a href="Carnaval.html">Le Carnaval</a><br>
        </li>
        </ul>
        <br>
        </dd>
        </dl>
        <dl>
        </dl>
        </div>
        <div style="">
        <p><small><big><big><small><big><big><br>
        </big></big></small></big></big></small></p>
        <p> </p>
        <p><small><big><big><small><big><big><br>