Foros del Web » Creando para Internet » CSS »

Div no se muestra absoluto

Estas en el tema de Div no se muestra absoluto en el foro de CSS en Foros del Web. Hola, estoy desarrollando un juego web de pokemon y tengo una seccion "equipo" donde se muestran los pokemon de cada entrenador, al pasar el raton ...
  #1 (permalink)  
Antiguo 17/08/2009, 14:25
 
Fecha de Ingreso: septiembre-2005
Ubicación: Valencia
Mensajes: 738
Antigüedad: 12 años, 3 meses
Puntos: 5
Pregunta Div no se muestra absoluto

Hola, estoy desarrollando un juego web de pokemon y tengo una seccion "equipo" donde se muestran los pokemon de cada entrenador, al pasar el raton por encima se muestra un div absoluto con sus detalles, pero el problema esque no es del todo absoluto, sino que se tapa, he capturado una imagen para que veais el problema:


Este es el codigo:
Código HTML:
<td style="width: 33%;">
  <table style="display: inline;">
    <tr>
      <td colspan="2" style="text-align: center;"><h3><?php echo $pokemon['nombre']; ?></h3></td>
    </tr>
    <tr>
      <td>
        <div class="info">
          <img src=<?php echo'graficos/mundo/pokemons/'.$pokemon['numero'].'.png'; ?> style="width: 96px; height: 96px;" alt=<?php echo $pokemon['nombre']; ?> />
	  <span class="pokemon">
	    <img src=<?php echo 'graficos/mundo/pokemons/'.$pokemon['numero'].'.gif'; ?> alt="Pokemon"/>
            <strong>Informacion extra:</strong><br/>

            <!--Aqui se muestran mas datos-->
	  </span>
        </div>
      </td>
    </tr>
</table> 
Este es el codigo css:
Código:
div.info
{
	z-index: 24;
}
div.info:hover
{
    z-index: 25;
}
div.info span
{ 
    display: none;
}
/*Pokemon*/
div.info:hover span.pokemon
{
    display: block;
    position: absolute;
    top: 60px;
    left: 0px;
    width: 200px;
    border: 1px solid #0cf;
    background: #EEEEEE;
    color: #000000;
    text-align: left;
    font-size: 10px;
    padding: 5px;
}
¿Que hay mal? el z-index esta, el position: absolute tambien.. ¿Cual es el problema?

Gracias de antemano!"
__________________
http://www.pkmrpg.es
  #2 (permalink)  
Antiguo 17/08/2009, 14:50
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 12 años, 2 meses
Puntos: 49
Respuesta: Div no se muestra absoluto

eso esta en un iframe o algo así? digo veo que se corta, pero yo me refiero a lo que pone información estamos hablando de lo mismo???
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #3 (permalink)  
Antiguo 17/08/2009, 15:02
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Div no se muestra absoluto

Hola Astut.
¿Qué es lo que no se muestra?

¿La parte inferior del bicho grande?
Lógico, está en en el flujo antes que el span, y aunque cambias a z-index 25 al :hover, lo haces sobre todo el contenido de .info.
Si fuera eso, prueba a añadir div.info:hover img {z-index:50;}

¿La información extra?
Prueba a posicionar el span no en base a top, sino bottom, así crecerá con sus contenidos hacia "arriba" de su contenedor.

No se si habré acertado con tus necesidades.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 17/08/2009, 15:10
 
Fecha de Ingreso: septiembre-2005
Ubicación: Valencia
Mensajes: 738
Antigüedad: 12 años, 3 meses
Puntos: 5
Respuesta: Div no se muestra absoluto

Gracias por contestar a ambos,

Kseso me refiero a la informacion extra si, lo que pone "informacion" y se corta, use top o use bottom sige ocurriendo lo mismo, el cuadro se corta, es como si el z-index solo funcionara en el td, si se sale del td, se corta.

