Background caché!!!

Résolu/Fermé
miram - 12 déc. 2011 à 17:23
 miram - 13 déc. 2011 à 07:32
Bonjour,
S.V.P Regarder ce programme:
<div class="mmenu" onMouseOut="startClose()" onMouseOver="stopClose()" onselectstart="return _f" id="menu0" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(0, 77, 149); border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: rgb(0, 77, 149); border-top-width: 2px; border-top-style: solid; border-top-color: rgb(0, 77, 149); position: absolute; top: 140px; left: 397px; z-index: 999; visibility: visible; background-position: initial initial; background-repeat: initial initial; "><a id="mmlink0" href="http://www.carmeuse.be/page.asp?id=25#" onClick="return clickAction(this._itemRef)" onMouseOut="_mot=setTimeout('_mOUt(this._itemRef)',99)" onMouseOver="return changeStatus(this._itemRef)" style="background:transparent;text-decoration:none;height:1px;width:1px;overflow:hidden;position:absolute;"></a><table border="0" cellpadding="0" cellspacing="0" id="tbl0"><tbody><tr><td nowrap="" tabindex="0" id="el0" onMouseOver="_popi(0)" style="background:#004d95;padding:2px"><a onMouseOver="this.blur()" href="http://www.carmeuse.be/page.asp?langue=FR&id=25" id="lnk0" style="color:#FFFFFF;font-Family:Arial;font-Weight:normal;font-Style:normal;font-Size:11px;text-Decoration:none;;"> Notre société </a></td><td style="width:1px;;background:white"><table border="0" cellpadding="0" cellspacing="0" width="1"><tbody><tr><td></td></tr></tbody></table></td><td nowrap="" tabindex="1" id="el1" onMouseOver="_popi(1)" style="background:#004d95;padding:2px"><a onMouseOver="this.blur()" href="http://www.carmeuse.be/page.asp?langue=FR&id=49" id="lnk1" style="color:#FFFFFF;font-Family:Arial;font-Weight:normal;font-Style:normal;font-Size:11px;text-Decoration:none;;"> Implantations </a></td><td style="width:1px;;background:white"><table border="0" cellpadding="0" cellspacing="0" width="1"><tbody><tr><td></td></tr></tbody></table></td><td nowrap="" tabindex="2" id="el2" onMouseOver="_popi(2)" style="background:#004d95;padding:2px"><a onMouseOver="this.blur()" href="http://www.carmeuse.be/page.asp?langue=FR&id=164" id="lnk2" style="color:#FFFFFF;font-Family:Arial;font-Weight:normal;font-Style:normal;font-Size:11px;text-Decoration:none;;"> Applications </a></td><td style="width:1px;;background:white"><table border="0" cellpadding="0" cellspacing="0" width="1"><tbody><tr><td></td></tr></tbody></table></td><td nowrap="" tabindex="3" id="el3" onMouseOver="_popi(3)" style="background:#004d95;padding:2px"><a onMouseOver="this.blur()" href="http://www.carmeuse.be/page.asp?langue=FR&id=146" id="lnk3" style="color:#FFFFFF;font-Family:Arial;font-Weight:normal;font-Style:normal;font-Size:11px;text-Decoration:none;;"> Produits </a></td><td style="width:1px;;background:white"><table border="0" cellpadding="0" cellspacing="0" width="1"><tbody><tr><td></td></tr></tbody></table></td><td nowrap="" tabindex="4" id="el4" onMouseOver="_popi(4)" style="background:#004d95;padding:2px"><a onMouseOver="this.blur()" href="http://www.carmeuse.be/page.asp?langue=FR&id=139" id="lnk4" style="color:#FFFFFF;font-Family:Arial;font-Weight:normal;font-Style:normal;font-Size:11px;text-Decoration:none;;"> Procédé </a></td><td style="width:1px;;background:white"><table border="0" cellpadding="0" cellspacing="0" width="1"><tbody><tr><td></td></tr></tbody></table></td><td nowrap="" tabindex="5" id="el5" onMouseOver="_popi(5)" style="background:#004d95;padding:2px"><a onMouseOver="this.blur()" href="http://www.carmeuse.be/page.asp?langue=FR&id=192" id="lnk5" style="color:#FFFFFF;font-Family:Arial;font-Weight:normal;font-Style:normal;font-Size:11px;text-Decoration:none;;"> F.A.Q. </a></td><td style="width:1px;;background:white"><table border="0" cellpadding="0" cellspacing="0" width="1"><tbody><tr><td></td></tr></tbody></table></td><td nowrap="" tabindex="6" id="el6" onMouseOver="_popi(6)" style="background:#004d95;padding:2px"><a onMouseOver="this.blur()" href="http://www.carmeuse.be/page.asp?langue=FR&id=130" id="lnk6" style="color:#FFFFFF;font-Family:Arial;font-Weight:normal;font-Style:normal;font-Size:11px;text-Decoration:none;;"> Evénements </a></td></tr></tbody></table></div>

