Foros del Web » Creando para Internet » CSS »

Ayuda con posicionamiento de capas con CSS

Estas en el tema de Ayuda con posicionamiento de capas con CSS en el foro de CSS en Foros del Web. He planteado esta misma duda en Barrapunto , pero no me han sabido dar una solución satisfactoria, así que vengo aquí a preguntar lo mismo, ...
  #1 (permalink)  
Antiguo 12/04/2006, 16:51
Avatar de -Defero-
Colaborador
 
Fecha de Ingreso: julio-2004
Ubicación: Guipúzcoa
Mensajes: 4.777
Antigüedad: 13 años, 5 meses
Puntos: 76
Pregunta Ayuda con posicionamiento de capas con CSS

He planteado esta misma duda en Barrapunto, pero no me han sabido dar una solución satisfactoria, así que vengo aquí a preguntar lo mismo, a ver si alguien me puede ayudar.

Empecemos por definir la estructura de la parte del documento que se me atasca. Tenemos una capa (A) que sirve de "contenedor", y dentro de esa capa hay dos elementos: algunos párrafos de texto (B), y una imagen con un pie de foto (C). En el HTML el texto (B) tiene que ir antes de la imagen (C), pero con la hoja de estilo la imagen (C) debe quedar al lado derecho del texto (B). Así que empiezo por marcar las tres capas, A, B, y C, sobre las que luego aplicaré el CSS:

<div id="A">
<div id="B">BBBBB BBBBBB BBBBBBb BBBBBBB</div>
<div id="C">CCCCC CCCCC CCCCCc CCCCCC</div>
</div>

Bien, empecemos. Lo primero que se me ocurre es ponerle un float: right a la capa C. Lo cual me da un resultado nefasto: dicha capa sale del marco de la capa A, y se situa inmediatamente después, en el lado derecho.

Después se me ha ocurrido ponerle a la capa B un float: left. Desastroso. La capa C se sitúa inmediatamente después de la capa B (mal), pero esta vez dentro de la capa A (bien) y en el lado izquierdo (mal).

¿Y si probamos un combinado? Le he puesto float: left a la capa B, y float: right a la capa C. Triple desastre. La capa A se contrae en la parte superior, después viene la capa B que se solapa parcialmente con la capa A, y después viene la capa C, en la parte inferior derecha.

¿Y con posiciones relativas? Pruebo a ponerle a la capa C los atributos position: relative; top: 0; right: 0, pero no sirve de nada, ya que toma como punto de partida de esas coordenadas la ubicación del último elemento, es decir, la capa B. Para poner la capa C a la misma altura que la capa B debería darle coordenadas negativas, y me es imposible calcular (por ejemplo) qué altura en pixels tendrá la capa B para poder remontarlas, ya que depende de factores tales como las fuentes de letra instaladas en el cliente, la resolución de pantalla, si se tiene la ventana maximizada... además este diseño debe servir para distintos documentos de una misma web, y al no tener todos los documentos el mismo texto, cada página necesitaría distintos atributos. Así que nada, no es una solución viable.

¿Y con posiciones absolutas? Me da que esto va a ser meterse en camisas de once varas, porque me suena que cada navegador interpreta las posiciones absolutas como le sale del orto, y me sé de uno (IEjem...) que va a montar un pifostio de antología. Pero bueno, voy a probar. Le pongo a la capa C los atributos position: absolute; top: 0; right: 0, y se sitúa en la esquina superior derecha de la capa A. Inconvenientes. Primero, que se me monta encima de la capa B; puedo reducir el ancho de la capa B para que deje sitio a la capa A, pero no quiero usar medidas absolutas, nunca me ha gustado ese truco de limitar el ancho de la web a unas medidas en concreto. Segundo, que ante de las capas A, B y C hay otros elementos de tamaño variable que me impiden usar medidas absolutas. Opción descartada.

Bien, vamos a probar algo distinto. No debería hacerlo, pero sólo por probar. Voy a hacer una pequeña modificación en el documento HTML, en vez de limitarme al documento CSS. Sé que está mal, y no me gusta tener que recurrir a esto. Pero voy a probar a poner la capa C antes de la capa B. Me fastidia, porque esto supone cambiar la semántica de la web, supone situar en una posición privilegiada una información que es de segundo nivel, sólo por motivos estéticos. Pero tengo que hacer la prueba. Bien, y una vez cambiado el orden de las capas, ¿ahora qué? ¿Esto de qué me sirve? Muy simple: ahora le pongo a la capa C el float: right que había probado antes, y esta vez el resultado es totalmente distinto. Ahora la capa C no se sitúa fuera de la capa A, sino que se sitúa donde buscaba que estuviera, en la parte superior derecha de la capa A. Y la capa B se distribuye en el resto del espacio libre dentro de la capa A. Ése es exactamente el efecto que busco. Pero, ¿cómo puedo hacerlo sin tener que poner la capa C antes de la capa B? Os pongo el código con texto incluido, para que podáis comprobarlo por vosotros mismos:

Código:
<div id="A" style="background-color: red; margin: 10px; padding: 10px; float: right">

<div id="C" style="background-color: green; margin: 10px; padding: 10px; width: 200px; color: red; float: right">
CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC 
</div> 

<div id="B" style="background-color: blue; margin: 10px; padding: 10px;">
BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB BBBBBB
</div>

</div>


Como os digo, ése es exactamente el efecto visual que busco, pero no quiero tener que cambiar el orden de las capas en el HTML para que funcione el CSS, quisiera que el contenido de la capa B fuera antes del contenido de la capa C. ¿Alguien sabe cómo puedo hacerlo?
__________________
abogado en Errenteria + procuradora en San Sebastián = equipo imparable

Última edición por -Defero-; 12/04/2006 a las 17:16
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 21:35.