JMiur [E]

Toda etiqueta es un rectángulo, si tiene un borde o un color de fondo esto es evidente pero, si no lo tiene, sigue siendo un rectángulo que ocupa un determinado espacio y se ubica en una determinada posición de la página. Esta es la clave de todo, entender eso y además, tener en cuenta que el orden en que son agregadas influirá en su resultado ya que, aunque las veamos ubicadas gráficamente de cierto modo, para el navegador, eso, sólo es un dibujito ya que todos ellos siguen una regla sencilla: para ellos, el orden natural es secuencial, de arriba hacia abajo y de derecha a izquierda.

Es cierto que pueden mostrarse de cualquier otro modo, para eso están las propiedades (float, position, margin, etc) pero, al navegador, no le interesan esos detalles y eso, justamente, es lo que puede crear conflictos o problemas.

Si toda etiqueta es un rectángulo real (tiene ancho y tiene alto aunque no los definamos) y armamos algo como esto, donde simplemente hay dos DIVs, uno arriba y otro abajo y al de abajo lo "subimos" un poco con un margen negativo, tal vez, dependiendo de las reglas de estilo que tengamos, el enlace que está allí, no funcionará. Si ponen el cursor encima y tratan de hacer click, no pasará nada, ni siquiera veremos la manito indicativa:

A B C D E F

¿Por qué pasa esto? porque el de arriba está encima del enlace y, aunque es transparente, sus reglas de estilo TAPAN el enlace. Si le pusiéramos un color de fondo, lo veríamos claramente:
ver | restaurar.

¿Cómo se soluciona? Lo lógico sería repasar las reglas de estilo de esas etiquetas ¿No será que uno es demasiado alto y compensamos eso con márgenes negativos? ¿Es necesaria la propiedad position? Las respuestas pueden ser infinitas y no pretendo darlas, todo dependerá y, llegado el caso, siempre nos queda la opción de usar z-index. En este ejemplo, bastaría invertir el orden:


Este mismo problema es el que genera muchísimas consultas sobre menús que no se despliegan aunque, en realidad, no es que no se desplieguen sino que no se ven desplegados.

Si tenemos un contenedor (un DIV) con ese menú que vimos armadito y lo agregamos al header de nuestro sitio, tal vez, dependiendo de dónde lo hayamos puesto y de las reglas de estilo del resto de nuestra página, se verá bien pero ¿no funciona?

  • menu 1
  • menu 2
    • submenu 2.1
    • submenu 2.2
    • submenu 2.3
  • menu 3
    • submenu 3.1
    • submenu 3.2
    • submenu 3.3
  • menu 4
Aliquam erat volutpat. Phasellus ligula augue, hendrerit sit amet pharetra et, auctor nec odio! Nunc placerat facilisis volutpat! Donec nisi elit, convallis nec vestibulum ac, aliquam quis magna! In aliquet arcu eget mi mollis at porta erat condimentum. Pellentesque congue ante non felis fringilla mattis. Morbi urna lectus; laoreet id tempor vitae, pretium id nibh. Sed nisl eros, molestie non luctus nec, pretium nec felis. Praesent pharetra egestas interdum. Quisque consequat placerat mi, in pharetra nisl mattis in. Aenean id orci vel enim ultrices eleifend!

¿Por qué sólo se ve un pedacito? Por el mismo motivo que el enlace del ejemplo anterior no funcionaba aunque, en este caso, no se trata de una etiqueta que es demasiado alta y tapa a la de abajo sino de una etiqueta cuya altura es escasa (UL LI) y que contiene otras que sólo se ven cuando se coloca el cursor encima pero, no tienen espacio suficiente ya que la etiqueta que está debajo (el texto), ocupa ese lugar así que queda encima del menú desplegado.

Otra vez, esto se resuelve con z-index:


¿Y que es z-index? Un numero de orden que sólo se aplica a los elementos que tengan definida la propiedad position como relative, absolute o fixed y, dicho muy livianamente, indica cuál está encima de cuál; por defecto, se "apilan" en el mismo orden en que se encuentran en el código así que en este caso, la segunda (el texto) tiene un valor implícito de z-index, superior a la primera (el menú) y bastaría invertir ese orden para que el menú se viera desplegado.

Dependiendo del caso (he usado muchas veces la palabra depender porque nada de todo esto es una ciencia exacta) deberemos agregarle las propiedades z-index al menú y al div inferior (un valor más alto al menú); o bien, simplemente, sólo agregar la propiedad z-index al menú (una valor cualquiera, no hace falta poner valores exorbitantes):
#mi-menu {
  position:relative;
  z-index: 100;
}

27 comentarios:

CUENTAGOTAS  

Interesante Jorge, ahora pregunto como se corrige el problema de un recuadro entrecortado que queda al dar un click sobre una imagen (pueba dando un click en twiiter http://ritmosymelodiasecuador.blogspot.com/) estéticamente es muy feo.

JMiur  

Eso que ves es la propiedad outline que se agrega por defecto siempre a todo enlace y se muestra cuando se hace click sobre ellos.

Se puede sacar globalmente con:

a {outline:none;}

Siempre rodea al enlace y, en ese caso, como el texto está oculto con text-indent: -9999px; sobrepasa el espacio disponible. si quitas el texto del enlace, el recuadro sólo rodeará la imagen.

CUENTAGOTAS  

Gracias Jorge, comprendido y problema resuelto.

Responder
Martin Rocha  

Hola Jmiur disculpa que te moleste, no esta relacionado mismo con el tema, queria consultarte si es posible y como hacer par darle una altura especifica a la columna de entradas y que cuando las entradas sobrepasen esa altura aparezca la bara desplazadora en ese sector.
El blog es este.
Saludos Jmiur.

JMiur  

Dependerá de cuál sea el rectángulo que quieras limitar; por ejemplo si es todo, incluyendo los enlaces de navegación inferiores, podría ser así:

#main-wrapper {
height: 500px;
overflow: auto;
}

colocando en height el valor que quieras.

Y si no quisieras incluir la navegación:

.blog-posts {
height: 500px;
overflow: auto;
}

Martin Rocha  

gracias pro la pronta resuesta Jmiur, probe ello incluyendo la navegacion pero no aparecio la barra de desplazamiento, me falto algo?
saludos

JMiur  

Lo que veo es que en #main-wrapper {} dice height: 570px; pero overflow: hidden; y debería ser overflow: auto; u overflow-y: scroll; pero nunca hidden ya que hideen corta el div dimensionado..

Martin Rocha  

tenes razon disculpa, en si lo agergue asi pero no me percate de que tamb estaba esa propiedad, ricien vi la forma de modificar la barra con jQuery.
En este caso donde agregaria las clases y haria el llamado a la funcion?

JMiur  

Dependerá del plugin que estés usando.

Martin Rocha  

este es el que estoy usando Jmiur, ya agregue los scripts y las propiedades pero no se donde ubicar en este caso (main-wrapper) las clases y el llamado que nombras al final.
Un saludo

Martin Rocha  

perdon este es el plugin.

JMiur  

No sé dónde vas a aplicar eso pero, en general, las reglas de estilo van junto al resto del CSS, donde quieras colocarlo antes de </head>

La función al debes llamar después del DIV que es donde se mostrarán; para evitar complicaciones, puedes usar document.ready y la colocas tambien antes de </head>

$(document).ready(function(){
$(function() { $('#NOMBRE').jScrollPane(); });
})

usando el nombre del ID o la clase del contenedor donde se aplicará.

Responder
Martin Rocha  

JMiur agregue el css despues de ambos scripts o sea antes de head.
Lo del llamado creo que le entendi lo que si no se, es donde tendria que agregar ...scroll-pan .. el contenido a mostrar ... etc
ya que a lo que quiero aplicarlo es al overflow del main-wrapper.
Disculpa saludos.

JMiur  

Pués ese es el punto complicado del asunto. Tal vez, agregando ese div llamado scroll-panel como contenedor de main-wrapper.

Martin Rocha  

Te creo je, probe Jmiur haciendo eso pero si dejo el div main-wrapper dentro de "contenido a mostrar" tal cual me da error de cierres.
Ta si es medio imposible y no hay solucion igual te agradesco Jmiur.

JMiur  

No se si es imposible, diría que es engorroso. Es fundamental que encuentres el inicio y cierre de las etiquetas. Si no expandes la plantilla es más sencillo.

Martin Rocha  

Estoy en lo correcto Jmiur si digo que si se pudiera agregar se crearia una barra mas de las que ya tiene no?
Por otro lado leei tu articulo sobre resaltar los item del menu segun donde estemos.
Agregue el pequeño script al final de gadget d emenu pero no afecta, hay que hacerle alguna modificacion al menu Jmiur?
Gracias.

JMiur  

Con lo primero me perdí :D ¿se crearia una barra? explícame eso.

En cuanto al script ¿en que blog está? No lo veo.

Martin Rocha  

=D decia en el caso remoto que se pudiese agregar la barra de desplazamiento con jquery, se le sumaria a la que ya aparece con la propiedad overflow, o sea, no trabajarian como una sola.

El blog es este y el script lo agregue dentro del widget del menu, no se si es alli mismo o le tengo que modificar algo al menu en si para que funcione.