je l'ai copié, mais dans ma page, il ne me met pas le background foncé de l'arrière plan du menu? ou est l'erreur??? aussi y'a les sous menus, ils sont mentionnées ou dans ce programme??
merci pour votre aide
A voir également:

3 réponses

bissdebrazza Messages postés 2065 Date d'inscription vendredi 29 juin 2007 Statut Contributeur Dernière intervention 7 décembre 2017 712
12 déc. 2011 à 17:30
Bonjour!
ton code est illisible car pas indenté.

Cordialement
0
comment ça "pas indenté."
0
bissdebrazza Messages postés 2065 Date d'inscription vendredi 29 juin 2007 Statut Contributeur Dernière intervention 7 décembre 2017 712
12 déc. 2011 à 17:40
exemple de code identé:

si 1+1=2

   alors 
           affiche vrai
  sinon
            affiche faux
fin si


0
ah d'accord, mais je ne peux rien y faire, mon boss m'oblige de faire ce menu
alors,...
pas d'aide de votre part???
0
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
12 déc. 2011 à 18:28
mon boss m'oblige de faire ce menu !

il est patron en quoi ??? charcuterie ??

parce que imposer ce menu qui est ridicule , obsolète, mal code , et ou soit dit en passant il te manque le js externe pour fonctionner , c est du grand n importe quoi !!!

mais je ne peux rien y faire,

et si tu peu y faire !!!

que le code soit pourris ne l empeche pas d etre indente !

ce qui ne le rend pas plus propre , mais plus lisible !! ( enfin la ca vas pas etre tres clair non plus , mais la c est vraiment due a la mediocrite du code ! ;-))