A ver ahora
__________________
http://www.pkmrpg.es
  #5 (permalink)  
Antiguo 17/08/2009, 15:34
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Div no se muestra absoluto

¿Has investigado a darle a esa celda una clase y jugar con "white-space: pre"?
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 17/08/2009, 15:54
 
Fecha de Ingreso: septiembre-2005
Ubicación: Valencia
Mensajes: 738
Antigüedad: 12 años, 3 meses
Puntos: 5
Respuesta: Div no se muestra absoluto

Veras, igual no te has fijado bien, esto funciona de la siguiente forma:
Al pasar el raton por encima del div, la etiqueta span se vuelve visible, si no pasas por encima del div, la etiqueta span permanece invisible, osea es un tooltip.

¿Que clase quieres que de al td?, yo quiero que esto ocurra al pasar el raton por encima del div y no del td.

No se porque no funciona, si al div:hover le doy un z-index 25 y el div sin pasar por encima tiene un z-index 24 y el span esta en position absolute no se porque se corta.

Algo debe estar mal
__________________
http://www.pkmrpg.es
  #7 (permalink)  
Antiguo 17/08/2009, 16:35
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: Div no se muestra absoluto

¿El problema es con qué navegador?
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 17/08/2009, 19:33
 
Fecha de Ingreso: septiembre-2005
Ubicación: Valencia
Mensajes: 738
Antigüedad: 12 años, 3 meses
Puntos: 5
Respuesta: Div no se muestra absoluto

Hola Mikmoro, dudo que sea cosa del navegador, he probado en firefox, iexplore y opera y lo mismo.
__________________
http://www.pkmrpg.es
  #9 (permalink)  
Antiguo 18/08/2009, 01:21
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: Div no se muestra absoluto

Ya. ¿Dónde están en el código que has puesto "Mover a casa" y "Soltar", que son lo que tapan el span?
¿son botones de un formulario?

Los botones de formulario siempre traen problemas con la posición z, preo si no los muestras es mucho más difícil saber.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 18/08/2009, 03:32
 
Fecha de Ingreso: septiembre-2005
Ubicación: Valencia
Mensajes: 738
Antigüedad: 12 años, 3 meses
Puntos: 5
Respuesta: Div no se muestra absoluto

E quitado el otro td y sige igual.
__________________
http://www.pkmrpg.es
  #11 (permalink)  
Antiguo 18/08/2009, 05:09
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: Div no se muestra absoluto

No tengo ni idea de qué quieres decir. Si pones el código que has dejado y te explicas, quizá se pueda hacer algo.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 18/08/2009, 05:11
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: Div no se muestra absoluto

Esto es prácticamente tu código pero con dos imágenes mías. ¿No es así como debe funcionar?
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 18/08/2009, 05:40
 
Fecha de Ingreso: septiembre-2005
Ubicación: Valencia
Mensajes: 738
Antigüedad: 12 años, 3 meses
Puntos: 5
Respuesta: Div no se muestra absoluto

Si mikmoro, asi debe funcionar.

Si pongo todo el codigo va a ser muy engorroso ya que es php con html (200 lineas).
Si lo veo con el firebug me dice que tiene posicion absoluta y z-index 25 asi que no hay nada que interfiera..

Que puede ser? gracias
__________________
http://www.pkmrpg.es
  #14 (permalink)  
Antiguo 18/08/2009, 07:55
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: Div no se muestra absoluto

Busca las diferencias entre mi ejemplo (que es casi totalmente tu código), y el tuyo.

Y si quieres ayuda, no es necesario poner todo el código, sino la zona completa donde está el asunto, incluyendo los botones y demás. Y por supuesto, no pongas el código PHP, sino el HTML generado en el navegador.
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 18/08/2009, 10:43
 
Fecha de Ingreso: septiembre-2005
Ubicación: Valencia
Mensajes: 738
Antigüedad: 12 años, 3 meses
Puntos: 5
Respuesta: Div no se muestra absoluto

