Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] AYUDAAlinear un div como si fuera tooltip de otro

 Estas en el tema de AYUDAAlinear un div como si fuera tooltip de otro en el foro de CSS en Foros del Web. Buenos dias a todos, tengo un problema con el siguiente codigo que genero desde una BD para mostrar unas carpetas de usuario, la idea es ...
  #1 (permalink)  
Antiguo 13/02/2013, 09:39
 
Fecha de Ingreso: agosto-2009
Mensajes: 59
Antigüedad: 14 años, 8 meses
Puntos: 0
AYUDAAlinear un div como si fuera tooltip de otro
Buenos dias a todos, tengo un problema con el siguiente codigo que genero desde una BD para mostrar unas carpetas de usuario, la idea es que cuando situen el raton encima se genere un preview de las fotos y archivos que posee, esto ya lo logre hacer, lo que necesito es que la posicion del div preview sea siempre 100px a la derecha del que tiene la carpeta.

Me explico mejor poniendo el codigo:

Código PHP: 
Ver original
  1. function VER_ABIERTAS(){
  2.     $mysqli = $_SESSION['db'];
  3.     ?>
  4.     <div class="taboff" style="padding:4px">CARPETAS DE ACCESO LIBRE</div>
  5.     <?php
  6.     $get = $mysqli->query("SELECT cev_folders.admin_id, cev_admins.nombre, cev_admins.apellido  FROM cev_folders, cev_admins WHERE cev_folders.tipo = 'open' AND cev_folders.admin_id = cev_admins.admin_id GROUP BY cev_folders.admin_id");
  7.     if($get->num_rows){
  8.         while($rox = $get->fetch_row()){
  9.             ?>
  10.             <div class="bits"><b><?php echo $rox['1'].' '.$rox['2']?></b> comparte con todos</div>
  11.             <div style="margin-bottom:10px;">
  12.                 <?php
  13.                 $ver = $mysqli->query("SELECT id,nombre FROM cev_folders WHERE admin_id = '".$rox['0']."' AND tipo = 'open'");
  14.                 if($ver->num_rows){
  15.                     while($row = $ver->fetch_row()){
  16.                         ?>
  17.                         <a href="?action=4&do=ver&id=<?php echo $row['0']?>&owner=<?php echo $rox['0']?>"><div class="fol" title="" onMouseOver="MD('f<?php echo $rox['0']?>'); x.request('r:preview.php?id=<?php echo $row['0']?>&owner=<?php echo $rox['0']?>; rl:f<?php echo $rox['0']?>')" onMouseOut="CD('f<?php echo $rox['0']?>')"><img src="../img/Folder.png" /><br /><?php echo $row['1']?><br /><?php PESO_FOLDER("../documents/".$rox['0']."/".$row['0']."/files/")?></div></a><div class="preview" style="display:none;" id="f<?php echo $rox['0']?>" onMouseOver="MD('f<?php echo $rox['0']?>')" onMouseOut="CD('f<?php echo $rox['0']?>')"></div>
  18.                         <?PHp
  19.                     }
  20.                 }
  21.                 $ver->free();
  22.                 ?>
  23.                 <div id="c"></div>
  24.             </div>
  25.             <?php
  26.         }
  27.     }else{
  28.         echo NO_CHECK.' A&uacute;n no hay carpetas compartidas';
  29.     }
  30.     $get->free();
  31. }

Este es el codigo, ahora el CSS

