Foros del Web » Creando para Internet » CSS »

Movimiento de capas absolutas

Estas en el tema de Movimiento de capas absolutas en el foro de CSS en Foros del Web. Hola a [email protected]: No sé si a alguien le pasa tambien ,pero cuando quiero introducir una capa absoluta AP para meter algo de información veo ...
  #1 (permalink)  
Antiguo 26/10/2010, 05:12
 
Fecha de Ingreso: marzo-2010
Mensajes: 82
Antigüedad: 7 años, 8 meses
Puntos: 0
Movimiento de capas absolutas

Hola a [email protected]:

No sé si a alguien le pasa tambien ,pero cuando quiero introducir una capa absoluta AP para meter algo de información veo que después en vista navegador aparece donde le da la gana.Así que los pocos contenidos organizados que estoy introduciendo los hago en tablas,porque además quedan mejor.El problema es que tampoco quiero prescindir de las AP div porque quiero meter algo de capas que aparecen y desaparecen al pasar el raton ,pero una vez que lo hago pues se cambian de posicion .Los movimientos solo me pasan con este elemento .No entiendo porqué puede ocurrir,porque se supone que son tags con posición absoluta que meto dentro de capas contenedoras en pixeles-y no en porcentajes relativos...Entonces,para organizar cierto tipo de contenidos qué es mejor organizarlos en una sola celda y tablas o echar mano de capas absolutas?
Un saludo
  #2 (permalink)  
Antiguo 26/10/2010, 08:19
Avatar de dargorg  
Fecha de Ingreso: octubre-2010
Ubicación: Castellón (España)
Mensajes: 188
Antigüedad: 7 años, 1 mes
Puntos: 9
Respuesta: Movimiento de capas absolutas

Importante: ¿Has puesto position: relative a la caja que contiene las que tendrán propiedad absoluta?

Un saludo,
  #3 (permalink)  
Antiguo 26/10/2010, 09:25
Avatar de Ribon  
Fecha de Ingreso: septiembre-2010
Ubicación: El firmamento
Mensajes: 487
Antigüedad: 7 años, 2 meses
Puntos: 91
Respuesta: Movimiento de capas absolutas

Claro, el elemento busca su padre posicionado más cercano para hacer el posicionamiento de el mismo, si no pones position:relative al contenedor del elemento entonces se pondrá en posicion absoluta con respecto al body
  #4 (permalink)  
Antiguo 28/10/2010, 05:42
 
Fecha de Ingreso: marzo-2010
Mensajes: 82
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Movimiento de capas absolutas

Las capas AP las intento introducir dentro de la capa contenido principal contenedora y diseño en pixeles ,no en porcentajes por lo que por defecto ya las capas div contenedoras tienen medidas en pixeles He intentado hacer eso que decis dando una posicion relativa a la capa madre y me sigue igual ...no se si al final tiene algo que ver con poner medidas exactas de alto o izquierda o hacer algo mas es que nada me da resultado con las malditas capas y creo voy a acabar prescindiendo de ellas...
  #5 (permalink)  
Antiguo 28/10/2010, 10:09
Avatar de dargorg  
Fecha de Ingreso: octubre-2010
Ubicación: Castellón (España)
Mensajes: 188
Antigüedad: 7 años, 1 mes
Puntos: 9
Respuesta: Movimiento de capas absolutas

No podrías poner un trozo de tu CSS para poder ayudarte?
  #6 (permalink)  
Antiguo 29/10/2010, 07:25
 
Fecha de Ingreso: marzo-2010
Mensajes: 82
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Movimiento de capas absolutas

Bueno ,como el tema es cuestión de los problemas con capas solamente paso código de una página de prueba con un encabezado ,pequeño texto y he insertado la div 1 meto codigo completo de la pagina con la capa .He puesto la contenedora en posicion relativa..
En Firefox y Chrome cuando inserto capas AP se mueven algo pero en I.E se desplazan mucho
A ver que puede estar mal....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.thrColFixHdr #container {
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.thrColFixHdr #header {
background: #DDDDDD;
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.thrColFixHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.thrColFixHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 150px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
}
.thrColFixHdr #sidebar2 {
float: right; /* since this element is floated, a width must be given */
width: 160px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
}
.thrColFixHdr #mainContent {
margin: 0 200px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
position: relative;
}
.thrColFixHdr #footer {
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
}
.thrColFixHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#apDiv1 {
position:absolute;
left:364px;
top:442px;
width:293px;
height:244px;
z-index:1;
background-color: #FF0000;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>

<body class="thrColFixHdr">

<div id="apDiv1">
<p>Tipos de Aceites </p>
<p>&nbsp;</p>
</div>
<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<div id="sidebar1">
<h3>&nbsp;</h3>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<h3>&nbsp;</h3>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<!-- end #sidebar2 --></div>
<div id="mainContent">
<h1>Aromaterapia como recurso de sanación</h1>
<p>&nbsp;</p>
<p>La aromaterapia (del griego aroma, 'aroma' y therapeia, 'atención', 'curación') es una rama particular de la herbolaria, que utiliza aceites vegetales concentrados llamados <a href="http://es.wikipedia.org/wiki/Aceites_esenciales" title="Aceites esenciales">aceites esenciales</a> para mejorar la salud física y emocional. A diferencia de las plantas utilizadas en herbolaria, los aceites esenciales no se ingieren sino que se inhalan o aplican en la piel. Su eficacia es discutida y es considerada una pseudociencia.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
  #7 (permalink)  
Antiguo 29/10/2010, 16:25
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Movimiento de capas absolutas

Angel71:

