DIV's se bajan en cada menu

KATHYU · #1 (**permalink**) 11/07/2015, 10:34

Buenos dias.

Tengo un problema, tengo un menu con el cual quiero manejar unos divs, en un mismo html, esto para no estar cargando la pagina en cada item del menu.

Este es el menu, el primer div esta visible.

Este es el menu (Item 2), el primer div esta invisible, pero se baja un poco.

Este es el menu (Item 3), pero se baja un poco mas.

Este es el menu (Item 4), pero se baja aun mas

No se porque el CSS se comporta asi, que solo el primer div muestra donde se debe y los demas los baja.

Aca el codigo html

Código HTML:

Ver original<html>
    <head>
        <title>DLC Rack</title>
            <link rel="stylesheet" type="text/css" href="../css/style.css" media="screen" />
            <link rel="shortcut icon" href="../img/favicon.gif" type="image/x-icon"/>
            <meta http-equiv="Content-Language" content="English" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!-- Para el menu-->
        <link href="../css/menu/styles.css" rel="stylesheet" type="text/css">
        <script src="../css/menu/jquery-latest.min.js"></script>
        <script type='text/javascript' src='../css/menu/menu_jquery.js'></script>
        <script type='text/javascript' src='../libs/js/script.js'></script>
        
        
    </head>
 
    <body>
        <div id="wrapper">
            <div id="cinta">
                <div id="img_cinta"><a href="../../"><img src="../img/logo_2.png" height="50px"></img></a></div>
                    <center>
                        <div id="menu_cinta"><br>
                            <a href="#">Sistemas DLC | RACK |</a>
                        </div>
                    <center>
            </div>
            
    <div id="main">
    
            <div id="sidebar">
 
            <div id='cssmenu'>
                <ul>
                   <li class='active'><a><span>Sistemas DLC</span></a></li>
                   <li class='has-sub'><a href='#'><span>Rack</span></a></li>
                   <li class='has-sub'><a href='#'><span>Sistema Tickets</span></a></li>
                   <li class='has-sub'><a href='../qrs'><span>QRS</span></a></li>
                   <!-- Ojo aca habia una clase last que hace que esa lista siempre este abajo de todo
                    <li class='last'><a href='#'><span>Articulos</span></a></li>
                    -->
                </ul>
            </div>
            
            </div>
        <br>
        <center>
        <div id="contenido">
                <div id="menu">
                        <ul class="nav">
                            <li><a href="javascript:registro(register)" >Registro</a></li>
                            <li><a href="javascript:anteriores(log)" >Anteriores</a></li>
                            <li><a href="javascript:a(aa)" >22222</a></li>
                            <li><a href="javascript:b(bb)" >33333</a></li>
                            <li><a href="javascript:c(cc)" >44444</a></li>
                            <li><a href="#" ><img width='15px' src='../img/user.png'/>&nbsp;<?php echo $_SESSION['username']; ?> ► Salir  </a></li>
                        </ul>
                </div> <!-- End Menu -->
                <br><br>
                
                <div id="register" Style="visibility:visible;">                 
                    Aca se registraran los precios !!!!!!!
                </div>
                
                <div id="log" Style="visibility:hidden;">
                    Aca irian los anteriores !!!!!!!
                </div>
                
                <div id="aa" Style="visibility:hidden;">
                    aaaaaaaaaaaaaaaa !!!!!!!
                </div>
                
                <div id="bb" Style="visibility:hidden;">
                    bbbbbbbbbbbbbbbb !!!!!!!
                </div>
                
                <div id="cc" Style="visibility:hidden;display:inline;">
                    cccccccccccccccccccc !!!!!!!
                </div>
                
        </div> <!-- /container -->
        </center>
    </div> <!-- /main -->
        </div><!-- End Wrapper -->
 
    </body>
 
</html>

Aca el codigo del script

Código Javascript:

Ver originalfunction registro(id)
{
id.style.visibility='visible';
log.style.visibility='hidden';
aa.style.visibility='hidden';
bb.style.visibility='hidden';
cc.style.visibility='hidden';
}
 
function anteriores(id)
{
id.style.visibility='visible';
register.style.visibility='hidden';
aa.style.visibility='hidden';
bb.style.visibility='hidden';
cc.style.visibility='hidden';
}
 
function a(id)
{
id.style.visibility='visible';
register.style.visibility='hidden';
log.style.visibility='hidden';
bb.style.visibility='hidden';
cc.style.visibility='hidden';
}
 
function b(id)
{
id.style.visibility='visible';
register.style.visibility='hidden';
log.style.visibility='hidden';
aa.style.visibility='hidden';
cc.style.visibility='hidden';
}
 
function c(id)
{
id.style.visibility='visible';
register.style.visibility='hidden';
log.style.visibility='hidden';
bb.style.visibility='hidden';
aa.style.visibility='hidden';
}

Me pueden decir en que estoy fallando ?? ya probe con display inline/none pero no funciona bien.

PD: por si norespondo rapido, es porque hoy salgo temprano del work

les respondo el lunes

pzin · #2 (**permalink**) 11/07/2015, 11:03

Con visibility: hidden lo que haces es que no se vea el elemento, pero seguirá ocupando el espacio que le corresponda.

Prueba con display: none y display: block.

Deberías de tener un código JavaScript más reusable.

KATHYU · #3 (**permalink**) 11/07/2015, 11:31

Muy amable como simpre pzin, y andaba cerca de la solucion

En JS estoy un poco null, como cree usted que deberia ser el JS ideal de mi funcion ??