Foros del Web » Creando para Internet » CSS »

problemas con la posicion de un div flotante

Estas en el tema de problemas con la posicion de un div flotante en el foro de CSS en Foros del Web. hola. les cuento por donde va mi problema, no es nada dificil seguro solo que los post que encontre sobre el tema no los entendi ...
  #1 (permalink)  
Antiguo 21/07/2011, 15:31
Avatar de intiweb  
Fecha de Ingreso: mayo-2009
Ubicación: Capital Federal
Mensajes: 363
Antigüedad: 14 años, 10 meses
Puntos: 5
problemas con la posicion de un div flotante

hola. les cuento por donde va mi problema, no es nada dificil seguro solo que los post que encontre sobre el tema no los entendi del todo.
tengo una pagina creadas con tablas celdas imagenes de fondo etc. y le coloque una div flotante, o sea una capa por ensima porque necesitaba meter un contenido por ensima del otro. mi problema es que el div que utilizo fija una posicion respecto de la ventana del navegador y no de mi diseño por lo cual depende el monitor o cuan abierto esta la ventana del navegadore del cliente saber si va a quedar el contenido donde debe quedar o si lo va a plazar a cualquier otro lado. alguien sabe como ponerle la posicion del div respecto de mi diseño ?? o sea de la tabla que contiene todo el diseño ??
creo que tiene que ver con lo de posicion absolute o relative pero no logro entender bien como funciona :(.
saludos
__________________
un saludo..... . . .
  #2 (permalink)  
Antiguo 21/07/2011, 19:12
Avatar de intiweb  
Fecha de Ingreso: mayo-2009
Ubicación: Capital Federal
Mensajes: 363
Antigüedad: 14 años, 10 meses
Puntos: 5
Respuesta: problemas con la posicion de un div flotante

les dejo el codigo para que vean a ver si hay esta mas claro cual es el problema:

aca esta el codigo Css:
Código CSS:
Ver original
  1. #posicion {
  2.     position:absolute;
  3.     left:203px;
  4.     top:326px;
  5.     width:204px;
  6.     height:247px;
  7.     z-index:1;
  8. }


aca esta el codigo Html:
Código HTML:
Ver original
  1. <div align="center">
  2.   <table width="903" height="570" border="0">
  3.     <tr>
  4.       <td>
  5.       <div align="center" id="pagina1">
  6.         <table width="900" height="575" border="0" cellpadding="0" cellspacing="0" background="jpg/fondo_fotos1.jpg">
  7.           <tr>
  8.             <td width="106" height="28">&nbsp;</td>
  9.             <td width="703"><div id="posicion">
  10.   <form id="form1" name="form1" method="post" action="">
  11.     <table width="201" height="231" background="jpg/contacto.png">
  12.       <tr>
  13.         <td width="35">&nbsp;</td>
  14.         <td width="128">&nbsp;</td>
  15.         <td width="22" height="55">&nbsp;</td>
  16.       </tr>
  17.       <tr>
  18.         <td>&nbsp;</td>
  19.         <td><label for="consulta"></label>
  20.         <textarea name="consulta" cols="13" rows="8" class="transparente" id="consulta"></textarea></td>
  21.         <td height="142">&nbsp;</td>
  22.       </tr>
  23.       <tr>
  24.         <td height="24" colspan="3" align="center"><img src="jpg/bt_send.png" width="17" height="17" /></td>
  25.       </tr>
  26.     </table>
  27.   </form>
  28. </div></td>
  29.             <td width="91" rowspan="3" align="right"><object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="49" height="568">
  30.               <param name="movie" value="flash/bt_fotos.swf" />
  31.               <param name="quality" value="high" />
  32.               <param name="wmode" value="opaque" />
  33.               <param name="swfversion" value="6.0.65.0" />
  34.               <!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
  35.               <param name="expressinstall" value="Scripts/expressInstall.swf" />
  36.               <!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
  37.               <!--[if !IE]>-->
  38.               <object type="application/x-shockwave-flash" data="flash/bt_fotos.swf" width="49" height="568">
  39.                 <!--<![endif]-->
  40.                 <param name="quality" value="high" />
  41.                 <param name="wmode" value="opaque" />
  42.                 <param name="swfversion" value="6.0.65.0" />
  43.                 <param name="expressinstall" value="Scripts/expressInstall.swf" />
  44.                 <!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
  45.                 <div>
  46.                   <h4>Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.</h4>
  47.                   <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p>
  48.                 </div>
  49.                 <!--[if !IE]>-->
  50.               </object>
  51.               <!--<![endif]-->
  52.             </object></td>
  53.           </tr>
  54.           <tr>
  55.             <td height="495">&nbsp;</td>
  56.            <td><iframe id="box" src="fotos_galeria.php"></iframe></td>
  57.             </tr>
  58.           <tr>
  59.             <td height="25">&nbsp;</td>
  60.             <td>&nbsp;</td>
  61.             </tr>
  62.         </table>
  63.       </div>
  64. </td>
  65.     </tr>
  66.   </table>
  67. </div>

en cuanto a la altura se mantiene en donde tiene que estar yo achico el alto de la ventana y le div con id posicion se mantiene acorde al resto del diseño.
pero si achico el ancho de la ventana el div se va corriendo para quedar a cierta posicion con repecto de la ventana y se corre de lugar respecto al resto del diseño :(

no se si estoy siendo claro, porque hasta yo me hise un pequeño lio con mis palabras jaaj si no se entiende diganme XD !!!
saludos
__________________
un saludo..... . . .
  #3 (permalink)  
Antiguo 21/07/2011, 21:00
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: problemas con la posicion de un div flotante

jeje la verdad ando algo liado y me revolvi con todo lo que necesitas hacer... lo que si te puedo decir que cuando utilizas position absolute o fixed en cualquier elemento este toma su posision con respecto al primer elemento padre inmediato que cuente con position: en cualquiera de sus modalidades

por ejemplo para que tu div tome posición con respecto a la tabla que lo contiene deberás agregar position:relative al elemento padre inmediato

Cita:
<table width="900" height="575" border="0" cellpadding="0" cellspacing="0" background="jpg/fondo_fotos1.jpg">
<tr>
<td width="106" height="28">&nbsp;</td>
<td width="703" style="position:relative"><div id="posicion">
<form id="form1" name="form1" method="post" action="">
  #4 (permalink)  
Antiguo 23/07/2011, 12:50
Avatar de intiweb  
Fecha de Ingreso: mayo-2009
Ubicación: Capital Federal
Mensajes: 363
Antigüedad: 14 años, 10 meses
Puntos: 5
Respuesta: problemas con la posicion de un div flotante

che no me funciona asi como me decis, sigue tomando la posicion con respecto de la ventana del explorador y no del objeto padre.
__________________
un saludo..... . . .

Etiquetas: contenido, flotante, fondo, posicion
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 08:31.