problema con capas que se superponen

mrgubu · #1 (**permalink**) 09/06/2002, 05:34

¡Hola amigos! Estoy intentando reconvertir las <table> de mi web en <div> para controlarlas con más facilidad desde mi hoja de estilos. Pero tengo un problemilla para culminar esta reconversión, porque una capa se superpone con otras y no se como solucionarlo.

En esta página (<a href='ir.asp?http://www27.brinkster.com/granadalinks/bloques.htm' target='_blank'>http://www27.brinkster.com/granadalinks/...</a>) podéis ver en la práctica el problema que planteo: El último <div> (piedepágina) se superpone con el del cuerpoprincipal.

El código html de la web está simplificado al máximo, a ver si podéis echarle un vistazo y sacarme del pozo en que estoy metido ya varios días.

¡Estoy desesperado, ayudadme por favor, no logro solucionar el problema a pesar de que no creo que sea muy difícil de resolver!

Graciassssssssssss.

<a href="http://www27.brinkster.com/granadalinks/"><img border="0" src="http://www.geocities.com/granadalinks/ban01.gif" width="468" height="60"></a>

Love_Uca · #2 (**permalink**) 09/06/2002, 06:16

Hola compañero.No te preocupes, si lees detenidamente lo que te escribo tus problemas deberían solventarase.
Tu problema reside en el posicionamiento que estás utilizando.
La propiedadad "position" puede ser 'absolute','relative' y 'fixed'.
Lo que nos importa ahora son relative y absolute.
La posición que le damos a un objeto posicionado como absolute se toma a partir de su objeto contenedor. Te poondré un ej.
Imagina que tienes un div que engloba a otro.
<DIV style="position:relative;width:200px;height:2 00px;">
y dentro otro DIV pero con position:absolute.Pues esta última se posicionará a partir de su objeto contenedor, es decir el div puesto arriba.
<DIV style="position:absolute;width:100px"&gt ;
hola
</DIV>
</DIV>
Para que lo veas mas claro, los objetos posicionados con absolute se posicionan a partir de su objeto contenedor(Cuando no hay objetos contenedor, éste es cuerpo de la página), en cambio cuando lo haces con relative, los objetos se posicionan a partir del flujo normal de la página. Esto significa que si tienes colocada una imagen en la página y colocas un div con position relative, la posicion de este dependerá de la imagen, osea, que nunca se superpondrá.
Con lo que debes tener cuidado es con position:absolute, ya q no tendrá en cuenta el flujo normal de la página y podrán superpponerse sobre otros objetos y elementos absolute.
Si lo que quieres es que el pie no se sobreponga sobre el cuerpo, simplemente tienes q ponerle al cuerpo un posicionado relative y al pie un posicionado absoluto.
Si no has entendido algo... pregunta, pq no se si me he explicado muyy bien

Un saludo

Val Muñoz de Bustillo.<BR>
Todo sobre DHTML y javascript en <A HREF="http://www.iespana.es/topscripts">TopScripts</A>

mrgubu · #3 (**permalink**) 09/06/2002, 13:07

Gracias Love_uca, por tu respuesta. Supongo que lo que explicas es la teoría, porque en la práctica no funciona. Haz la prueba, copia el código de la página y modificas los parámetros de #piedepagina y verás como no funciona, ni con absolute ni con relative. :(

He intentado muchas otras combinaciones y no consigo solucionarlo.

.

Love_Uca · #4 (**permalink**) 09/06/2002, 13:27

Siento contradecirte amigo, pero si cambias el valor de position en cuerpoprincipal y en cuerpoprincipal2 a relative y pones el del pie de página a absolute, verás como deja de superponerse.
Un saludo

Val Muñoz de Bustillo.<BR>
Todo sobre DHTML y javascript en <A HREF="http://www.iespana.es/topscripts">TopScripts</A>

mrgubu · #5 (**permalink**) 09/06/2002, 18:28

Love_Uca supongo que llevas razón...... He hecho algunas pruebas en la dirección que me indicas y el pie de página ha quedado bien :) pero..... ¡¡ahora el bloque que se descojona es el menú derecho!! :( Mira en este nuevo enlace como quedan los bloques <div> ahora:
<a href='ir.asp?http://www27.brinkster.com/granadalinks/bloques2.htm' target='_blank'>http://www27.brinkster.com/granadalinks/...</a>

He hecho tantos cambios que ya no sé que he cambiado y que no, pero no consigo terminar de solucionarlo. Lo que es seguro es que el menu derecho no se posisiona en su sitio ni con absolute ni con relative.

¡Necesito una ayudita más porfaaaaaaa!

Love_Uca · #6 (**permalink**) 10/06/2002, 04:47

Tienes razón, se descoloca el menú, así que me he hecho un modelo parecido al de la página un poco simplificado para que lo veas bien. Lo importante es que entiendas el funcionamiento, y luego con tus propios conocimientos te hagas uno nuevo, sino, va a ser peor. Aquí te lo pongo. Si tienes alguna duda con mi código dímelo y te la aclaro.

<STYLE type=text/css>BODY {
BACKGROUND-COLOR: #000000; COLOR: #000000; MARGIN-LEFT: 5px; MARGIN-TOP: 5px
}
#cabecera {
BACKGROUND-COLOR: #cccccc; HEIGHT: 60px; WIDTH: 710px;POSITION:relative;
}
#anchocuerpoprincipal {
HEIGHT: 135px; MARGIN-BOTTOM: 5px; MARGIN-TOP: 5px; WIDTH: 710px; BACKGROUND-COLOR: #FFFFFF;position:relative;
}
#cuerpoprincipal {
BACKGROUND-COLOR: #000000;color:#ffffff; POSITION: absolute;margin-top:10px;width:400px;left:155px;
}
#menuizq {
BACKGROUND-COLOR: #ff3366; HEIGHT: 60px; POSITION: absolute; WIDTH: 152px;text-align:left
}
#celdaprincipal {
BACKGROUND-IMAGE: url(azualhpeq2.gif); BORDER-BOTTOM: 10px; BORDER-LEFT: 10px; BORDER-RIGHT: 10px; BORDER-TOP: 10px; LEFT: 157px; POSITION: relative; WIDTH: 408px
}
#celdaprincipal2 {
BACKGROUND-COLOR: #00ff00; MARGIN: 10px
}
#menudch {
BACKGROUND-COLOR: #0033cc; HEIGHT: 40px; POSITION: absolute; RIGHT: 0px; WIDTH: 140px
}
#piedepagina {
BACKGROUND-COLOR: #ffcc00; HEIGHT: 60px; MARGIN-TOP: 0px; POSITION: relative; WIDTH: 710px
}
</STYLE>

