Foros del Web » Creando para Internet » HTML »

Se añaden espacios al codigo.

Estas en el tema de Se añaden espacios al codigo. en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/07/2008, 11:32
Avatar de KeiDash  
Fecha de Ingreso: septiembre-2005
Mensajes: 114
Antigüedad: 12 años, 2 meses
Puntos: 0
Se añaden espacios al codigo.

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.
  #2 (permalink)  
Antiguo 19/07/2008, 11:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Se añaden espacios al codigo.

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.
  #3 (permalink)  
Antiguo 19/07/2008, 12:30
Avatar de KeiDash  
Fecha de Ingreso: septiembre-2005
Mensajes: 114
Antigüedad: 12 años, 2 meses
Puntos: 0
Respuesta: Se añaden espacios al codigo.

¿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.

Última edición por KeiDash; 19/07/2008 a las 12:45
  #4 (permalink)  
Antiguo 19/07/2008, 12:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Se añaden espacios al codigo.

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.
  #5 (permalink)  
Antiguo 19/07/2008, 13:33
Avatar de KeiDash  
Fecha de Ingreso: septiembre-2005
Mensajes: 114
Antigüedad: 12 años, 2 meses
Puntos: 0
Respuesta: Se añaden espacios al codigo.

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.
  #6 (permalink)  
Antiguo 19/07/2008, 17:28
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Se añaden espacios al codigo.

Sólo con CSS, con :hover.

Esta es la hoja de estilo

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

Cita:
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.
  #7 (permalink)  
Antiguo 20/07/2008, 05:57
Avatar de KeiDash  
Fecha de Ingreso: septiembre-2005
Mensajes: 114
Antigüedad: 12 años, 2 meses
Puntos: 0
Respuesta: Se añaden espacios al codigo.

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:30.