Estoy tratando de entender ti problema, pero sigo sin comprenderlo, me limito al análisis del código de ejemplo que posteaste,

#apDiv1 {
position:absolute;
left:364px;
top:442px;
width:293px;
height:244px;
z-index:1;
background-color: #FF0000;
}

Esa capa aparece donde debería en todos los Navegadores, cual es el punto?


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #8 (permalink)  
Antiguo 02/11/2010, 12:59
 
Fecha de Ingreso: marzo-2010
Mensajes: 82
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Movimiento de capas absolutas

emprear : la verdad que una cosa sencilla como es insertar una simple div absoluta es una tarea engorrosa ,pues no logro entenderlo .en efecto ,ese es el código de la capa pero a mi por lo menos si que me aparece movida sobre todo en I.E cuando la veo en local .Tambien he oido que hay gente que le pasa a menudo con capas y el problema en la mayoria de los casos es xque la capa contenedora debe de estar en posicion relativa pero probando con eso tampoco me va.No se ..en mi caso personal supongo que intentare prescindir de las capas AP a no ser que sea para cosas muy específicas y controlando la posicion al maximo en todos los navegadores porque o hay algo que hago mal y aun no lo controlo o no logro explicarlo.....en cambio ,con las tablas me siento mucho más cómodo....
  #9 (permalink)  
Antiguo 02/11/2010, 13:39
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Movimiento de capas absolutas

Angel71:


Te recomiendo el método de ensayo-error


Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >
  4. <title>Capas absolutas</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. <!--
  8.  
  9. /* primero un reset sencillo para eliminar
  10. pequeñas diferencias en los márgenes y paddings por defecto
  11. de los distintos browsers */
  12. html, body, div {
  13. margin: 0px;
  14. padding: 0px;
  15. }
  16.  
  17. /* ahora 2 capas */
  18. #capa1 {
  19. position:absolute;
  20. left:0px;
  21. top:0px;
  22. width:293px;
  23. height:244px;
  24. z-index:1;
  25. background-color: green;
  26. }
  27.  
  28. #capa2 {
  29. position:absolute;
  30. left:364px;
  31. top:342px;
  32. width:293px;
  33. height:244px;
  34. z-index:100;
  35. background-color: red;
  36. }
  37.  
  38. /* cada capa debe llevar un id único
  39. y en el caso de que las superpongas
  40. a mayor z-index más por encima de las otras
  41. estará una capa. Dales tambien diferentes colores
  42. de fondo para experimentar
  43. */
  44.  
  45. -->
  46.  
  47. </head>
  48. <!-- siempre pone un contenido dentro de las capas -->
  49. <div id="capa1">contenido capa 1</div>
  50. <div id="capa2">contenido capa 2</div>
  51. </body>
  52. </html>


comienza con eso muy simple y comparalo en IE y otro navegador, para ver si hay
diferencias. Luego modifica los top y left para apreciar los cambios, finalmente agrega más capas. Y juega con los distintos valores. y trabala con un Editor de texto...block de notas si no tenes uno un poco más avanzado

El css es a veces más intuición que otra cosa


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #10 (permalink)  
Antiguo 03/11/2010, 09:42
 
Fecha de Ingreso: marzo-2010
Mensajes: 82
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Movimiento de capas absolutas

Muy bien gracias Probaré a ver qué tal...
  #11 (permalink)  
Antiguo 03/11/2010, 10:52
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Movimiento de capas absolutas

@Angel71, No quiero ser el malo del paseo pero muchas veces es mejor aprender por nuestra cuenta como realizar o como funciona.

Si es bien al caso te explicare por si no haz entendido o no sabés:

Una capa Absoluta se comporta como una capa flotante, que si le das un tamaño en top, left, right o bottom se comportara a través de la pantalla de su computador, cuando una capa Absoluta esta dentro de una capa Relativa es decir:

Cita:
<div id="contenedor">
<div id="capaAbsoluta">
</div>
</div>
CSS:

Cita:
#contenedor{width:960px; margin:0 auto;}
#capaAbsoluta{background:#000; width:200px; height:200px; position:absolute; bottom:0; right:10px;}
El anterior código la capa Absoluta estara flotando pegado abajo de tu pantalla, y 10px de espacio al lado izquierdo de tu pantalla.

Para que la capa Absoluta se comporte por medio de un contenedor, a la capa padre o contenedora es decir en este caso el div contenedor hay que colocarte position:relative, es decir:

Cita:
<div id="contenedor">
<div id="capaAbsoluta">
</div>
</div>
CSS:

Cita:
#contenedor{width:960px; margin:0 auto; position:relative;}
#capaAbsoluta{background:#000; width:200px; height:200px; position:absolute; bottom:0; right:10px;}
Ahora la capa Absoluta flotara pegado abajo de tu contenedor y 10px de espacio del contenedor.

Si tienes dudas postea!

Saludos!
  #12 (permalink)  
Antiguo 04/11/2010, 11:23
Avatar de daidalos  
Fecha de Ingreso: enero-2005
Mensajes: 437
Antigüedad: 12 años, 10 meses
Puntos: 7
Respuesta: Movimiento de capas absolutas

Es muy probable que el problema sea el tipo de bloque que usas, poner un objeto padre con position relative solo funciona en objetos tipo block, no en objetos tipo table; es decir que un <table> <tr> <td> con relative no funciona como contenedor de un <div> absolute por que la etiqueta <td> tiene display: cell

hay dos soluciones, la facil es meter dentro del <td> un <div> y al <div> meterle el absolute

la que puede generar comportamientos raros es darle al <td> display: block

en CSS los objetos abosolutos deben tener left o right, top o bottom

Etiquetas: capas, movimiento
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 22:22.