Código CSS: 
Ver original
  1. .fol{float:left;background-color:#eee;border:1px solid #CCC;padding:4px;margin:0px 5px 0px 5px;color:#666;width:100px;height:100px;text-align:center;font-size:9px;overflow:hidden; position:relative;}
  2. .preview{
  3.     z-index:900;
  4.     position:absolute;
  5.     left:25%;
  6. }
No hallo como hacer que dependa de cada uno de los div que estan flotando para que siempre aparezca a la derecha de este.

Espero puedan ayudarme
  #2 (permalink)  
Antiguo 13/02/2013, 09:48
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: AYUDAAlinear un div como si fuera tooltip de otro
Mejor pon el HTML resultante, aquí no hablamos PHP.
  #3 (permalink)  
Antiguo 13/02/2013, 11:17
 
Fecha de Ingreso: agosto-2009
Mensajes: 59
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: AYUDAAlinear un div como si fuera tooltip de otro
Gracias por responder, se me paso de verdad

Aqui lo pongo, el div class fol es el que muestra las carpetas de los usuarios traidos de la base de datos, estas carpetas se van alineando a la derecha con un float, por lo que su posicion siempre va a variar, necesito que cuando se le de el mouseover el div que se genera con el preview de las carpetas se genere a la derecha de la carpeta para poder ver el contenido

Código HTML: 
Ver original
  1. <div class="boxon">
  2.         <div class="taboff" style="padding:4px">CARPETAS DE ACCESO LIBRE</div>
  3.                 <div class="bits"><b>Manuel (manny) Vispo</b> comparte con todos</div>
  4.             <div style="margin-bottom:10px;">
  5.                                         <a href="?action=4&do=ver&id=678&owner=1"><div class="fol" title="" onMouseOver="MD('f1'); x.request('r:preview.php?id=678&owner=1; rl:f1')" onMouseOut="CD('f1')"><img src="http://www.forosdelweb.com/f53/img/Folder.png" /><br />WALLPAPERS<br />0 archivos 0 carpetas</div></a><div class="preview" style="display:none;" id="f1" onMouseOver="MD('f1')" onMouseOut="CD('f1')"></div>
  6.                                         <div id="c"></div>
  7.             </div>
  8.                         <div class="bits"><b>Jean Baptiste Moreau</b> comparte con todos</div>
  9.             <div style="margin-bottom:10px;">
  10.                                         <a href="?action=4&do=ver&id=761&owner=8"><div class="fol" title="" onMouseOver="MD('f8'); x.request('r:preview.php?id=761&owner=8; rl:f8')" onMouseOut="CD('f8')"><img src="http://www.forosdelweb.com/f53/img/Folder.png" /><br />GOOGLE CHROME - EXTENSIONES<br />0 archivos 0 carpetas</div></a><div class="preview" style="display:none;" id="f8" onMouseOver="MD('f8')" onMouseOut="CD('f8')"></div>
  11.                                         <div id="c"></div>
  12.             </div>
  13.                         <div class="bits"><b>Giancarlo Olavarrieta Yepes</b> comparte con todos</div>
  14.             <div style="margin-bottom:10px;">
  15.                                         <a href="?action=4&do=ver&id=639&owner=26"><div class="fol" title="" onMouseOver="MD('f26'); x.request('r:preview.php?id=639&owner=26; rl:f26')" onMouseOut="CD('f26')"><img src="http://www.forosdelweb.com/f53/img/Folder.png" /><br />INUNDACION SEDE VALENCIA<br />0 archivos 0 carpetas</div></a><div class="preview" style="display:none;" id="f26" onMouseOver="MD('f26')" onMouseOut="CD('f26')"></div>
  16.                                         <div id="c"></div>
  17.             </div>
  18.                         <div class="bits"><b>Gladys Sanz</b> comparte con todos</div>
  19.             <div style="margin-bottom:10px;">
  20.                                         <a href="?action=4&do=ver&id=536&owner=30"><div class="fol" title="" onMouseOver="MD('f30'); x.request('r:preview.php?id=536&owner=30; rl:f30')" onMouseOut="CD('f30')"><img src="http://www.forosdelweb.com/f53/img/Folder.png" /><br />Entrega de útiles escolares<br />0 archivos 0 carpetas</div></a><div class="preview" style="display:none;" id="f30" onMouseOver="MD('f30')" onMouseOut="CD('f30')"></div>
  21.                                         <div id="c"></div>
  22.             </div>
  23.                         <div class="bits"><b>Román Perdomo</b> comparte con todos</div>
  24.             <div style="margin-bottom:10px;">
  25.                                         <a href="?action=4&do=ver&id=601&owner=55"><div class="fol" title="" onMouseOver="MD('f55'); x.request('r:preview.php?id=601&owner=55; rl:f55')" onMouseOut="CD('f55')"><img src="http://www.forosdelweb.com/f53/img/Folder.png" /><br />Documentación Sistemas<br />0 archivos 1 carpetas</div></a><div class="preview" style="display:none;" id="f55" onMouseOver="MD('f55')" onMouseOut="CD('f55')"></div>
  26.                                                 <a href="?action=4&do=ver&id=602&owner=55"><div class="fol" title="" onMouseOver="MD('f55'); x.request('r:preview.php?id=602&owner=55; rl:f55')" onMouseOut="CD('f55')"><img src="http://www.forosdelweb.com/f53/img/Folder.png" /><br />Guía Rápida de Escaneo en HP LaserJet M1522<br />0 archivos 0 carpetas</div></a><div class="preview" style="display:none;" id="f55" onMouseOver="MD('f55')" onMouseOut="CD('f55')"></div>
  27.                                                 <a href="?action=4&do=ver&id=641&owner=55"><div class="fol" title="" onMouseOver="MD('f55'); x.request('r:preview.php?id=641&owner=55; rl:f55')" onMouseOut="CD('f55')"><img src="http://www.forosdelweb.com/f53/img/Folder.png" /><br />Fotos Recuperación de Equipos de Administración<br />0 archivos 0 carpetas</div></a><div class="preview" style="display:none;" id="f55" onMouseOver="MD('f55')" onMouseOut="CD('f55')"></div>
  28.                                         <div id="c"></div>
  29.             </div>
  30.                         <div class="bits"><b>Douglas Roos Didencu</b> comparte con todos</div>
  31.             <div style="margin-bottom:10px;">
  32.                                         <a href="?action=4&do=ver&id=813&owner=122"><div class="fol" title="" onMouseOver="MD('f122'); x.request('r:preview.php?id=813&owner=122; rl:f122')" onMouseOut="CD('f122')"><img src="http://www.forosdelweb.com/f53/img/Folder.png" /><br />Prueba 2<br />0 archivos 0 carpetas</div></a><div class="preview" style="display:none;" id="f122" onMouseOver="MD('f122')" onMouseOut="CD('f122')"></div>
  33.                                         <div id="c"></div>
  34.             </div>
  35.              </div>
  36. </div>
Última edición por douglasroos; 13/02/2013 a las 11:46
  #4 (permalink)  
Antiguo 13/02/2013, 13:00
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: AYUDAAlinear un div como si fuera tooltip de otro
No hay humano que lea ese código.

Bueno, yo lo haría de esta forma:

Código HTML: 
Ver original
  1. <div class="carpeta">
  2.   Carpeta
  3.   <div class="previo">
  4.     Vista previa...
  5.   </div>
  6. </div>

Código CSS: 
Ver original
  1. div.carpeta {
  2.   position: relative;
  3. }
  4. div.previo {
  5.   position: absolute;
  6.   top: 0;
  7.   right: -300px;
  8.   display: none;
  9.   width: 200px;
  10. }
  11.  
  12. div.carpeta:hover div.previo {
  13.   display: block;
  14. }
  #5 (permalink)  
Antiguo 13/02/2013, 13:43
 
Fecha de Ingreso: agosto-2009
Mensajes: 59
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: AYUDAAlinear un div como si fuera tooltip de otro
Gracias por tu respuesta, perdon por el codigo, he probado lo que me dices y no me resulta.

Fijate esto:

Código CSS: 
Ver original
  1. .fol{float:left;background-color:#eee;border:1px solid #CCC;padding:4px;margin:0px 5px 0px 5px;color:#666;width:100px;height:100px;text-align:center;font-size:9px;overflow:hidden; position:relative;}
  2. .fol .preview{
  3.       position: absolute;
  4.   top: 0;
  5.   right: -300px;
  6.   display: none;
  7.   width: 200px;
  8. }
  9. .fol:hover div.preview {
  10.   display: block;
  11. }

Ahi esta el codigo que me das sobre el div relativo, creo que el problema es que el div fol tiene un width y un height de 100px. necesito entonces encerrarlo en otro div que sea el que tenga la posicion para el div del preview?

Perdona la molestia pero no manejo mucho css
  #6 (permalink)  
Antiguo 13/02/2013, 13:52
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: AYUDAAlinear un div como si fuera tooltip de otro
¿Tienes un ejemplo en línea? Así te puedo indicar mejor. No estoy muy propenso al esfuerzo hoy.
  #7 (permalink)  
Antiguo 13/02/2013, 15:51
 
Fecha de Ingreso: agosto-2009
Mensajes: 59
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: AYUDAAlinear un div como si fuera tooltip de otro
Claro, pèrdona la tardanza, se me fue la luz en la casa.

es este

http://uno.gettford.net/comunidad/up...2.php?action=4

Si ves, alli las carpetas se generan una al lado de la otra y la previsualizacion no se ve como deberia
Última edición por douglasroos; 13/02/2013 a las 16:21
  #8 (permalink)  
Antiguo 13/02/2013, 17:15
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: AYUDAAlinear un div como si fuera tooltip de otro
Si te fijas en el ejemplo que te puse, el elemento oculto está dentro del elemento al que haces :hover.

Si lo haces de otra forma, tendrás que usar JavaScript o complicarte mucho la vida para que siempre esté a una distancia fija relativa a un elemento como quieres.
  #9 (permalink)  
Antiguo 13/02/2013, 19:37
 
Fecha de Ingreso: agosto-2009
Mensajes: 59
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: AYUDAAlinear un div como si fuera tooltip de otro
Si ya veo, gracias! Habrá alguna forma de darle un atributo en css3 al div para que se superponga al otro? de manera que aparezca por encima y no se corte por el ancho o alto del otro? He probado con z-index pero no causa ese efecto.
  #10 (permalink)  
Antiguo 13/02/2013, 20:43
 
Fecha de Ingreso: agosto-2009
Mensajes: 59
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: AYUDAAlinear un div como si fuera tooltip de otro
Pensarás que molesto bastante, he logrado hacerlo removiendo el overflow:hidden del estilo de la carpeta padre, pero ahora me doy cuenta de algo:

Si tengo 3 carpetas, cada una con float left y position relative, cuando le doy al preview, no me lo situa en base a esa carpeta, sino a la primera que aparece, por que?

Me explico mejor poniendo el codigo:

Código CSS: 
Ver original
  1. .fol{float:left;background-color:#eee;border:1px solid #CCC;padding:4px;margin:0px 5px 0px 5px;color:#666;width:100px;height:100px;text-align:center;font-size:9px; position:relative;}
  2. .preview{
  3.    position: absolute;
  4.    top:-10px;
  5.    left:100px;
  6.    z-index:1000;
  7. }

Y estos los divs:

<div class="fol" title="" onMouseOver="MD('f813'); x.request('r:preview.php?id=813&owner=122; rl:f813')" onMouseOut="CD('f813')">

<div class="preview" style="display:none;" id="f813" onMouseOver="MD('f813')" onMouseOut="CD('f813')">
</div>

<img src="http://www.forosdelweb.com/f53/img/Folder.png" /><br />Nombre de la carpeta...<br />Peso de la carpeta

</div>
  #11 (permalink)  
Antiguo 14/02/2013, 00:20
 
Fecha de Ingreso: agosto-2009
Mensajes: 59
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: AYUDAAlinear un div como si fuera tooltip de otro
Ya lo solucioné, terminé asignándole un ID a cada div por medio de PHP y respetó las ubicaciones, el problema era usar la clase.

Etiquetas: fuera, php, tooltip
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 17:16.