<div class="mmenu" onMouseOut="startClose()" onMouseOver="stopClose()" onselectstart="return _f" id="menu0" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(0, 77, 149); border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: rgb(0, 77, 149); border-top-width: 2px; border-top-style: solid; border-top-color: rgb(0, 77, 149); position: absolute; top: 140px; left: 397px; z-index: 999; visibility: visible; background-position: initial initial; background-repeat: initial initial; ">
      <a id="mmlink0" href="http://www.carmeuse.eu/fr" onClick="return clickAction(this._itemRef)" onMouseOut="_mot=setTimeout('_mOUt(this._itemRef)',99)" onMouseOver="return changeStatus(this._itemRef)" style="background:transparent;text-decoration:none;height:1px;width:1px;overflow:hidden;position:absolute;"></a>
      <table border="0" cellpadding="0" cellspacing="0" id="tbl0">
        <tbody>
          <tr>
            <td nowrap="" tabindex="0" id="el0" onMouseOver="_popi(0)" style="background:#004d95;padding:2px">
              <a onMouseOver="this.blur()" href="http://www.carmeuse.eu/fr" id="lnk0" style="color:#FFFFFF;font-Family:Arial;font-Weight:normal;font-Style:normal;font-Size:11px;text-Decoration:none;;"> Notre société </a></td>
            <td style="width:1px;;background:white">
              <table border="0" cellpadding="0" cellspacing="0" width="1">
                <tbody>
                  <tr><td></td>
                  </tr>
                </tbody>
              </table></td>
            <td nowrap="" tabindex="1" id="el1" onMouseOver="_popi(1)" style="background:#004d95;padding:2px">
              <a onMouseOver="this.blur()" href="http://www.carmeuse.eu/fr" id="lnk1" style="color:#FFFFFF;font-Family:Arial;font-Weight:normal;font-Style:normal;font-Size:11px;text-Decoration:none;;"> Implantations </a></td>
            <td style="width:1px;;background:white">
              <table border="0" cellpadding="0" cellspacing="0" width="1">
                <tbody>
                  <tr><td></td>
                  </tr>
                </tbody>
              </table></td>
            <td nowrap="" tabindex="2" id="el2" onMouseOver="_popi(2)" style="background:#004d95;padding:2px">
              <a onMouseOver="this.blur()" href="http://www.carmeuse.eu/fr" id="lnk2" style="color:#FFFFFF;font-Family:Arial;font-Weight:normal;font-Style:normal;font-Size:11px;text-Decoration:none;;"> Applications </a></td>
            <td style="width:1px;;background:white">
              <table border="0" cellpadding="0" cellspacing="0" width="1">
                <tbody>
                  <tr><td></td>
                  </tr>
                </tbody>
              </table></td>
            <td nowrap="" tabindex="3" id="el3" onMouseOver="_popi(3)" style="background:#004d95;padding:2px">
              <a onMouseOver="this.blur()" href="http://www.carmeuse.eu/fr" id="lnk3" style="color:#FFFFFF;font-Family:Arial;font-Weight:normal;font-Style:normal;font-Size:11px;text-Decoration:none;;"> Produits </a></td>
            <td style="width:1px;;background:white">
              <table border="0" cellpadding="0" cellspacing="0" width="1">
                <tbody>
                  <tr><td></td>
                  </tr>
                </tbody>
              </table></td>
            <td nowrap="" tabindex="4" id="el4" onMouseOver="_popi(4)" style="background:#004d95;padding:2px">
              <a onMouseOver="this.blur()" href="http://www.carmeuse.eu/fr" id="lnk4" style="color:#FFFFFF;font-Family:Arial;font-Weight:normal;font-Style:normal;font-Size:11px;text-Decoration:none;;"> Procédé </a></td>
            <td style="width:1px;;background:white">
              <table border="0" cellpadding="0" cellspacing="0" width="1">
                <tbody>
                  <tr><td></td>
                  </tr>
                </tbody>
              </table></td>
            <td nowrap="" tabindex="5" id="el5" onMouseOver="_popi(5)" style="background:#004d95;padding:2px">
              <a onMouseOver="this.blur()" href="http://www.carmeuse.eu/fr" id="lnk5" style="color:#FFFFFF;font-Family:Arial;font-Weight:normal;font-Style:normal;font-Size:11px;text-Decoration:none;;"> F.A.Q. </a></td>
            <td style="width:1px;;background:white">
              <table border="0" cellpadding="0" cellspacing="0" width="1">
                <tbody>
                  <tr><td></td>
                  </tr>
                </tbody>
              </table></td>
            <td nowrap="" tabindex="6" id="el6" onMouseOver="_popi(6)" style="background:#004d95;padding:2px">
              <a onMouseOver="this.blur()" href="http://www.carmeuse.eu/fr" id="lnk6" style="color:#FFFFFF;font-Family:Arial;font-Weight:normal;font-Style:normal;font-Size:11px;text-Decoration:none;;"> Evénements </a></td>
          </tr>
        </tbody>
      </table>
    </div>    
0
salut RAD ZONE, je ne comprend pas si tu m'insulte moi ou mon boss, mais pas grave, si tu as une autre proposition, un autre code source de menu, j'attend et je suis prête à l'utiliser!!!!
et j'ai pas compris qu'est ce que tu as ajouté au programme
vraiment navrée de vous importuner, mais je suis chamboulé
0
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
12 déc. 2011 à 20:14
salut

je n insulte personne !! mais ce menu est une horreur de codage , et je ne comprend pas que l ont impose un tel menu !