<META content="MSHTML 5.00.2614.3500" name=GENERATOR></HEAD>
<BODY>
<DIV id=cabecera>Cabecera </DIV>
<DIV id=anchocuerpoprincipal>
<DIV id=menuizq>Menu izquierdo <BR><BR>contenido....... <BR><BR>contenido.......</DIV>
<DIV id=cuerpoprincipal>Este es el cuerpo principal</DIV>
<DIV id=menudch>Menu derecha <BR><BR>contenido.......<BR>< BR>contenido....... </DIV>
</DIV>
<DIV id=piedepagina>Piedepágina </DIV>
Un saludo

Val Muñoz de Bustillo.<BR>
Todo sobre DHTML y javascript en <A HREF="http://www.iespana.es/topscripts">TopScripts</A>

mrgubu · #7 (**permalink**) 11/06/2002, 16:11

Love_uca, ante todo muchas gracias por el interés que te has tomado en intentar solucionar este problema, que yo creo que es bastante interesante y práctico.

La solución que propones sigue fallando cuando se alarga el contenido de las capas del cuerpo principal (menu izq, celda principal, menu dch).

En este nuevo enlace (<a href='ir.asp?http://www27.brinkster.com/granadalinks/bloques3.htm' target='_blank'>http://www27.brinkster.com/granadalinks/...</a>) he puesto el último código que proponías, más simplificado aún, para que pueda visulizarse claramente.

¿No hay manera de conseguir que el pie de página se ajuste al cuerpo principal automáticamente, es decir, conforme vayan aumentando los contenidos de cualquiera de los tres bloques de ese cuerpo principal?
Porque una solución posible (pero no válida en la práctica por el coñazo que supondría) es reajustar el height del cuerpo principal conforme se inserten contenidos y se aumente cualquiera de los tres bloques que lo componen.

No sé si me explico: hay que conseguir que el pie de página sea empujado hacia abajo automáticamente por cualquiera de los tres bloques del cuerpo principal

En todo caso, hay que ver lo jodío que es esto de los <div>, es más complicado que cagar de pie

, ahora entiendo por qué la gran mayoría de los sitios continúan con los <table>.

Bueno, a ver si terminamos de sacar este tema adelante. ;)

