Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Como hacer que un div aparezca debajo de su correspondiente

Estas en el tema de Como hacer que un div aparezca debajo de su correspondiente en el foro de CSS en Foros del Web. Bueno, lo he hecho es un código javascript muy simple que abre y cierra un div con visibility, esto lo que hace es poner el ...
  #1 (permalink)  
Antiguo 26/06/2013, 12:18
Avatar de iEnrique  
Fecha de Ingreso: abril-2013
Ubicación: España
Mensajes: 346
Antigüedad: 11 años, 3 meses
Puntos: 5
Como hacer que un div aparezca debajo de su correspondiente

Bueno, lo he hecho es un código javascript muy simple que abre y cierra un div con visibility, esto lo que hace es poner el nombre de usuario del usuario al que le pones el cursor.

Pero que pasa, que usuarios puede haber 1 como puede haber 4... Y lo que he hecho es colocar el cuadro para que quede bien con los margenes al primero pero al segundo y al cuarto aparece en el lugar del primero, ¿cómo podría aparecer por debajo?

Tengo en esos dos divs "position:absolute; z-index:1;" por si es necesaria esa info.

Muchas gracias por resolver esta duda a los que me ayuden .
  #2 (permalink)  
Antiguo 26/06/2013, 13:02
Leonardo_Manrique
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Como hacer que un div aparezca debajo de su correspondiente

Si incluís tanto el código HTML como el CSS, encantado de ayudarte .

Mejor si tenés un enlace al sitio del que nos estás hablando.

Un saludo,
Leo!
  #3 (permalink)  
Antiguo 26/06/2013, 13:24
Avatar de iEnrique  
Fecha de Ingreso: abril-2013
Ubicación: España
Mensajes: 346
Antigüedad: 11 años, 3 meses
Puntos: 5
Respuesta: Como hacer que un div aparezca debajo de su correspondiente

Cita:
Iniciado por Leonardo_Manrique Ver Mensaje
Si incluís tanto el código HTML como el CSS, encantado de ayudarte .

Mejor si tenés un enlace al sitio del que nos estás hablando.

Un saludo,
Leo!
Pasa por encima de la imagen de perfil en "Información" y en la sección "Amigos"... Ahí está el código, lo siento no habértelo adjuntado se me olvidó

http://lemite.uni.me/perfil.php?user=iEnrique
  #4 (permalink)  
Antiguo 26/06/2013, 13:29
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: Como hacer que un div aparezca debajo de su correspondiente

Lo suyo sería meter el div dentro del enlace, al enlace darle una posición relativa —o cualquier diferente a estática, aunque para el caso, relativa— y luego ya la posición absoluta será relativa a ese enlace y con un bottom: -20px o así se pondrán cada cual donde necesites. No veo la necesidad de usar JavaScript.

Simplificado quedaría algo así:

Código CSS:
Ver original
  1. a {
  2.   position: relative;
  3. }
  4.  
  5. a div {
  6.   position: absolute;
  7.   bottom: -20px;
  8.   display: none;
  9. }
  10.  
  11. a:hover div {
  12.   display: block;
  13. }

No sé donde he visto un diseño similar.
  #5 (permalink)  
Antiguo 27/06/2013, 01:30
Avatar de iEnrique  
Fecha de Ingreso: abril-2013
Ubicación: España
Mensajes: 346
Antigüedad: 11 años, 3 meses
Puntos: 5
Respuesta: Como hacer que un div aparezca debajo de su correspondiente

Cita:
Iniciado por pzin Ver Mensaje
Lo suyo sería meter el div dentro del enlace, al enlace darle una posición relativa —o cualquier diferente a estática, aunque para el caso, relativa— y luego ya la posición absoluta será relativa a ese enlace y con un bottom: -20px o así se pondrán cada cual donde necesites. No veo la necesidad de usar JavaScript.

Simplificado quedaría algo así:

Código CSS:
Ver original
  1. a {
  2.   position: relative;
  3. }
  4.  
  5. a div {
  6.   position: absolute;
  7.   bottom: -20px;
  8.   display: none;
  9. }
  10.  
  11. a:hover div {
  12.   display: block;
  13. }

No sé donde he visto un diseño similar.
Pero a ver... lo que yo quiero hacer es luego más cosas con el cuadrado por eso uso Javascript pero por cierto muchas gracias por la ayuda; muchas gracias. Intentaré hacerlo como me has dicho.

Respecto al diseño *Tú no has visto naaaada, de naaada*... #Okno Si, es un poco copiado pero tan solo hemos coincido, copiar no he copiado nada jajaja...
  #6 (permalink)  
Antiguo 27/06/2013, 01:35
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: Como hacer que un div aparezca debajo de su correspondiente

¿Qué más quieres hacer con el cuadrado? Si lo que quieres hacer, sea lo que sea, es aún cuando puntero siga encima del elemento, en principio podrías hacerlo con CSS. Habría que verlo.

¿Diseño? No he visto nada.
  #7 (permalink)  
Antiguo 27/06/2013, 04:38
Avatar de iEnrique  
Fecha de Ingreso: abril-2013
Ubicación: España
Mensajes: 346
Antigüedad: 11 años, 3 meses
Puntos: 5
Respuesta: Como hacer que un div aparezca debajo de su correspondiente

No, lo que quiero hacer es que aparezca poco a poco con opacidad 0 a 0.75 por eso lo voy ha hacer con Javascript... aunque eso se podría hacer con CSS3... Bueno ya me lo pensaré.

Una cosa más y marco como solucionado el tema. El mismo cuadrado en la misma página, ¿cómo podría ponerlo centrado? Te dejo el link:

http://lemite.uni.me/perfil.php?user=iEnrique
  #8 (permalink)  
Antiguo 27/06/2013, 05:27
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: Como hacer que un div aparezca debajo de su correspondiente

Pues mira, se te va complicando el asunto.

Estuve haciendo una prueba con todos tus requisitos y no te queda más remedio que añadir otro elemento para centrar ese elemento. Quedaría en algo como esto la estructura:

Código HTML:
Ver original
  1. <a>
  2.   <img src="fulanito.png">
  3.   <div>
  4.     <span>Nombre Apellido</span>
  5.   </div>
  6. </a>

Luego el CSS se complica un poco más:

Código CSS:
Ver original
  1. a {
  2.   position: relative;
  3.   display: inline-block;
  4.   width: 50px;
  5.   height: 50px;
  6. }
  7.  
  8. a div {
  9.   position: absolute;
  10.   right: 50%;
  11.   bottom: -20px;
  12.   visibility: hidden;
  13.   opacity: 0;
  14.   transition: opacity .4s ease-out, visibility 0 linear .4s
  15. }
  16.  
  17. a div span {
  18.   display: block;
  19.   margin-right: -100%;
  20.   text-align: center;
  21.   white-space: nowrap;
  22. }
  23.  
  24. a:hover div {
  25.   visibility: visible;
  26.   opacity: 1;
  27.   transition-delay: 0;
  28. }

Más que complicado, un poco rebuscado. El problema de centrar ese elemento con posición absoluta es cuando se hace más largo que su contenedor, por eso había que meter otro contenedor.

Ya de paso te puse una transición, que tendrás que añadirle los prefijos propietarios o usar prefixfree, Sass o alguna salsa de esas.

Funcionando: http://codepen.io/pzin/pen/dvKht
  #9 (permalink)  
Antiguo 27/06/2013, 09:38
Avatar de iEnrique  
Fecha de Ingreso: abril-2013
Ubicación: España
Mensajes: 346
Antigüedad: 11 años, 3 meses
Puntos: 5
Respuesta: Como hacer que un div aparezca debajo de su correspondiente

Hay algo que falla. Lo he hecho pero sigue sin centrarse, creo que es por position:absolute, porque le pongo relative me sale... te dejo la pág por si quieres consultarlo ya hecho:

http://lemite.uni.me/perfil.php?user=iEnrique

a = #cart
img = #img_cart
div = #cart_black
span = #cart_span

Lo único que he quitado es el bottom:-20px que había en #cart_black porque quedaba mal. Después tan solo he añadido cosas...

Por cierto, muchísimas gracias por ayudarme me estás ayudando genial

Última edición por iEnrique; 27/06/2013 a las 09:58
  #10 (permalink)  
Antiguo 27/06/2013, 14:03
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: Como hacer que un div aparezca debajo de su correspondiente

Usa clase en lugar de identificadores, porque estos tienen que ser únicos en el documento HTML. A ver si con eso se arregla o es otra cosa.
  #11 (permalink)  
Antiguo 28/06/2013, 08:10
Avatar de iEnrique  
Fecha de Ingreso: abril-2013
Ubicación: España
Mensajes: 346
Antigüedad: 11 años, 3 meses
Puntos: 5
Respuesta: Como hacer que un div aparezca debajo de su correspondiente

Cita:
Iniciado por pzin Ver Mensaje
Usa clase en lugar de identificadores, porque estos tienen que ser únicos en el documento HTML. A ver si con eso se arregla o es otra cosa.
Lo he pasado todo a class pero sigue sin ir... cual puede ser el problema...

http://lemite.uni.me/perfil.php?user=iEnrique

Última edición por iEnrique; 28/06/2013 a las 08:22
  #12 (permalink)  
Antiguo 28/06/2013, 08:23
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: Como hacer que un div aparezca debajo de su correspondiente

El problema es que estás estilizando el contenedor que era para hacer la pirula. Ese es como intocable.

Si quitas el color de fondo y los paddings a .cart_black verás que el texto se centra bien.

En lugar de ponerle el borde y padding a .cart_black, pónselo a .cart_span.
  #13 (permalink)  
Antiguo 28/06/2013, 08:59
Avatar de iEnrique  
Fecha de Ingreso: abril-2013
Ubicación: España
Mensajes: 346
Antigüedad: 11 años, 3 meses
Puntos: 5
Respuesta: Como hacer que un div aparezca debajo de su correspondiente

Cita:
Iniciado por pzin Ver Mensaje
El problema es que estás estilizando el contenedor que era para hacer la pirula. Ese es como intocable.

Si quitas el color de fondo y los paddings a .cart_black verás que el texto se centra bien.

En lugar de ponerle el borde y padding a .cart_black, pónselo a .cart_span.
ALELUYAA!! ¿Pero cómo has sabido eso? ayy!! Muchas gracias te amo
  #14 (permalink)  
Antiguo 28/06/2013, 09:08
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: Como hacer que un div aparezca debajo de su correspondiente

Cita:
Iniciado por iEnrique Ver Mensaje
te amo


No confundamos las cosas.
  #15 (permalink)  
Antiguo 28/06/2013, 09:19
Avatar de iEnrique  
Fecha de Ingreso: abril-2013
Ubicación: España
Mensajes: 346
Antigüedad: 11 años, 3 meses
Puntos: 5
Respuesta: Como hacer que un div aparezca debajo de su correspondiente

Cita:
Iniciado por pzin Ver Mensaje


No confundamos las cosas.
¿Cuándo será nuestra primera cita? Ahora me quedas con el corazón roto...

Etiquetas: aparezca, debajo, divs
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 23:05.