de plus tu ne semble pas maitriser le code ni html , css , javascript , donc tout te semble complique , c est normal !

voila un exemples sans javascript fait juste en html +CSS 3 ,( pour metre un peu de relief au menu , temps pis pour les anciennes version IE qui l auront tout plat ) sans pour autant qu il ai l air naze , bien au contraire!:-))

<!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">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    body{
      background-color: #EBEBEB;
    }

    a.categorie {
      height: 16px;
      line-height: 16px;
    }

    ul#radMenu1, ul#radMenu1 ul{
      margin: 0;
      list-style: none;
      background-color: #000;
      background-image: url("bk.png");
      background-repeat: repeat;
      border-width: 0px;
      border-style: solid;
      border-color: #999999;
      -moz-border-radius: 4px;/* <---------CSS3 */
      -webkit-border-radius: 4px;/* <---------CSS3 */
      border-radius: 4px;/*  <---------CSS3*/
    }

    ul#radMenu1 ul{
      display: none;
      position: absolute;
      left: 0;
      top: 100%;
      -moz-box-shadow: 0.7px 0.7px 1px #777777;/* <---------CSS3 */
      -webkit-box-shadow: 0.7px 0.7px 1px #777777;/* <---------CSS3 */
      box-shadow: 0.7px 0.7px 1px #777777;/* <---------CSS3 */
      padding: 0 9px 9px;
      background-color: #333333;
      background-image: none;
      border-width: 1px;
      border-radius: 4px;/* <---------CSS3 */
      -moz-border-radius: 4px;/* <---------CSS3 */
      -webkit-border-radius: 4px;/* <---------CSS3 */
      border-style: solid;
      border-color: #5A5E60;
    }

    ul#radMenu1 li:hover > *{
      display: block;
    }

    ul#radMenu1 li:hover{
      position: relative;
    }

    ul#radMenu1 ul ul{
      position: absolute;
      left: 100%;
      top: 0;
    }

    ul#radMenu1{
      padding: 1px 1px 1px 0;
      display: block;
      font-size: 0;
      float: left;
    }

    ul#radMenu1 li{
      display: block;
      white-space: nowrap;
      font-size: 0;
      float: left;
    }

    ul#radMenu1 > li, ul#radMenu1 li{
      margin: 0 0 0 1px;
    }

    ul#radMenu1 ul > li{
      margin: 1px 0 0;
    }

    ul#radMenu1 a:active, ul#radMenu1 a:focus{
      outline-style: none;
    }

    ul#radMenu1 a, ul#radMenu1 a.pressed{
      display: block;
      vertical-align: middle;
      text-align: left;
      text-decoration: none;
      font: bold 12px Arial;
      color: #cccccc;
      cursor: default;
    }

    ul#radMenu1 ul li{
      float: none;
      margin: 9px 0 0;
    }

    ul#radMenu1 ul a{
      text-align: left;
      padding: 8px 0 0 0;
      background-color: #333333;
      background-image: none;
      border-width: 1px 0 0 0;
      border-style: solid;
      border-color: #262626;
      border-radius: 0px;/* <---------CSS3 */
      -moz-border-radius: 0px;/* <---------CSS3 */
      -webkit-border-radius: 0px;/* <---------CSS3 */
      font: 13px Arial;
      color: #cccccc;
      text-decoration: none;
    }

    ul#radMenu1 li:hover > a{
      background-color: #00c4ff;
      border-style: none;
      font: bold 12px Arial;
      color: #ffffff;
      text-decoration: none;
      background-image: url("mainbk.png");
      background-position: 0 100px;
    }

    ul#radMenu1 img{
      border: none;
      vertical-align: middle;
      margin-right: 10px;
    }

    ul#radMenu1 img.over{
      display: none;
    }

    ul#radMenu1 li:hover > a img.def{
      display: none;
    }

    ul#radMenu1 li:hover > a img.over{
      display: inline;
    }

    ul#radMenu1 li a.pressed img.over{
      display: inline;
    }

    ul#radMenu1 li a.pressed img.def{
      display: none;
    }

    ul#radMenu1 span{
      display: block;
      overflow: visible;
      background-position: right center;
      background-repeat: no-repeat;
      padding-right: 0px;
    }

    ul#radMenu1 ul span{
      background-image: url("arrowsub.gif");
      padding-right: 27px;
    }

    ul#radMenu1 a{
      padding: 10px;
      background-color: #333333;
      background-image: url("mainbk.png");
      background-repeat: repeat;
      background-position: 0 200px;
      border-width: 0px;
      border-style: none;
      border-color:;
      color: #cccccc;
      text-decoration: none;
    }

    ul#radMenu1 li:hover > a, ul#radMenu1 li > a.pressed{
      background-color: #00c4ff;
      background-image: url("mainbk.png");
      background-position: 0 100px;
      border-style: none;
      color: #ffffff;
      text-decoration: none;
    }

    ul#radMenu1 ul li:hover > a, ul#radMenu1 ul li > a.pressed{
      background-color: #333333;
      background-image: none;
      border-style: solid;
      border-color: #262626;
      font: 13px Arial;
      color: #1f80ae;
      text-decoration: none;
    }

    ul#radMenu1 li.toppremier > a{
      height: 16px;
      line-height: 16px;
      border-radius: 4px 0 0 4px;/* <---------CSS3 */
      -moz-border-radius: 4px 0 0 4px;/* <---------CSS3 */
      -webkit-border-radius: 4px;/* <---------CSS3 */
      -webkit-border-top-right-radius: 0;/* <---------CSS3 */
      -webkit-border-bottom-right-radius: 0;/* <---------CSS3 */
      text-shadow: #000000 0px -1px 1px;/* <---------CSS3 */
    }

    ul#radMenu1 li.toppremier:hover > a, ul#radMenu1 li.toppremier > a.pressed{
      line-height: 16px;
      text-shadow: #3d3d3d 0px -1px 1px;/* <---------CSS3 */
    }

    ul#radMenu1 li.topmenu > a{
      height: 16px;
      line-height: 16px;
      text-shadow: #000000 0px -1px 1px;/* <---------CSS3 */
    }

    ul#radMenu1 li.topmenu:hover > a, ul#radMenu1 li.topmenu > a.pressed{
      line-height: 16px;
      text-shadow: #3d3d3d 0px -1px 1px;/* <---------CSS3 */
    }

    ul#radMenu1 li.topdernier > a{
      height: 16px;
      line-height: 16px;
      border-radius: 0 4px 4px 0;/* <---------CSS3 */
      -moz-border-radius: 0 4px 4px 0;/* <---------CSS3 */
      -webkit-border-radius: 0;/* <---------CSS3 */
      -webkit-border-top-right-radius: 4px;/* <---------CSS3 */
      -webkit-border-bottom-right-radius: 4px;/* <---------CSS3 */
      text-shadow: #000000 0px -1px 1px;/* <---------CSS3 */
    }

    ul#radMenu1 li.topdernier:hover > a, ul#radMenu1 li.topdernier > a.pressed{
      line-height: 16px;
      text-shadow: #3d3d3d 0px -1px 1px;/* <---------CSS3 */
    }

    ul#radMenu1 ._ > li > a{
      padding: 0;
    }

    ul#radMenu1 li.subpremier > a{
      border-width: 0;
      border-style: none;
      padding: 0;
    }

    ul#radMenu1 li.subpremier:hover > a, ul#radMenu1 li.subpremier > a.pressed{
      border-style: none;
    }
    /*]]>*/
    </style>
    <title></title>
  </head>
  <body>
    <ul id="radMenu1" class="topmenu">
      <li class="toppremier">
        <a href="#" title="Menu 0" class="categorie"><span>Menu 0</span></a>
        <ul>
          <li class="subpremier">
            <a href="#" title="Menu 0 0">Menu 0 0</a>
          </li>
          <li>
            <a href="#" title="Menu 0 1">Menu 0 1</a>
          </li>
          <li>
            <a href="#" title="Menu 0 2"><span>Menu 0 2</span></a>
            <ul>
              <li class="subpremier">
                <a href="#" title="Menu 0 2 0">Menu 0 2 0</a>
              </li>
              <li>
                <a href="#" title="Menu 0 2 1">Menu 0 2 1</a>
              </li>
              <li>
                <a href="#" title="Menu 0 2 2"><span>Menu 0 2 2</span></a>
                <ul>
                  <li class="subpremier">
                    <a href="#" title="Menu 0 2 2 0">Menu 0 2 2 0</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" title="Menu 0 3">Menu 0 3</a>
          </li>
        </ul>
      </li>
      <li class="topmenu">
        <a href="#" title="Menu 1" class="categorie"><span>Menu 1</span></a>
        <ul>
          <li class="subpremier">
            <a href="#" title="Menu 1 0">Menu 1 0</a>
          </li>
          <li>
            <a href="#" title="Menu 1 1">Menu 1 1</a>
          </li>
          <li>
            <a href="#" title="Menu 1 2">Menu 1 2</a>
          </li>
        </ul>
      </li>
      <li class="topmenu">
        <a href="#" title="Menu 2" class="categorie"><span>Menu 2</span></a>
        <ul>
          <li class="subpremier">
            <a href="#" title="Menu 2 0"><span>Menu 2 0</span></a>
            <ul>
              <li class="subpremier">
                <a href="#" title="Menu 2 0 0">Menu 2 0 0</a>
              </li>
              <li>
                <a href="#" title="Menu 2 0 1">Menu 2 0 1</a>
              </li>
              <li>
                <a href="#" title="Menu 2 0 2">Menu 2 0 2</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" title="Menu 2 1">Menu 2 1</a>
          </li>
        </ul>
      </li>
      <li class="topdernier">
        <a href="#" title="Menu 3" class="categorie">Menu 3</a>
      </li>
    </ul>
  </body>