Love_Uca · #8 (**permalink**) 11/06/2002, 18:41

Hola amigo.
En primer lugar, tienes razón, es mucho más dificil al principio controlar las capas que las tablas... pero luego dan muchas satisfacciones :D. Mi página esta echa casi por entero con capas, y eso me permite hacer cosas q no puedo hacer con las tablas.
Bueno, yendo al problema q nos ocupa:
El principal problema es q tu no puedes hacer una capa con valores como height:100px o width:400px y esperar que se acomoden a las otras capas... estos son valores absolutos.
Para conseguir el efecto que tu quieres, tienes que utilizar valores porcentuales. He cogido el codigo que me has dado y he hecho algunos cambios para que veas lo que te digo.
Debes tener en cuenta que a pesar de los valores que tu le des si el contenido de la capa se ve desbordado (escribes más de lo que el tamaño te permite) entra en juego la propiedad overflow, utilizala como más te convenga (visible, hidden, auto, etc). Aqui te pongo mis estilos:
<STYLE type=text/css>BODY {
MARGIN-TOP: 5px; MARGIN-LEFT: 5px; COLOR: #000000; BACKGROUND-COLOR: #339933
}
#cabecera {
WIDTH: 710px; POSITION: relative; HEIGHT: 60px; BACKGROUND-COLOR: #cccccc
}
#cuerpoprincipal {
MARGIN-TOP: 5px; MARGIN-BOTTOM: 5px; WIDTH: 710px; height:400px;POSITION: relative; BACKGROUND-COLOR: #ffffff
}
#menuizq {
WIDTH: 152px; POSITION: absolute; HEIGHT: 100%; BACKGROUND-COLOR: #ff3366
}
#celdaprincipal {
LEFT: 157px; WIDTH: 408px; HEIGHT: 100%; overflow:hidden;COLOR: #ffffff; POSITION: absolute; BACKGROUND-COLOR: #000000
}
#menudch {
RIGHT: 0px; WIDTH: 140px; POSITION: absolute; HEIGHT: 100%; BACKGROUND-COLOR: #0033cc
}
#piedepagina {
MARGIN-TOP: 0px; WIDTH: 710px; POSITION: relative; HEIGHT: 60px; BACKGROUND-COLOR: #ffcc00
}
fds {
overflow: auto;
}
</STYLE>
Ya me contarás, un saludo.

Todo sobre DHTML y javascript en <A HREF="http://www.iespana.es/topscripts">TopScripts</A><p><cite>Si el orgulloso se diese cuenta de lo ridículo que queda ante los que le conocen, por orgullo sería más humilde</cite>

Val Muñoz de Bustillo

mrgubu · #9 (**permalink**) 12/06/2002, 17:02

Love_uca la solución debe andar por ahi por donde tu dices, pero yo no soy capaz de encontrarla. El último código que has enviado sigue teniendo un height 400px en #cuerpoprincipal, y por tanto no se autoajusta.

He hecho varias pruebas con el tema del alto porcentual y variando el overflow, pero no consigo avanzar.

Lo más lógico en mi opinión, sobre la base
del último código tuyo, es poner el height de #menuderecha y #menuizquierda en auto, y jugar a probar distintas combinaciones con el height y el overflow del #cuerpoprincipal y #celdaprincipal. Las que yo he probado no funcionan para conseguir el objetivo: que el pie de página se adapte automáticamente a los bloques superiores.

