Se añaden espacios al codigo.

[KeiDash]

Buenas a todos.

Estoy trabajando con mi web, añadiendo divs dentro de otros divs ets, los cuales desde un principio estan como "hidden" para ir mostrando según la opción del menú que se elija.

Ahora bien, para que me entendais voy a hacer una "especie de grafico" xDD

Pongámos que el código de la web es esto:
###################
#----Inicio------------------------#
#----JavaScrip-------------------#
#--Codigo que meustra DIV----------#
#----/Javascript---------------#
#----DivPrincipal--------------#
#----/DIvPrincipal-------------#
#----DIV2--------------------#
#----/DIV2-------------------#
#----DIV3--------------------#
#----/DIV3-------------------#
#----FIN---------------------#
################

Bueno...como se muestra en el "gráfico", sigo un orden de programación. En el DinPrincipal se van añadiendo y mostrando los DIV en los que se haga click sobre el menu. ¿Que pasa?;

Pues pasa que, el contenido se muestra, pero si por ejemplo, damos al menú que activa el DIV3 dentro del DivPrincipal, primero se muestra TODO EL ESPACIO que hay entre el DivPrincipal y el DIV3 reflejado en codigo, osea, un espacio grande vacío, y luego el DIV3.

Esto se puede solucionar? Hay algo que hago mal?

Saludos y gracias de antemano.

[Mikmoro]

La diferencia es que visibility: hidden no muestra el contenido, pero éste ocupa espacio físico, mientras que display:none además de no mostrarlo lo quita por completo, es decir, no pcupa espacio físico.

Mikel.

[KeiDash]

¿Entonces es mejor usar la propiedad para estos casos de display?

Alguna web de referencia con el tratamiento que se da con el display?¿

Gracias una vez mas Mikel.

[Mikmoro]

Mira este ejemplo

Todo lo que no se ve es que tiene display:none en su contenedor, y se le hace aprecer con display:block, en este caso con :hover.

Mikel.

[KeiDash]

Ok perfecto veo el ejemplo. Lo he usado y ahora si que se me ve perfectamente la web.

Porcierto, viendo la web que me pasas, miro el codigo y no veo ningun onmouseOver o codigo javascrpt. ¿Como lo cambia asi? xDDD

Muchas gracias.

[Mikmoro]

Sólo con CSS, con :hover.

Esta es la hoja de estilo

Todo el meollo de la cuestión está aquí:

a { border: 1px solid #999;
padding: 4px 10px;
text-decoration: none;
background-color: #000;
color: #FFF;
font-weight: bold;
display: inline-block;
margin-top: -5px!important;
margin-top: 0px;
}
a:hover {background-color: #FFF;
color: #000;
padding-bottom: 5px;
border-bottom: none;
position: relative;
}
a span.solapa { position: absolute;
width: 666px;
font-weight: normal;
background-color: #FFF;
text-align: left;
top: 21px;
left: 18px;
display: none;
}
a:hover span.solapa { display: block;}

Mikel.

[KeiDash]

Ok entiendo.

¿Cuantos tipos de eventos soporta el CSS? Donde me puedo informar de ello?
Veo que el hover es muy usado, como si fuera el onmouseOver de html.