centrer menu horizontal deroulant

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par thieb03, 28 Juin 2011.

  1. thieb03
    thieb03 Nouveau WRInaute
    Inscrit:
    18 Février 2009
    Messages:
    29
    J'aime reçus:
    0
    Bonjour, je n'arrive pas à centrer un menu horizontal, j'ai fouillé un peu partout, j'ai trouvé des explications et des tuto, mais j'suis trop nul, je n'arrive pas à adapter à ma structure, bref le boulet ! Y aurait-il une âme de bonne volonté sur Webrankinfo.

    Voila ce que j'obtiens sur mon fichier test html : http://www.thieb03linux.fr/indexsauvegarde test.html
    mon css (pléthorique il va falloir que j'élague)
    Code:
    html {
      background-position:  center center;
      background-attachment: fixed;
    }
    body {
      background-position:  center center;
      background-image: url(backgroundxxx.jpg);
      min-width: 1120px;
    }
    div#header {
      background-color: transparent;
      background-position: center bottom;
      background-image: url(backgroundxxx.jpg);
      font-size: 10pt;
      margin-right: auto;
      margin-left: auto;
      width: 100%;
    }
    h1 {
      border:  none;
      background-image: url(backgroundxxx.jpg);
      background-position: left top;
      font-size: 26pt;
      font-weight: bold;
      font-style: italic;
      text-align: center;
      text-decoration: none;
      background-repeat: repeat;
    }
    div#colonne1 {
      border:  none;
      margin: auto;
      overflow: visible;
      background-repeat: repeat;
      background-position: center bottom;
      -moz-border-radius-topleft: 1em;
      -moz-border-radius-bottomright: 1em;
      background-color: #fbfbfb;
      -moz-border-radius-topright: 1em;
      -moz-border-radius-bottomleft: 1em;
      font-size: 10pt;
      float: left;
      visibility: visible;
      clear: left;
      width: 167px;
    }
    div#colonne2 {
      border:  none;
      background-color: #fbfbfb;
      background-repeat: repeat-x;
      background-position: left bottom;
      width: 167px;
      -moz-border-radius-topleft: 1em;
      -moz-border-radius-topright: 1em;
      -moz-border-radius-bottomright: 1em;
      -moz-border-radius-bottomleft: 1em;
      margin-top: 0px;
      margin-left: 0px;
      font-size: 10pt;
      float: right;
      max-height: 1636px;
      min-height: 1005px;
    }
    div#global {
      background-image: url(beige015.gif.png);
      font-size: 11pt;
    }
    div#centre {
      margin-right: 175px;
      margin-left: 175px;
      background-position: right center;
      -moz-border-radius-topright: 1em;
      -moz-border-radius-bottomleft: 1em;
      padding-left: 10px;
      background-image: url(beige015.gif.png);
      font-weight: normal;
      background-repeat: repeat;
      -moz-border-radius-topleft: 1em;
      -moz-border-radius-bottomright: 1em;
      padding-right: 10px;
      font-style: normal;
    }
    table {
      border-collapse: collapse;
      width: 90%;
    }
    th, td {
      border: 1px solid black;
      width: 20%;
    }
    td {
      text-align: center;
    }
    caption {
      font-weight: bold;
    }
    div#footer {
      border-style: none;
      border-color: -moz-use-text-color;
      background-color: transparent;
      background-image: url(backgroundxxx.jpg);
      background-repeat: repeat;
      background-position:  center center;
      speak: normal;
      font-size: 10px;
      margin-right: -11px;
      margin-left: -11px;
      margin-bottom: -38px;
    }
    .pd_menu_01 {
      border: 1px solid #004080;
      padding: 0;
      background: #0000a0 url(backgroundxxx.jpg) repeat scroll center;
      margin-right: 0;
      margin-bottom: 0;
      float: left;
      color: #ffcc00;
      width: 100%;
    }
    .pd_menu_01 a, .pd_menu_01 a:visited {
      font-family: Arial,Helvetica,sans-serif;
      font-style: normal;
      font-weight: bold;
      font-size: 12px;
      color: #ffcc00;
      background-color: #0000a0;
      text-decoration: none;
    }
    .pd_menu_01 ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      color: #ffcc00;
    }
    .pd_menu_01 ul li {
      border-left: 1px solid #004080;
      border-right: 1px solid #004080;
      float: left;
      position: relative;
      z-index: auto ! important;
      color: #ffcc00;
    }
    .pd_menu_01 ul li a {
      padding: 0 10px;
      background: #0000a0 url(purecssmenu-com/images/btn411.jpg) repeat scroll 0% 50%;
      color: #ffcc00;
      float: none ! important;
      display: block;
      height: 35px;
      line-height: 30px;
      text-decoration: none;
    }
    .pd_menu_01 ul li ul {
      border:  none;
      background: #0000a0 none repeat scroll 0% 50%;
      display: none;
      color: #ffcc00;
      width: 1px;
    }
    .pd_menu_01 ul li:hover a {
      background-color: #008000;
      text-decoration: none;
      color: #ffff00;
    }
    .pd_menu_01 ul li:hover ul {
      display: block;
      position: absolute;
      z-index: 999;
      top: 29px;
      margin-top: 1px;
      left: 0;
      color: #ffcc00;
    }
    .pd_menu_01 ul li:hover ul li a {
      border-left: 1px solid #004080;
      border-bottom: 1px solid #004080;
      padding: 0px 10px;
      display: block;
      width: 12em;
      height: 35px;
      line-height: 1.3em;
      margin-left: -1px;
      background-color: #0000ff;
      color: #ffcc00;
    }
    .pd_menu_01 ul li:hover ul li a:hover {
      background-color: #ca0000;
      text-decoration: none;
      color: #ffff00;
    }
    .pd_menu_01 ul li a:hover {
      background-color: #008000;
      text-decoration: none;
      color: #ffff00;
    }
    .pd_menu_01 ul li a:hover ul {
      display: block;
      width: 12em;
      position: absolute;
      z-index: 999;
      top: 29px;
      left: 0;
    }
    .pd_menu_01 ul li ul li a:visited {
      background-color: #0000ff;
      color: #ffffff;
    }
    .pd_menu_01 ul li a:hover ul li a {
      border-left: 1px solid #004080;
      border-bottom: 1px solid #004080;
      padding: 4px 16px;
      display: block;
      width: 12em;
      height: 1px;
      line-height: 1.3em;
      background-color: #0000ff;
      color: #ffffff;
    }
    .pd_menu_01 ul li a:hover ul li a:hover {
      background-color: #ca0000;
      text-decoration: none;
      color: #ffff00;
    }
    
    .pd_menu_01 {
    border: 1px solid #004080;
    padding: 0;
    background: #0000a0 url(backgroundxxx.jpg) repeat scroll center;
    margin-right: 0;
    margin-bottom: 0;
    float: left;
    color: #ffcc00;
    width: 100%;
    }
    .pd_menu_01 a, .pd_menu_01 a:visited {
    font-family: Arial,Helvetica,sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    color: #ffcc00;
    background-color: #0000a0;
    text-decoration: none;
    }
    .pd_menu_01 ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    color: #ffcc00;
    }
    .pd_menu_01 ul li {
    border-left: 1px solid #004080;
    border-right: 1px solid #004080;
    float: left;
    position: relative;
    z-index: auto ! important;
    color: #ffcc00;
    }
    .pd_menu_01 ul li a {
    padding: 0 10px;
    background: #0000a0 url(purecssmenu-com/images/btn411.jpg) repeat scroll
    0% 50%;
    color: #ffcc00;
    float: none ! important;
    display: block;
    height: 35px;
    line-height: 30px;
    text-decoration: none;
    }
    .pd_menu_01 ul li ul {
    border: none;
    background: #0000a0 none repeat scroll 0% 50%;
    display: none;
    color: #ffcc00;
    width: 1px;
    }
    .pd_menu_01 ul li:hover a {
    background-color: #008000;
    text-decoration: none;
    color: #ffff00;
    }
    .pd_menu_01 ul li:hover ul {
    display: block;
    position: absolute;
    z-index: 999;
    top: 29px;
    margin-top: 1px;
    left: 0;
    color: #ffcc00;
    }
    .pd_menu_01 ul li:hover ul li a {
    border-left: 1px solid #004080;
    border-bottom: 1px solid #004080;
    padding: 0px 10px;
    display: block;
    width: 12em;
    height: 35px;
    line-height: 1.3em;
    margin-left: -1px;
    background-color: #0000ff;
    color: #ffcc00;
    }
    .pd_menu_01 ul li:hover ul li a:hover {
    background-color: #ca0000;
    text-decoration: none;
    color: #ffff00;
    }
    .pd_menu_01 ul li a:hover {
    background-color: #008000;
    text-decoration: none;
    color: #ffff00;
    }
    .pd_menu_01 ul li a:hover ul {
    display: block;
    width: 12em;
    position: absolute;
    z-index: 999;
    top: 29px;
    left: 0;
    }
    .pd_menu_01 ul li ul li a:visited {
    background-color: #0000ff;
    color: #ffffff;
    }
    .pd_menu_01 ul li a:hover ul li a {
    border-left: 1px solid #004080;
    border-bottom: 1px solid #004080;
    padding: 4px 16px;
    display: block;
    width: 12em;
    height: 1px;
    line-height: 1.3em;
    background-color: #0000ff;
    color: #ffffff;
    }
    .pd_menu_01 ul li a:hover ul li a:hover {
    background-color: #ca0000;
    text-decoration: none;
    color: #ffff00;
    }
    
    Code:
    et mon html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head>
    
    
    
    
      
      <meta name="msvalidate.01" content="593E9A7CB46136FCC0C31A566F76169C" /><title>thieb 03 mandriva linux</title>
      
    
      
      
      <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    
      
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    
      
      <meta content="thieb03" name="author" />
    
      
      <meta name="description" content="découverte de linux mandriva et de l'open source, aide et tuto,fonds d'ecran,humour ,dernières news et actualite" />
    
      
      <link rel="SHORTCUT ICON" href="favicon.ico" />
    
      
      <meta name="google-site-verification" content="IEXfN06mB98aZhlnsUaJed8Myz_vISaL4M4NZgAaR6k" />
    
      
      <meta name="y_key" content="84d0836c3cd3d52f" />
    
      
      <meta name="alexaVerifyID" content="ONuwC6HLlHxxFdJ2DrFgchVukro" />
    
      
      <meta name="msvalidate.01" content="9A2F68FCE2D95F1555D031495FEDCBC8" />
    
      
      <meta name="alexaVerifyID" content="n4X-QWw-2bC2bGVuH0Tx3e2gJ3w" />
    
      
      <meta name="y_key" content="95fa68a80b76ed91" />
    
      
      <meta name="keywords" content="linux mandriva, open source, wallpapers, fonds d ecran, humour linux, dernières news linux et open source, tutoriels, aide, webmaster, logiciels open source, applications open source, slide show, diaporama, zenphoto, kompozer, libre" />
    
      
      <link rel="alternate" type="application/atom+xml" title="Feed" href="http://page2rss.com/rss/7d68b0f2b1378faafd3bf14bc75cc32d" />
    
      
      
    
      
      <link rel="stylesheet" href="style1.css" type="text/css" /></head><body>
    <?php include_once("analyticstracking.php") ?>
    <script language="JavaScript" type="text/javascript" src="http://webmasters.abondance.com/actu-abondance.php">
      </script>
    <div id="header">
    <div style="text-align: center;"><big style="font-weight: bold;"><br />
    </big> <big style="font-weight: bold;"><br />
    </big>
    <h1 style="color: rgb(255, 204, 0);"><span style="font-style: italic;"><span style="font-weight: bold;"><img style="width: 50px; height: 50px;" alt="" src="28739-mandriva-logo_371f6a85ae43c220b9b4915e929b4b54.png" /><img style="width: 48px; height: 49px;" alt="" src="mandriva-tux_normal.gif" /></span></span>thieb
    03
    mandriva linux actualité<img style="width: 48px; height: 49px;" alt="" src="mandriva-tux_normal.gif" /><img style="width: 50px; height: 50px;" alt="" src="28739-mandriva-logo_371f6a85ae43c220b9b4915e929b4b54.png" /></h1>
    <span style="color: rgb(255, 204, 102);">
    </span><span style="color: rgb(255, 204, 102);">
    <div class="pd_menu_01" align="center">
    <ul>
      <li>
        <div><a href="http://www.thieb03linux.fr/">Accueil et News</a></div>
      </li>
    </ul>
    <ul>
      <li>
        <div><a href="http://www.thieb03linux.fr/aide%20et%20tuto%20thieb%2003.html">Aide
    et Tuto</a></div>
      </li>
    </ul>
    <ul>
      <li>
        <div><a href="http://www.thieb03linux.fr/humour.html">Humour Linux</a></div>
        <ul>
          <li><a href="http://www.thieb03linux.fr/zenphoto/humour%20image/">en
    images</a> 
          
            <br />
    </li>
          <li><a href="http://www.thieb03linux.fr/humoursuite.html">Blagues
    Linux</a> 
        
        <br />
    </li></ul>
      </li>
    </ul>
    <ul>
      <li><a href="http://www.thieb03linux.fr/videoslinux.html">Videos Linux</a>
      </li>
    </ul>
    <ul>
      <li><a href="http://www.thieb03linux.fr/wallpaperslinux.html">Wallpapers
    Linux</a>
        <ul>
          <li><a href="http://www.thieb03linux.fr/zenphoto/%20fonds%20d%20ecran%201024x768%20et%201280x1024/">differentes
    resolutions</a> 
    
            <br />
    </li>
          <li><a href="http://www.thieb03linux.fr/zenphoto/fonds%201920x1200/">1920x1200</a>
      
          <br />
    </li><li><a href="http://www.thieb03linux.fr/zenphoto/linux%20girls/">Linux
    girls</a> 
      
          <br />
    </li><li><a href="http://www.thieb03linux.fr/zenphoto/mandriva%20girls/">Mandriva
    girls</a> 
       
            <br />
    </li>
        </ul>
      </li>
    </ul>
    <ul>
      <li><a href="http://www.thieb03linux.fr/detente.html">Detente apres
    Linux</a> </li>
    </ul>
    <ul>
      <li><a href="http://www.thieb03linux.fr/partenaires.html">Partenaires</a>
      </li>
    </ul>
    </div>
    <div class="c33" id="colonne1">
    <div style="text-align: center;"><span style="color: rgb(255, 204, 102);"><br />
    <img style="width: 55px; height: 55px;" class="c15" alt="" src="thieb03100.jpg" /><br />
    </span></div>
    <div style="text-align: center;" class="c32"><span style="color: rgb(255, 204, 102);"><span style="color: black; font-weight: bold;">Sites amis</span><br />
    <br />
    <a class="c18" href="http://www.fredmoy.fr">Fredmoy</a><a class="c18" href="http://www.fredmoy.fr"><br />
    </a><br class="c19" />
    <a href="http://bestfreewallpapers.net">Bestfreewallpapers.net</a><br />
    <br class="c19" />
    <small><br style="font-weight: bold;" />
    <span style="color: black; font-weight: bold;">OUTILS POUR<br />
    WEBMASTERS</span></small><br style="color: black;" />
    <br />
    <a class="c18" href="http://www.alsacreations.com/">Alsacréations</a><br />
    <br />
    <a class="c21" href="http://www.siteduzero.com/">Le site du
    zero</a><br />
    <br class="c24" />
    <a class="c21" href="https://www.webrankinfo.com/">Webrankinfo</a><br />
    <br class="c24" />
    <a class="c21" href="http://www.rapidsitemap.com/">Rapidesitemap</a><br />
    <br class="c24" />
    <a class="c21" href="http://www.zenphoto.org/">Zenphoto</a><br />
    <br />
    <a class="c26" href="http://audit.abondance.com/">Abondance</a><br />
    <br />
    <a href="http://www.framasoft.net/rubrique2.html" rel="tag">framasoft</a><br />
    <br class="c27" />
    <a class="c26" href="http://cooltext.com/">Cooltext</a><br />
    <br class="c27" />
    <a class="c26" href="http://www.rankspirit.com/indexfr.php">rankspirit</a><br />
    <br class="c27" />
    <a class="c26" href="https://www.google.fr/ads/" rel="tag">Google
    Adsense</a><br />
    <br class="c27" />
    <a class="c26" href="http://www.w3.org/">W3C</a><br />
    <br class="c27" />
    <a href="http://users.skynet.be/mgueury/mozilla/" rel="tag">HTML
    validator</a><br />
    <br class="c28" />
    </span>
    <h3 style="color: black;"><small>sites linux à
    consulter</small><br />
    </h3>
    <a class="c26" href="http://www.pcinpact.com/s/linux.htm">PC
    Impact</a><br />
    <br class="c27" />
    <a class="c26" href="http://www.mandrivalinux-online.org/">MLO</a><br />
    <br class="c27" />
    <a class="c26" href="http://wiki.mandriva.com/fr/">wiki
    Mandriva</a><br />
    <br class="c27" />
    <a class="c26" href="http://www.lea-linux.org/" rel="tag">Lea
    linux</a><br />
    <br class="c27" />
    <a href="http://www2.mandriva.com/fr/" rel="tag">Mandriva</a><br />
    <br />
    <a href="http://blog.mageia.org/fr/" rel="tag">Blog de
    Mageia</a><br />
    <br />
    <a href="http://mageia.org/fr/" rel="tag">Mageia</a><br />
    <br />
    <br />
    <span style="color: black; font-weight: bold;">Autres sites
    intéressants</span><br style="color: black; font-weight: bold;" />
    <br />
    <a href="http://www.agoravox.fr/?auteur64414" onclick="window.open(this.href);return false;"><img style="border: 0px solid ; width: 85px; height: 24px;" alt="" src="http://www.agoravox.fr/squelettes/images/icone_redacteur3.gif" /></a><br />
    <br />
    </div>
    </div>
    <div id="colonne2">
    <div class="c14"><br style="color: black;" />
    <div style="text-align: center;">
    <span style="color: black;">traduction du site</span><br />
    <script language="JavaScript" src="http://www.traducteurenligne.net/traducteurgr/flags.js" type="text/javascript">
    </script></div>
    </div>
    <div class="c14">
    <div style="text-align: left;" class="c14">
    <script type="text/javascript" src="http://geoloc15.geovisite.com/private/geoclock.js?compte=880350782146">
    </script><noscript><a href="http://www.geovisite.com/fr/directory/informatique_logiciels.php" target="_blank"><img alt="logiciels" src="http://geoloc15.geovisite.com/private/geoclock.php?compte=880350782146" border="0" /></a></noscript></div>
    <noscript>Please do not change this code for a perfect
    fonctionality of y</noscript></div>
    <div style="text-align: center;" class="c14"><a class="c35" href="http://www.cloudink.net/annuaire-logiciel.htm" title="Annuaire Logiciel sur cloudink">Annuaire Logiciel</a></div>
    <div class="c14">
    <div style="text-align: center;"><br />
    <br />
    <br />
    <a href="http://www.waaaouh.com/annuaire/">Annuaire de qualité :
    Waaaouh !</a><br />
    <br />
    <!-- Begin ShinyStat code -->
    <script type="text/javascript" src="http://codice.shinystat.com/cgi-bin/getcod.cgi?USER=thieb03">
    
    </script><noscript><a href="http://www.shinystat.com/fr" target="_top"><img alt="classements sites" src="http://www.shinystat.com/cgi-bin/shinystat.cgi?USER=thieb03" border="0" /></a></noscript><br />
    <!-- End ShinyStat code --><br />
    <a href="http://www.waaaouh.com/annuaire/fonds-d-ecran-et-goodies-c108-p1.html">
    Waaaouh.com : Fonds d'écran et Goodies</a><br />
    <br />
    </div>
    <div style="text-align: center;">
    <script src="http://page2rss.com/button.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    page2rss_drawButton("http:\/\/page2rss.com\/rss\/7d68b0f2b1378faafd3bf14bc75cc32d",1,"actualit\u00e9 de thieb 03 mandriva linux");//
    </script><noscript>RSS feed generated by <a href="http://page2rss.com/">Page2RSS</a></noscript>
    <a href="http://www.supportduweb.com/topsite_vote-815.html"><img style="border: 0px solid ; width: 58px; height: 20px;" src="http://www.supportduweb.com/images/topsite/votez03.gif" alt="Votez pour ce site" /></a></div>
    </div>
    </div>
    <div class="c50" id="centre">
    <div class="c14"><br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <div style="text-align: center;">
    <form action="https://www.google.fr/cse" id="cse-search-box" name="cse-search-box">
      <div><input name="cx" value="partner-pub-8174452465061303:rqp7mvc4s8i" type="hidden" /><input name="ie" value="UTF-8" type="hidden" /> <input name="q" size="31" type="text" /> <input name="sa" value="Rechercher" type="submit" /></div>
    </form>
    <script type="text/javascript" src="https://www.google.fr/cse/brand?form=cse-search-box&amp;lang=fr">
    </script></div>
    <div class="c14">
    <div style="text-align: center;">
    <script type="text/javascript">
    //<![CDATA[
    <!--
             google_ad_client = "pub-8174452465061303";
             /* 468x60, date de création 11/09/10 */
             google_ad_slot = "4762752399";
             google_ad_width = 468;
             google_ad_height = 60;
             //-->
    //]]>
    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script><br />
    </div>
    <br />
    <br />
    <div style="text-align: center; color: black;">
    <h2><span class="c30">Bienvenue à tout ceux qui souhaitent
    découvrir Linux et l'Open source</span></h2>
    </div>
    <span class="c30"><br />
    </span>
    <div style="text-align: center;"><!-- AddThis Button BEGIN --><a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;username=thieb03"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" alt="Bookmark and Share" class="c38" height="16" width="80" /></a>
    <script type="text/javascript">
    //<![CDATA[
    var addthis_config = {"data_track_clickback":true};
    //]]>
    </script>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=thieb03">
    </script><!-- AddThis Button END --></div>
    <?php $cat[] = "accueil et news thieb 03"; $cat[] ="thieb03 pages html";
    include 'news/index.php';
    ?>.
    <div id="footer">
    &nbsp;<a href="http://www.xiti.com/xiti.asp?s=483534%0A%20" title="WebAnalytics" target="_top"><br />
    </a>
    <div style="text-align: center;" align="justify"><span style="color: rgb(255, 204, 0);">&nbsp;©2009 - Thieb03 - Contact
    -&nbsp;</span><a style="color: rgb(255, 204, 0);" href="formulaire.html"><img style="border: 0px solid ; width: 32px; height: 32px;" alt="contact thieb 03" src="mail_021.gif" /></a> <span style="color: rgb(255, 204, 0);">- Créé avec :</span> <a style="color: rgb(255, 204, 0);" href="http://www.kompozer.net/"><img style="border: 0px solid ; width: 80px; height: 15px;" alt="Document made with KompoZer" src="kompozer_80x15.png" /></a></div>
    </div>
    </div>
    </div>
    <br />
    <br />
    </div>
    </span></div>
    </div>
    
    </body></html>
    Le site publié sur le web n'utilise pas ce type de menu, mais un menu flash qui ne me convient pas car le menu déborde sur la droite sur des petites résolutions à cette adresse http://www.thieb03linux.fr.
    help me please.
     
  2. smorge
    smorge WRInaute occasionnel
    Inscrit:
    17 Juin 2009
    Messages:
    442
    J'aime reçus:
    0
    Salut,

    j'ai pas le temps de regarder ton code en détail mais vite fait tu devrais peut-être essayer de virer le float : left et d'essayer avec un text-align : center ou un margin : auto ?
    Code:
    .pd_menu_01 {
      border: 1px solid #004080;
      padding: 0;
      background: #0000a0 url(backgroundxxx.jpg) repeat scroll center;
      margin-right: 0;
      margin-bottom: 0;
      float: left;
      color: #ffcc00;
      width: 100%;
    }
    
     
  3. thieb03
    thieb03 Nouveau WRInaute
    Inscrit:
    18 Février 2009
    Messages:
    29
    J'aime reçus:
    0
    J'ai réussi à modifier le css grâce à une ame charitable, Spitfire95, grace à lui c'est mieux, mais maintenant je me retrouve avec le contenu du div#centre "centré" alors que je voudrais qu'il soit sur la gauche
    css
    Code:
    html {
      background-position:  center center;
      background-attachment: fixed;
    }
    body {
      background-position:  center center;
      background-image: url(backgroundxxx.jpg);
      min-width: 1120px;
    }
    div#header {
      background-color: transparent;
      background-position: center bottom;
      background-image: url(backgroundxxx.jpg);
      font-size: 10pt;
      margin-right: auto;
      margin-left: auto;
      width: 100%;
    }
    h1 {
      border:  none;
      background-image: url(backgroundxxx.jpg);
      background-position: left top;
      font-size: 26pt;
      font-weight: bold;
      font-style: italic;
      text-align: center;
      text-decoration: none;
      background-repeat: repeat;
    }
    div#colonne1 {
      border:  none;
      margin: auto;
      overflow: visible;
      background-repeat: repeat;
      background-position: center bottom;
      -moz-border-radius-topleft: 1em;
      -moz-border-radius-bottomright: 1em;
      background-color: #fbfbfb;
      -moz-border-radius-topright: 1em;
      -moz-border-radius-bottomleft: 1em;
      font-size: 10pt;
      float: left;
      visibility: visible;
      clear: left;
      width: 167px;
    }
    div#colonne2 {
      border:  none;
      background-color: #fbfbfb;
      background-repeat: repeat-x;
      background-position: left bottom;
      width: 167px;
      -moz-border-radius-topleft: 1em;
      -moz-border-radius-topright: 1em;
      -moz-border-radius-bottomright: 1em;
      -moz-border-radius-bottomleft: 1em;
      margin-top: 0px;
      margin-left: 0px;
      font-size: 10pt;
      float: right;
      max-height: 1636px;
      min-height: 1005px;
    }
    div#global {
      background-image: url(beige015.gif.png);
      font-size: 11pt;
    }
    div#centre {
      margin-right: 175px;
      margin-left: 175px;
      background-position: right center;
      -moz-border-radius-topright: 1em;
      -moz-border-radius-bottomleft: 1em;
      padding-left: 10px;
      background-image: url(beige015.gif.png);
      font-weight: normal;
      background-repeat: repeat;
      -moz-border-radius-topleft: 1em;
      -moz-border-radius-bottomright: 1em;
      padding-right: 10px;
      font-style: normal;
      margin-top: 35px;
    }
    table {
      border-collapse: collapse;
      width: 90%;
    }
    th, td {
      border: 1px solid black;
      width: 20%;
    }
    td {
      text-align: center;
    }
    caption {
      font-weight: bold;
    }
    div#footer {
      border-style: none;
      border-color: -moz-use-text-color;
      background-color: transparent;
      background-image: url(backgroundxxx.jpg);
      background-repeat: repeat;
      background-position:  center center;
      speak: normal;
      font-size: 10px;
      margin-right: -11px;
      margin-left: -11px;
      margin-bottom: -38px;
    }
    .pd_menu_01 {
      border: 1px solid #004080;
      margin: 0 auto;
      padding: 0;
      background: #0000a0 url(backgroundxxx.jpg) repeat scroll center;
      color: #ffcc00;
      width: 1029px;
    }
    .pd_menu_01 a, .pd_menu_01 a:visited {
      font-family: Arial,Helvetica,sans-serif;
      font-style: normal;
      font-variant: normal;
      font-weight: bold;
      font-size: 12px;
      line-height: normal;
      font-size-adjust: none;
      font-stretch: normal;
      color: #ffcc00;
      background-color: #0000a0;
      text-decoration: none;
    }
    .pd_menu_01 ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      color: #ffcc00;
    }
    .pd_menu_01 ul li {
      border-left: 1px solid #004080;
      border-right: 1px solid #004080;
      float: left;
      position: relative;
      z-index: 1;
      color: #ffcc00;
      width: 145px;
    }
    .pd_menu_01 ul li a {
      padding: 0 10px;
      background: #0000a0 url(purecssmenu-com/images/btn411.jpg) repeat scroll 0% 50%;
      color: #ffcc00;
      display: block;
      height: 35px;
      line-height: 30px;
      text-decoration: none;
      width: 135px;
    }
    .pd_menu_01 ul li ul {
      border:  none;
      background: #0000a0 none repeat scroll 0% 50%;
      display: none;
      color: #ffcc00;
    }
    .pd_menu_01 ul li:hover a {
      background-color: #008000;
      text-decoration: none;
      color: #ffff00;
    }
    .pd_menu_01 ul li:hover ul {
      display: block;
      position: absolute;
      z-index: 999;
      top: 29px;
      margin-top: 1px;
      left: 0;
      color: #ffcc00;
    }
    .pd_menu_01 ul li:hover ul li a {
      border-left: 1px solid #004080;
      border-bottom: 1px solid #004080;
      padding: 0 10px;
      display: block;
      width: 12em;
      height: 35px;
      line-height: 35px;
      margin-left: -1px;
      background-color: #0000ff;
      color: #ffcc00;
    }
    .pd_menu_01 ul li:hover ul li a:hover {
      background-color: #ca0000;
      text-decoration: none;
      color: #ffff00;
    }
    .pd_menu_01 ul li a:hover {
      background-color: #008000;
      text-decoration: none;
      color: #ffff00;
    }
    .pd_menu_01 ul li a:hover ul {
      display: block;
      width: 12em;
      position: absolute;
      z-index: 999;
      top: 29px;
      left: 0;
    }
    .pd_menu_01 ul li ul li a:visited {
      background-color: #0000ff;
      color: #ffffff;
    }
    .pd_menu_01 ul li a:hover ul li a {
      border-left: 1px solid #004080;
      border-bottom: 1px solid #004080;
      padding: 4px 16px;
      display: block;
      width: 12em;
      height: 1px;
      line-height: 1.3em;
      background-color: #0000ff;
      color: #ffffff;
    }
    .pd_menu_01 ul li a:hover ul li a:hover {
      background-color: #ca0000;
      text-decoration: none;
      color: #ffff00;
    }
    Je me demande si tout le css est vraiment nécessaire, enfin !
    Si une autre âme charitable voulait bien donner quelques explications à un nul comme moi elle serait la bien venue, d'avance merci.
     
  4. thieb03
    thieb03 Nouveau WRInaute
    Inscrit:
    18 Février 2009
    Messages:
    29
    J'aime reçus:
    0
    Ok c'est bon avec un peu d'aide j'ai réussi à obtenir ce que je voulais, j'ai adapté le menu horizontal sur mon site http://www.thieb03linux.fr/ le post est a marquer comme résolu merci.
     
Chargement...
Similar Threads - centrer menu horizontal Forum Date
Balise Canonical pour "concentrer le jus" SEO? Problèmes de référencement spécifiques à vos sites 18 Juin 2015
Centrer image thème naturespace Développement d'un site Web ou d'une appli mobile 19 Mars 2015
Centrer une image en height Développement d'un site Web ou d'une appli mobile 27 Février 2015
Centrer mon site Demandes d'avis et de conseils sur vos sites 26 Novembre 2014
peut on oublier google et se concentrer sur bing et yahoo? Débuter en référencement 7 Février 2013
Centrer une image horizontalement sur un div Développement d'un site Web ou d'une appli mobile 25 Septembre 2012
Centrer verticalement un texte (CSS) Développement d'un site Web ou d'une appli mobile 16 Février 2012
[css] Comment centrer un bloc css? Développement d'un site Web ou d'une appli mobile 25 Août 2010
[RESOLU] jQuery : centrer par rapport à la taille du navigateur Développement d'un site Web ou d'une appli mobile 25 Août 2010
Menu qui disparait en version mobile Développement d'un site Web ou d'une appli mobile 9 Octobre 2020