Ante todo disculpen, aprete una tecla de acceso directo cuando estaba
escribiendo y se me fue el correo sin terminarlo.
Finalmente y después de darme unos cuantos cabezazos he logrado hacer funcionar
ambas cosas. Elimine todo el código y comencé de cero. Primero con la técnica
"footerStickAlt " y luego poniendo dentro los elementos flotantes y poniendole
al terminar un "clear:both". Algo así como esto:
HTML:
***********************************
<div id="columna_izquierda"> Contenido </div>
<div id="columna_derecha"> Contenido </div>
<div class="clear"> </div>
CSS:
***********************************
#columna_izquierda { float: left; width: 829px; }
#columna_derecha { float: left; width: 160px; }
.clear { clear:both: line-height:1px; }
Y ya se resolvió el problema.
>> Sobre lo ultimo que enviaste, lo probe y el pie se va muy al fondo, pero si
>> cambiando un poco las propiedades a contenedor_pie si funciona:
Se que se va un poco abajo, ya estoy trabajando en posicionarlo correctamente.
Muchas gracias por todo
Salu2
--
ReynierPM
5to Ing. Informática
Maestro de poco, aprendiz de mucho
-----Mensaje original-----
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] En nombre de Christian Roque
Geldres
Enviado el: jueves, 23 de noviembre de 2006 11:50 am
Para: 'Ovillo, la lista de CSS en castellano'
Asunto: Re: [Ovillo] Pegar DIV al bottom de la ventana
Hola Reynier:
Esto fue lo que indicaste en tu mail anterior:
"Hagan una simple prueba y pongale un texto inmenso a "columna_izquierda" y a
"columna_derecha" y en ambos casos diferentes, o sea que el tamaño del texto
del primer DIV sea menor o mayor que el del segundo. Como verán se desborda uno
de los DIV más que el otro y lo demás se mantiene igual. La lógica sería que si
el DIV "columna_derecha" o "columna_izquierda" aumentara entonces también lo
hiciera su contenedor "contenedor_centro" pero no lo está haciendo. "
La razón por la que no aumentaba era como te explique, que los elementos dentro
de "contenedor_centro" están flotados y para que se extienda debias poner un
elemento con la propiedad "clear:both" antes de cerrarlo.
La tecnica footerStickAlt es para pegar el pie de pagina al final incluso
cuando el contenido sea poco, no para extender contenedores.
Sobre lo ultimo que enviaste, lo probe y el pie se va muy al fondo, pero si
cambiando un poco las propiedades a contenedor_pie si funciona:
#contenedor_pie {
/*position:relative; */
height: 55px;
margin-top:-55px;
/*margin-bottom:0px; */
background-color:#600;
/*margin: 0 auto; */
width: 990px;
max-width: 990px;
text-align: left;
}
El margen superior negativo debe ser del tamaño de la altura de tu pie, y
recuerda que no existe padding negativo.
Saludos
Christian Roque Geldres
-----Mensaje original-----
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de Reynier Perez Mira
Enviado el: miércoles, 22 de noviembre de 2006 10:31
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Pegar DIV al bottom de la ventana
Ni la una ni la otra. Me explico, por más que intento hacer funcionar mi
problema haciendo uso del método footerStickAlt no lo logró. Quizás estoy
omitiendo alguna parte pero por más que busco no la encuentro. Debajo adjunto
el código. Lo otro es que le puse un elemento que tiene "clear:both"
debajo a las columnas que flotan y tampoco me expande el contenido. ¿Qué es lo
que estoy haciendo mal?
****************************************************************************
***************
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="sp" lang="sp"> <head>
<title>Footer Arghhh !!! Me tiene loco</title> <style type="text/css">
* { padding: 0; margin: 0; }
html { height: 100%; }
body { height: 100%; margin: 0px; padding: 0px; }
* html #contenedor { height: 100%; }
#contenedor { position: relative; height: 100%; margin: 0 auto; width:
990px; max-width: 990px; text-align: left; } #cabecera { width: 829px;
height: 149px; float: left; border-bottom:
1px solid #E89700; }
#login { width: 160px; height: 149px; float: left; border-bottom: 1px solid
#E89700; } #clear { clear: both; } #columna_izquierda { float: left; width:
78%; color: #000; border: 1px solid #FFA500; background-color: #E0FFFF; }
#columna_derecha { float: left; width: 21.6%; /* Aumentar a 22 */ color:
#000; border: 1px solid #FFF; background-color: #FFFACD; }
* html #contenedor_pie { padding-top: -40px; } #contenedor_pie {
position:relative; height: 55px; margin-top:-40px; margin-bottom:0px;
background-color:#600; margin: 0 auto; width: 990px;
max-width: 990px; text-align: left; }
</style>
</head>
<body>
<div id="contenedor">
<div id="contenedor_cabeza">
<div id="cabecera"> </div>
<div id="login"> </div>
</div> <!-- Contenedor de los elementos de la cabecera -->
<div id="contenedor_centro">
<div id="columna_izquierda">
<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu
simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va
esser plu simplic e regulari quam li existent Europan lingues. It va esser tam
simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va
semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que
Occidental es.</p>
</div> <!-- Contenedor columna izquierda -->
<div id="columna_derecha">Contenido de la columna derecha</div> <!--
Contenedor columna derecha -->
<div id="clear"> </div>
</div> <!-- Contenedor de los elementos centrales --> </div> <!--
Contenedor outside_footer --> <div id="contenedor_pie">Pie de pagina al
fondo</div> <!-- Contenedor de los elementos del pie de página --> </body>
</html> Pruebenlo y me dejan saber si a Uds le funcionó porque lo que es a mi
no hay forma de que me funcione.
Salu2 y gracias por todo
--
ReynierPM
5to Ing. Informática
Maestro de poco, aprendiz de mucho
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected] Puedes
modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected] Puedes
modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