Love_Uca · #10 (**permalink**) 13/06/2002, 04:58

Llegado este momento... he de decirte que no sé exactamente que es lo que busca, el código q te puse consigue que no se superpongan las capas, si lo que tu quieres es que sin indicarles la altura se vayan adaptando unas a otras... tendré que pensarlo un poco más, pero yo creo que lo más lógico es que pongas el cuerpo principal con un height de 100%, para que tenga el tamaño de la página, y el pie de página quede realmente como un pie de página.
De todas maneras, si quieres que al cuerpo principal le afecten las otras tres capas, éstas deben ser relativas, no absolutas, ya que las capas absolutas no tienen ningún efecto sobre el resto de elementos. Sería algo así:
<STYLE type=text/css>

BODY {
BACKGROUND-COLOR: #339933;
COLOR: #000000;
MARGIN-LEFT: 5px;
MARGIN-TOP: 5px
}

#cabecera {
POSITION:relative;
BACKGROUND-COLOR: #cccccc;
HEIGHT: 60px;
WIDTH: 710px;
}

#cuerpoprincipal {
position:relative;
HEIGHT: 135px;
MARGIN-BOTTOM: 5px;
MARGIN-TOP: 5px;
WIDTH: 710px;
BACKGROUND-COLOR: #FFFFFF;
}

#menuizq {
POSITION: relative;
float:left;
BACKGROUND-COLOR: #ff3366;
HEIGHT: 60px;
WIDTH: 152px;
}

#celdaprincipal {POSITION: relative;
BACKGROUND-COLOR: #000000;
float:left;
color:#ffffff;
width:408px;
left:0px;
}

#menudch {POSITION: relative;
BACKGROUND-COLOR: #0033cc;
HEIGHT: 40px;
RIGHT: 0px;
WIDTH: 140px;
}
#piedepagina {
POSITION: relative;
BACKGROUND-COLOR: #ffcc00;
HEIGHT: 60px;
MARGIN-TOP: 0px;
WIDTH: 710px;
}
</STYLE>
Un saludo

<hr>Todo sobre DHTML y javascript en <A HREF="http://www.iespana.es/topscripts">TopScripts</A><p><cite>Si el orgulloso se diese cuenta de lo ridículo que queda ante los que le conocen, por orgullo sería más humilde</cite>
Val Muñoz de Bustillo<hr>

mrgubu · #11 (**permalink**) 14/06/2002, 17:51

¡Love_uca eres un fenómeno! ¡Eso es exactamente lo que quería!. Ya andaba yo frustrado pensando que no lo iba a conseguir y tendría que seguir apañándome con las jodidas tablas HTML, pero gracias a tu insistencia y dedicación has solucionado mi problema, que creo es el de muchos, los interesados en tener el control total de la estructura de un sitio desde la hoja CSS.
¡Muchísimas gracias por tu ayuda!

He hecho un par de reajustes a tu último código para que la separación entre todos los bloques sea de 5 pixeles y todo quede perfectamente ajustado a los límites de la página. Lo principal ya lo has hecho tú: conseguir que los bloques se autoajusten a su contenido y que no se superponga el pie de página sobre el cuerpo principal.

Mientras descorcho una botella de champán y me como unas ostras, aquí os dejo el enlace "refinitivo" (<a href='ir.asp?http://www27.brinkster.com/granadalinks/bloques6.htm' target='_blank'>http://www27.brinkster.com/granadalinks/...</a>) . El que quiera, que lo aproveche, yo creo que es superútil.

Love_Uca · #12 (**permalink**) 15/06/2002, 12:51

Me alegro de que al fin hayamos dado con lo que buscabas!!!
Hasta otra compañero.

Saludos

<hr>Todo sobre DHTML y javascript en <A HREF="http://www.iespana.es/topscripts">TopScripts</A><p><cite>Si el orgulloso se diese cuenta de lo ridículo que queda ante los que le conocen, por orgullo sería más humilde</cite>
Val Muñoz de Bustillo<hr>