28221 sujets

CSS et mise en forme, CSS3

[RESOLU] Menu horizontale sur 2 ligne

Bonjour a tous,

j'ai créer mon menu, j'aimerais savoir s'il était possible de le mettre sur 2 lignes et centrer.
car j'ai bien essayer de mettre un left:15%; et un right:15%; mais dés qu'on clique dessus tout ce décale.









<html>

<head>
<style>
.entete{float: left;
width:100%;

background-color:green;
border-style:solid;
height:15%;

left:0;

}

.menuI {float:left;

     background-color: #2BC3FF;
     border-style:solid;
     border-width:1px;
     border-color:#2B6BFF;
     font-family:"comic sans ms";
     color:black;
     font-size:0.8em;
     height:2em;
     z-index:2;



  }

.menuA{ float:left;

     background-color: white;
     border-style:groove;
     border-width:1px;
     border-bottom:none;
     font-family:"comic sans ms";
     color:orange;
     font-size:1em;
     z-index:3;






  }

 .menuA :hover {
    background: #fff;
}


.pageV{position:absolute;left:0px;
       width:100%;height:100%;
       top:10%;}

.pageI{position:absolute;
       top:10%;
       visibility:hidden;
       }
</style>
<script>

  function active(ong)
  {
  nbre_onglet=7;
  for(i=0;i<nbre_onglet;i++)
  {

  if(i!=ong)
  {
  ongActif=document.getElementById("ong"+i);
  ongActif.className="menuI";
  pgActive=document.getElementById("pg"+i);
  pgActive.className="pageI";
    
  }
  }

  
  ongActif=document.getElementById("ong"+ong);
  ongActif.className="menuA";
  pgActive=document.getElementById("pg"+ong);
  pgActive.className="pageV";
  
  }
  
  

        
  </script>  


<body>
<div class="entete">

     <div id="ong0" class="menuA" onClick="active('0')">menu0</div>
     <div id="pg0" class="pageV"></div>
     <div id="ong1" class="menuI" onClick="active('1')">menu1</div>

     <div id="pg1" class="pageI"><a href="menu1" ></a></div>
     <div id="ong2" class="menuI" onClick="active('2')">menu2</div>
     <div id="pg2" class="pageI"></div>
     <div id="ong3" class="menuI" onClick="active('3')">menu3</div>
     <div id="pg3" class="pageI"></div>
     <div id="ong4" class="menuI" onClick="active('4')">menu4</div>
     <div id="pg4" class="pageI"></div>

     <div id="ong5" class="menuI" onClick="active('5')">menu5</div>
     <div id="pg5" class="pageI"></div>
     <div id="ong6" class="menuI" onClick="active('6')">menu6</div>
     <div id="pg6" class="pageI"></div>


</div>












</body>

</html>

Modifié par burinho (30 Jul 2006 - 21:38)
Sujet clos
Aller à