Hola gracias por contestar!

Aqui el codigo html del asunto como bien dices:
Código HTML:
<tr>
										<td colspan="2" style="text-align: center;"><h3>Charmander</h3></td>
									</tr>
									<tr>
										<td>
											<div class="info">
                                            	<img src="graficos/mundo/pokemons/004.png" style="width: 96px; height: 96px;" alt="Charmander">
												<span class="pokemon">

									  				<img src="graficos/mundo/pokemons/004.gif" alt="Pokemon"><strong>Informacion extra:</strong><br>
                                            		-&nbsp;<i>Objeto adjunto:</i>&nbsp;No tiene<br>-&nbsp;<i>1&nbsp;Ataque:</i>&nbsp;Arañazo&nbsp;||&nbsp;Pp:&nbsp;35/35<br>-&nbsp;<i>2&nbsp;Ataque:</i>&nbsp;Gruñido&nbsp;||&nbsp;Pp:&nbsp;40/40<br>-&nbsp;<i>3&nbsp;Ataque:</i>&nbsp;No tiene<br>-&nbsp;<i>4&nbsp;Ataque:</i>&nbsp;No tiene<br> </span>

                                        	</div>
										</td>
										<td>
                                        	<p><strong>Nivel:&nbsp;</strong>5</p>
                                            <p></p><div class="info"><strong>Exp.:&nbsp;</strong><span class="pokemon_barra">0/1&nbsp;(0)</span><img src="graficos/barras/pokemon_exp.gif" height="10" width="0"></div>
                                            <p></p><div class="info"><strong>Ps:&nbsp;</strong><span class="pokemon_barra">29/29</span><img src="graficos/barras/pokemon_ps.gif" height="10" width="50"></div>

                                            <p><strong>Estado:&nbsp;</strong><span class="pokemon_estado_normal">normal</span></p>
											<p><input class="mini" value="Mover a caja" onclick="" type="button"></p>
											<p><input class="mini" value="Soltar" onclick="AccionSoltar('65');" type="button"></p>
						</td>
								</tr> 
Saludos!
__________________
http://www.pkmrpg.es
  #16 (permalink)  
Antiguo 18/08/2009, 11:05
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: Div no se muestra absoluto

Vamos, que resulta que sí eran botones (input). Era evidente. Como te dije en el mensaje #9, los botones y la posición z son problemáticos.
Busca por z-index+input que verás montones de problemas como el tuyo y muchas soluciones. No cito ninguna de ellas porque no recuerdo.

El trozo que muestras funciona aparentemente bien en FF2.
__________________
Visita mi nueva web idplus.org
  #17 (permalink)  
Antiguo 18/08/2009, 11:24
 
Fecha de Ingreso: septiembre-2005
Ubicación: Valencia
Mensajes: 738
Antigüedad: 12 años, 3 meses
Puntos: 5
Respuesta: Div no se muestra absoluto

Hola mikmoro,

No son los botones, he probado dejando solo la columna con la imagen y el tooltip y nada que sige igual, el tooltip se corta en los limites del td...

EDIT: Al fina lel problema era el "overflow: hidden;" que me recomendaron en otro post... claro no era compatible con un tooltip asi que lo he quitado

La proxima vez pondre mas datos.

Mikmoro y los demas gracias por intentar solucionar el problema, ya esta resuelto!

ahora tengo problemas con otro tema: http://www.forosdelweb.com/f77/call-...5/#post3046603
__________________
http://www.pkmrpg.es
  #18 (permalink)  
Antiguo 18/08/2009, 11:48
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: Div no se muestra absoluto

Bueno, quizá hasta que lo abras en IE6.

Por cierto: ¿hay algún overflow en el código CSS que pusiste en el primer post?

En fin, hasta la vista.
__________________
Visita mi nueva web idplus.org
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 15:16.