</html>



et menus tu en as plein a telecharger sur le web !

a+
0
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
12 déc. 2011 à 21:49
SUITE DE https://forums.commentcamarche.net/forum/affich-23878835-background-cache#7

deuxiieme exemple toujours en HTML + CSS3 sans js !

<!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="en" lang="en">
<!-- saved from url=(0013)about:internet -->      <!-- POUR BYPASSER ( MOTW )EN LOCAL SUR IE -->
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
/*<![CDATA[*/
    body {
    font-family: arial;
    font-size: 14px;
    background: #e7e7e7;
    width: 450px;
    margin: 100px auto auto auto;
    }

    #nav_bleu {
    margin: 0;
    padding: 7px 6px 0;
    border-radius: 5px;
    height: 40px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-box-shadow: 0 1px 4px white;
    -moz-box-shadow: 0 1px 4px white;
    background: #32a3ba;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#74c8da', endColorstr='#32a3ba');
    background: -webkit-gradient(linear, left top, left bottom, from(#74c8da), to(#32a3ba));
    background: -moz-linear-gradient(top, #74c8da, #32a3ba);
    border: solid 1px #106779;
    }

    #nav_bleu li {
    margin: 0 5px;
    padding: 0 0 8px;
    float: left;
    position: relative;
    list-style: none;
    }

    #nav_bleu a {
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    display: block;
    padding: 8px 20px;
    margin: 0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    }

    #nav_bleu small{
    font-size: 12px;
    }

    #nav_bleu .active a, #nav_bleu li:hover > a {
    background: #106779;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#025364', endColorstr='#106779');
    background: -webkit-gradient(linear, left top, left bottom, from(#025364), to(#106779));
    background: -moz-linear-gradient(top, #025364, #106779);
    color: #fff;
    border: solid 1px #104a56;
    margin-right: -3px;
    margin-left: 1px;
    -webkit-box-shadow: 0 0 1px #d4f2f9;
    -moz-box-shadow: 0 0 1px #d4f2f9;
    box-shadow: 0 0 1px #d4f2f9;
    }

    #nav_bleu ul li:hover a, #nav_bleu li:hover li a {
    background: none;
    border: none;
    color: #ebebeb;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    }

    #nav_bleu ul li:hover > a {
    background: #abe8f5
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#abe8f5', endColorstr='#8dd1df');
    background: -webkit-gradient(linear, left top, left bottom, from(#abe8f5), to(#8dd1df)) !important;
    background: -moz-linear-gradient(top,  #abe8f5,  #8dd1df) !important;
    color: #0a4a57 !important;
    border: solid 1px #e3f6fa !important;
    -webkit-box-shadow: 0 0 2px #092a35 !important;
    -moz-box-shadow: 0 0 2px #092a35 !important;
    box-shadow: 0 0 2px #092a35 !important;
    width: 120px;
    margin-left: -5px;
    }

    #nav_bleu ul {
    background: #32a3ba;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#74c8da', endColorstr='#32a3ba');
    background: -webkit-gradient(linear, left top, left bottom, from(#74c8da), to(#32a3ba));
    background: -moz-linear-gradient(top, #74c8da, #32a3ba);
    display: none;
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    top: 35px;
    left: 0;
    border: solid 1px #106779;
    -webkit-box-shadow: 0 1px 4px white;
    -moz-box-shadow: 0 1px 4px white;
    }

    #nav_bleu li:hover > ul {
    display: block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    }

    #nav_bleu ul li {
    float: none;
    margin: 0;
    padding: 0;
    }

    #nav_bleu ul a {
    font-weight: normal;
    }

    #nav_bleu ul ul {
    left: 156px;
    top: -3px;
    }
    /*]]>*/
    </style>
  </head>
  <body>
    <div id="container">
      <ul id="nav_bleu">
        <li class="active">
          <a href="#">Acceuil</a>
        </li>
        <li>
          <a href="#">Nous</a>
          <ul>
            <li>
              <a href="#">niveau deux 1</a>
            </li>
            <li>
              <a href="#">niveau deux 2</a>
              <ul>
                <li>
                  <a href="#"><small>niveau trois 1</small></a>
                </li>
                <li>
                  <a href="#"><small>niveau trois 2</small></a>
                  <ul>
                    <li>
                      <a href="#"><small>niveau quatre 1</small></a>
                    </li>
                    <li>
                      <a href="#"><small>niveau quatre 2</small></a>
                    </li>
                    <li>
                      <a href="#"><small>niveau quatre 3</small></a>
                    </li>
                    <li>
                      <a href="#"><small>niveau quatre 4</small></a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#"><small>niveau trois 3</small></a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">niveau deux 3</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Portfolio</a>
          <ul>
            <li>
              <a href="#">niveau deux 1</a>
            </li>
            <li>
              <a href="#">niveau deux 2</a>
              <ul>
                <li>
                  <a href="#"><small>niveau trois 1</small></a>
                </li>
                <li>
                  <a href="#"><small>niveau trois 2</small></a>
                  <ul>
                    <li>
                      <a href="#"><small>niveau quatre 1</small></a>
                    </li>
                    <li>
                      <a href="#"><small>niveau quatre 2</small></a>
                    </li>
                    <li>
                      <a href="#"><small>niveau quatre 3</small></a>
                    </li>
                    <li>
                      <a href="#"><small>niveau quatre 4</small></a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#"><small>niveau trois 3</small></a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">niveau deux 3</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Contact</a>
          <ul>
            <li>
              <a href="#">niveau deux 1</a>
            </li>
            <li>
              <a href="#">niveau deux 2</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>

0
graffx Messages postés 6506 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 24 mars 2019 1 973
12 déc. 2011 à 22:06
Oui, ce qu' il veut juste te dire c'est que c'est tellement horrible que meme un habitué ne peut rien lire dans le pavé.

On dirait que tu as tout mis sur une ligne, normal que toi meme n' y voies rien, c'est compréhensible, essaie de faire comme RAD ZONE, c'est vachement plus propre et surtout tres lisible.
0
oui Bonjour, je vous remercie
c'est trop gentil de votre part RAD ZONE, c'est bon j'ai compris le principe, vous expliquez très bien
merci
0