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

[iEnrique]

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 .

[Leonardo_Manrique]

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!

[iEnrique]

Iniciado por Leonardo_Manrique

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

[pzin]

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:

a {
  position: relative;
}
 
a div {
  position: absolute;
  bottom: -20px;
  display: none;
}
 
a:hover div {
  display: block;
}
 

No sé donde he visto un diseño similar.

[iEnrique]

Iniciado por pzin

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:

a {
  position: relative;
}
 
a div {
  position: absolute;
  bottom: -20px;
  display: none;
}
 
a:hover div {
  display: block;
}
 

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

[pzin]

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

[iEnrique]

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

[pzin]

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:

<a>
  <img src="fulanito.png">
  <div>
    <span>Nombre Apellido</span>
  </div>
</a>
 

Luego el CSS se complica un poco más:

Código CSS:

a {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
}
 
a div {
  position: absolute;
  right: 50%;
  bottom: -20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .4s ease-out, visibility 0 linear .4s
}
 
a div span {
  display: block;
  margin-right: -100%;
  text-align: center;
  white-space: nowrap;
}
 
a:hover div {
  visibility: visible;
  opacity: 1;
  transition-delay: 0;
}
 

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

[iEnrique]

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

[pzin]

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.

[iEnrique]

Iniciado por pzin

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

[pzin]

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.

[iEnrique]

Iniciado por pzin

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

[pzin]

Iniciado por iEnrique

te amo

No confundamos las cosas.

[iEnrique]

Iniciado por pzin

No confundamos las cosas.

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