JMiur  

No, no verías dos. Sólo verías la barra personalizada y no la otra; tal como está en la entrada con el ejemplo.

Lo qu ocurre con es script es que la direccion de href es la clásica, por ejemplo:
http://helambeta.blogspot.com/p/videos.html
pero la direccion de la pagina incluye el prefijo del pais:
http://helambeta.blogspot.com.XX/p/videos.html
y por lo tanto, son distintas.

Martin Rocha  

Entonces no creo sirva con estos cambios de blogger =S.
2 consultas jmiur, la primera como puedo solucionar esto que solo sucede con chrome.
Y por otro lado como mantener en el lugar el status-msg-wrap que es lo que enmarque en verde, o sea que a pesar de que me deslize en el main este se mantenga alli y no corra junto con el main.
gracias.

JMiur  

Para lo primero, sugeriría que usaras el script que corrige parte de los problemas de los prefijos por país; no por este tema de las etiquetas en particular sino por todos los otros problemas que suele traer ese tipo de dirección.

El tema del título en Chrome es por el uso de márgenes negativos. Trata de no usarlos a menos que sea para lago muy específico y calculado. Cuando se ven "agujeros" en el diseño, no se soluciona con márgenes negativos sino buscando la causa de esos agujeros y eliminándola. En este caso, son dos:

tienes un div cuya clase es post-meta que está vacío pero, tiene dimensión, una cierta altura. Deberías quitarlo o, si tiene algún uso posterior, poner:
.post-meta {display:none;}

Por defecto, todas las etiquets Hx tienen un margen superior e inferior y en esos, falta eliminar el margen inferior:
.post h3 { margin-bottom: 0;}

Por último, para que esa parte quede fija no hay más remedio que quitarla de donde está; ponerla afuera del contenedor con las barras de desplazamiento y luego simular el resto; sería de este modo:

quitar el div de clase status-msg-wrap de allí y colocarlo encima de <div id="main-wrapper">

agregar esta regla:
.status-msg-wrap { z-index: 1000;}

y ahora sí usamos un margen negativo para aparentar que la barra de desplazamiento (o sea el main-wrapper) abarca esa parte:
#main-wrapper {
margin-top: -40px;
padding-top: 40px;
}

con margin-top negativo se sube todo una altura igual a la altura del div status-msg-wrap al que le pusimos un z-index alto para que este encima y no debajo

y con padding-top bajamos el contenido del main-wrapper para que se muestre como si estuviera debajo; cuanto más padding tenga, más separado quedará.



Martin Rocha  

No sabia que afectaban a chrome, gracias y si toda la razon, por intentar arreglar algo con margenes negativos se termina empeorando.
Y quedo impecable lo del status-msg-wrap.
Muchas gracias disculpa la molestia jmiur que andes bien.

Responder
gatita. kawaii  

buenas como se encuentra ?
nose si me recuerda soy mariela tengo un grave problema mi blog en chrome se ve normal pero en explorer me esta saliendo lineas negras cual podria ser el problema agaradesere su respuesta :(

JMiur  

No es un problema de IE, en Chrome no se ven pero están allí y se ven en cualquier otro navegador.

Son etiquetas <b> con fondos negros. Probablemente, es un error en alguna parte de la plantilla o en los posts mismos; etiquetas que están mal cerradas y producen ese tipo de reacción en cadena.

Si usas Chrome, allí hay una herramienta que permite ver los errores y, se listan muchísimos. Estas cargando jQuery varias veces, distintas versiones. Hay un script o algo así dentro de <b:skin> </b:skin>, archivos que no se cargan, etc, etc.

Deberías repasar las cosas detenidamente e ir corrigiendo todos esos errores uno por uno.

Responder
adm100388  

Hola JMiur, espero no molestar de nuevo con mi consulta, tengo el siguiente problema con mi menú: Una muestra en la siguiente imagen: http://fotos.subefotos.com/7ff32622aa95f0582c730fc0f1e0daefo.png

En mi blog de pruebas la veo perfecta, pero en el blog donde la voy a usar el menú se encuentra como desplazado, no entiendo por qué, el código del plantilla es un copy/paste en ambos blogs, pero en uno se ve bien, y en el otro no. Solo se me ocurre la sección de blogger de "Diseño", si bien algunos gadgets los muestra algo distintos, son los mismos y con los mismos id. ¿Qué puede ser? Hay algo que está ocupando lugar ahí y lo desplaza, pero no sé qué...

JMiur  

Si se trata de este blog:
http://www.eizoutokuten.org/
no sé a cuál desplazamiento te refieres o cómo debe verse ese menú.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR