Ver Mensaje Individual
  #5 (permalink)  
Antiguo 06/02/2014, 06:45
Avatar de difilippocarlos
difilippocarlos
 
Fecha de Ingreso: junio-2010
Mensajes: 109
Antigüedad: 13 años, 10 meses
Puntos: 1
Respuesta: menú vertical - efectos y posicion

se me esta arruinando todo...

aca paso el codigo del css completo, solo funciona en chrome.

Lo divido en 2 partes pq no entra


Código:
/* new clearfix */
.main{visibility: hidden;}
#logoG {background: url('../img/SpriteLogoFinal.png')no-repeat -145px -167px ;float:left;width: 122px;height: 106px;text-indent:-999em;padding: 5px;margin:0;} 
#logoG:hover {background: url('../img/SpriteLogoFinal.png')no-repeat -1px -170px;float:left;width: 122px;height: 106px;text-indent:-999em;padding: 5px;margin:0;} 

#navIzquierda{visibility: hidden;}
#navDerecha{visibility: hidden;}

ul.inline{display:inline;padding-left:0;}
ul.inline li{display:inline;list-style-type:none;padding:0 0.5em;}
ul.inline li{float:left;padding:0;margin:0;}

#navInferior li a#b01{background: url('../img/SpriteWebNormal.png') no-repeat -407px -351px; float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b01:hover{background: url('../img/SpriteWebNormal.png') no-repeat -406px -435px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b02{background: url('../img/SpriteWebNormal.png') no-repeat -203px -351px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b02:hover{background: url('../img/SpriteWebNormal.png') no-repeat -203px -435px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b03{background: url('../img/SpriteWebNormal.png') no-repeat -406px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b03:hover{background: url('../img/SpriteWebNormal.png') no-repeat -406px -255px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b04{background: url('../img/SpriteWebNormal.png') no-repeat -0px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b04:hover{background: url('../img/SpriteWebNormal.png') no-repeat 0 -255px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b05{background: url('../img/SpriteWebNormal.png') no-repeat -102px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b05:hover{background: url('../img/SpriteWebNormal.png') no-repeat -102px -255px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b06{background: url('../img/SpriteWebNormal.png') no-repeat -203px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b06:hover{background: url('../img/SpriteWebNormal.png') no-repeat -203px -255px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b07{background: url('../img/SpriteWebNormal.png') no-repeat -305px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b07:hover {background: url('../img/SpriteWebNormal.png') no-repeat -305px -255px;float:left;width: 65px;height: 65px;text-indent:-999em;}

/*
#navFixed{width: 100%;}
*/

section.buttonset button {border: none;opacity: 0.5;background: url('../img/SpriteWebNormal.png') no-repeat -305px -435px;padding: 2.5em;display: block;cursor: pointer;margin: 10px 0;font-size: 0.8em;text-indent:-999em;}
section.buttonset button:hover {border: none;opacity: 1;background: url('../img/SpriteWebNormal.png') no-repeat -305px -435px;padding: 2.5em;display: block;cursor: pointer;margin: 10px 0;font-size: 0.8em;text-indent:-999em;}
section.buttonset button.active {border: none;opacity: 1;background: url('../img/SpriteWebNormal.png') no-repeat -305px -435px;padding: 2.5em;display: block;cursor: pointer;margin: 10px 0;font-size: 0.8em;text-indent:-999em;}


@media (max-width:330px){
    #navInferior ul#main-menu-Inf li:last-child{margin:0 0 0 80px;}
    #navInferior ul#main-menu-Inf li{margin:5px;}

    #header{margin: 0 !important; width: 100%;background: #2A7EC2; padding-top: 1px; border-bottom: 1px solid #2A7EC2; top:0; height: 450px;-webkit-box-shadow: 2px 3px 1px 0px #143C5C;box-shadow: 2px 3px 1px 0px #143C5C; height: 450px;}

    #logoMenu{width: 130px;margin: 0 auto; text-align: center;}

    #navInferior{width: 225px; margin: 0 auto;}
    #navInferior li{margin:0px;}
}

@media (min-width:330px) and (max-width:500px){
    #navInferior ul#main-menu-Inf li:last-child{margin:0 0 0 80px;}
    #navInferior ul#main-menu-Inf li{margin:5px;}

    #header{margin: 0 !important; width: 100%;background: #2A7EC2; padding-top: 1px; border-bottom: 1px solid #2A7EC2; top:0; height: 380px;-webkit-box-shadow: 2px 3px 1px 0px #143C5C;box-shadow: 2px 3px 1px 0px #143C5C; height: 380px;}
    #logoMenu{width: 130px;margin: 0 auto; text-align: center;}

    #navInferior{width: 225px; margin: 0 auto;}
    #navInferior li{margin:0px;}
}

@media (min-width:500px){
    .main{visibility: visible;}
    #header{margin: 0 !important; width: 100%;background: #2A7EC2; padding-top: 1px; border-bottom: 1px solid #2A7EC2; top:0; height: 210px;-webkit-box-shadow: 2px 3px 1px 0px #143C5C;box-shadow: 2px 3px 1px 0px #143C5C; height: 210px;}
    #logoMenu{width: 100px;margin: 0 auto; text-align: center;}
    #logoG {background: url('../img/SpriteLogoFinal.png')no-repeat -145px -167px ;float:left;width: 122px;height: 106px;text-indent:-999em;padding: 5px;margin:0;} 
    #logoG:hover {background: url('../img/SpriteLogoFinal.png')no-repeat -1px -170px;float:left;width: 122px;height: 106px;text-indent:-999em;padding: 5px;margin:0;} 

    #navInferior{width: 483px; margin: 0 auto;}
    #navInferior li{margin: 0 2px;}
}

@media (min-width:760px){
    #logoMenu{width: 100px;margin: 0 auto; text-align: center;}
    #logoG {background: url('../img/SpriteLogoFinal.png')no-repeat -145px -167px ;float:left;width: 122px;height: 106px;text-indent:-999em;padding: 5px;margin:0;} 
    #logoG:hover {background: url('../img/SpriteLogoFinal.png')no-repeat -1px -170px;float:left;width: 122px;height: 106px;text-indent:-999em;padding: 5px;margin:0;} 

    #navInferior{width: 595px; margin: 0 auto;}
    #navInferior li{margin: 0 10px;}
}

@media (min-width:916px){
    #navInferior{width: 735px; margin: 0 auto;}
    #navInferior li{margin: 0 20px;}
}