MUCHAS GRACIAS MAIKEL!!!!!!!
Me acabas de enseñar a pescar aunque tendré q' practicar más y releer tu
email otra y otra vez, aunque mi sitio está como lo pensé, aun no estoy del
100% entendido. Y agradezco infinitamente tu respuesta. Muchas pero muchas
gracias.
Tuve un poblemin pero ya está solucionado. Gracias nuevamente.
PD. Un tesoro más de CSS.
El día 20/12/05, Maikel Naigt <[EMAIL PROTECTED]> escribió:
>
> Bueno, básicamente es problema de que no le indicas que el elemento
> #container ocupe "todo el alto de su contenedor [body] exceptuando el alto
> del pie #footer". Esto explicado así no vale para nada, así que te lo
> explico con manzanas que lo entenderás mejor.
>
> 1. Tenemos que lograr que #container ocupe el 100% de alto de la página
> (exceptuando los 30px que mide el #footer). Pues obviamente, necesitaremos
> añadir a #container la propiedad 'height: 100%' (exactamente tendría que
> ser
> 100%-30px pero ya sabemos que es imposible). Vemos que inicialmente no
> hace
> nada. Esto es porque un elemento escalado a porcentaje, calculará ese
> porcentaje en función de las medidas CONOCIDAS de su padre, o elemento
> contenedor. En este caso hablamos de aplicar un porcentaje en altura, y
> necesitamos que el elemento padre (BODY) tenga una altura conocida. De
> nuevo
> solo se nos ocurre aplicar al 100%, y seguimos subiendo en la jerarquía de
> contenedores padre llegando al PADRE de toda la página, que no es ni más
> ni
> menos que HTML. Afortunadamente este contenedor siempre sabe las
> dimensiones
> de su padre (el espacio que el navegador reserva para mostrar el contenido
> de las páginas web) con lo cual, al aplicar un 'height: 100%' a este,
> tendrá
> asignado automáticamente una altura conocida, propagándose ésta al BODY y
> de
> ahí al #container. Este embrollo quedaría tal que así (tendrás que
> añadirlo
> a tu hoja de estilos):
> html { height: 100%; }
> body { height: 100%; }
> #container { height: 100%; }
> 2. El #footer, al estar flotado a la izquierda se sitúa automáticamente
> bajo
> el último contenido, esto es, bajo el último DIV.blog-entry. La solución
> es
> eliminar el flotado y situarlo absolutamente en una posición fija, más
> exactamente a distancia '0' del borde inferior 'bottom: 0'.
> Lamentablemente,
> IE no entiende la propiedad 'position: fixed' que tan bien nos viene así
> que
> tendremos que arreglarlo para que IE haga lo mismo con 'position:
> absolute'.
> Como a mi me gusta que las propiedades se usen para lo que fueron
> pensadas,
> pues ponermos el 'fixed' para los navegadores y el 'absolute' para el
> otro,
> así:
> #footer { position: fixed; bottom: 0; }
> * html #footer { position: absolute; } /* Con hack para IE incluido
> */
> 3. Comprobamos que tenemos un problema en los navegadores, consistente en
> que cuando el navegador es más corto en altura que el contenido, al
> desplazar el contenido mediante la barra de desplazamiento vemos con
> horror
> que el fondo de #container simplemente no está. Ls solución está clara
> (para
> mi, que llevo dos cafés), tendremos que cambiar la propiedad 'height:
> 100%'
> por 'min-heigt: 100%'. Como IE, de nuevo, no entiende el "complejo"
> lenguaje
> CSS en toda su magnitud, tendremos que dejarle a él con su 'height: 100%'
> (afortunadamente para nosotros, obtenemos el mismo resultado que si
> aplicáramos min-height), quedando como sigue:
> #container { min-height: 100%; }
> * html #container { heiht: 100%; } /* Con hack para IE incluido */
> 4. Parece que ya está todo bien. En modo 'expandido' aparece el #footer en
> su sitio y el #container se expande hasta abajo. En modo 'contraido'
> también
> pero... ¡leñe! si hay un cacho que no se ve en la última entrada de
> #blog-entry. Evidentemente es el #footer el que lo tapa. Una solución
> rápida
> (aunque imagino que las habrá mejores) es darle un espacio interno a
> #container en la parte inferior para que el texto que contiene no lo ocupe
> y, por tanto, no quede oculto por el #footer. Como el #footer mide 30px de
> alto, con esta distancia mínimo nos será suficiente. Así quedaría el
> parchecillo:
> #container { padding-bottom: 30px; }
> (Tiene un problema secundario y es que la ventana del navegador siempre
> tendrá activa la barra de scroll vertical. Una solución más "limpia" sería
> añadir siempre un <div> vacío de 30px de alto después del último
> .blog-entry
> que tuviéramos, que sería el que quedaría oculto)
> 5. Bueno, y ahora vamos a por IE. Aquí el único problema que
> teníamos/tenemos es que la posición del #footer no está fija, con lo cual,
> aunque al abrir la página todo se vea correcto, si realizamos un scroll
> vertical en el navegador, #footer se irá hacia arriba. Bueno, ya que
> #footer
> está situado absolutamente con respecto a HTML, tendremos, obviamente, que
> evitar que HTML tenga scroll valiéndonos de la propiedad 'overflow:
> hidden'.
> Los daños colaterales son que automáticamente la página no tendrá scroll
> vertical, con lo que si la altura del navegador es menor que la del
> contenido que alberga este, aparecerá incompleto. Pensando un poco vemos
> que
> este contenido está también dentro de BODY, así que nada más sencillo que
> utilizar el scroll que nos pueda proporcionar este último mediante la
> propiedad 'overflow' poniéndola a 'scroll' (bien, excepto que nos muestra
> siempre las dos barras de scroll con el impacto estético que conlleva), o
> a
> 'auto' (mejor, así solo muestra la barra de scroll vertical cuando lo
> necesita). Esto es lo que añadimos:
> * html { overflow: hidden; } /* Con hack para IE incluido */
> * html body { overflow: auto; } /* Con hack para IE incluido */
>
> Finalmente, este es el código que hay que añadir en tu hoja de estilos
> para
> que muestre la composición como deseas, (aparte tienes que eliminar la
> propiedad 'float: left' de #footer), en IE/Win, FF/Win y Opera 8.5/Win:
>
> html { height: 100%; }
> body { height: 100%; }
> #container { min-height: 100%; padding-bottom: 30px; }
> #footer { bottom: 0; position: fixed; }
> /* Hacks para aplicar propiedades a IE unicamente */
> * html { overflow: hidden; }
> * html body { overflow: auto; }
> * html #container { height: 100%; }
> * html #footer { position: absolute; }
> /* Fin de Hack */
>
> Te planto este rollo, que seguramente me ha costado a mi más escribir que
> a
> ti leer, porque creo que dar únicamente la solución al problema sin
> explicar
> los "por qués" es un 'pan para hoy, hambre para mañana'. Lo mejor es que
> sepas el por qué del uso de las distintas propiedades en el problema y
> entonces tendrás iniciativa para modificar lo que mejor se adapte a tus
> necesidades presentes o futuras.
> Si de todas maneras, con lo leido no te aclaras, por la red de redes hay
> varios tutoriales de como alcanzar igual o similar objetivo. Pero de esta
> búsqueda ya te dejo encargado a ti ;)
>
> Un saludo, David Merino.
>
>
>
> On 12/20/05, Robhert <[EMAIL PROTECTED]> wrote:
> >
> > Hola a todos,
> >
> > Bueno mi problema es q' veo q' mi pagina tiene un espacio entre el
> footer
> > y
> > la parte inferior de la ventana del explorador cuando yo quiero q' este
> > exactamente al tope.
> >
> > Para que me entiendan mejor les dejo la web (aun esta en diseño)
> > http://robhert.nipl.net/pro/joha/index.php y quiero q' se vea asi:
> > http://robhert.nipl.net/espacio.jpg
> >
> > Agradezco de antemano vuestra ayuda.
> >
> > --
> > --------------------------------------------------------------------
> > email: robhert[at]gmail[dot]com
> > blog: www.robhert.tk
> > website: www.dropsdesign.tk
> > _______________________________________________
> > 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://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://ovillo.org/mailman/listinfo/ovillo
>
--
--------------------------------------------------------------------
email: robhert[at]gmail[dot]com
blog: www.robhert.tk
website: www.dropsdesign.tk
_______________________________________________
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://ovillo.org/mailman/listinfo/ovillo
