Re: [Ovillo] Espacio despues del pie.
Deberías probarlo, porque no funciona como se espera, sobre todo en Opera 8.5. El 'overflow: hidden' en HTML no le gusta. Lástima. Tampoco agrada mucho el 'height: 100%' en #container para FF y Opera Ya pensé yo en utilizar el child selector (a mis ojos no deja de ser un hack, aunque hay que reconocer que tiene más "posibilidades" de futuro) para evitar el Star Hack, pero como muy bien señalas, el elemento HTML no es hijo de nadie (hasta que IE reconozca el child selector, que entonces será hijo de *, xD), con lo cual eliminé esta posibilidad. Se puede, de todas maneras, emplear otro truco consistente en utilizar :first-child en el elemento HTML que, de nuevo, solo ven los navegadores. Pero insisto, por más que obtenga lo que quiero con artimañas más o menos estándares, para mi no dejan de ser eso, artimañas. En un futuro en el que IE respete todo como debe (JAJAJA) es posible que la página se siga visualizando correctamente sin necesidad de modificar el CSS utilizando estas artimañas pero también es posible que no. Solo el tiempo lo dirá. En fin, como no quiero dejar las cosas a medias, y para todos los amantes de lo "correcto", ahí va la propuesta sin el Star Hack. html { height: 100%; overflow: hidden; } html:first-child { overflow: inherit; } body { height: 100%; overflow: auto; } #container { height: 100%; min-height: 100%; padding-bottom: 30px; } body>#container { height: auto; } #footer { bottom: 0; position: absolute; } #container>#footer { position: fixed; } Un saludo, David Merino. On 12/20/05, Martin Szyszlican <[EMAIL PROTECTED]> wrote: > > Maikel Naigt wrote: > > >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 */ > > > Casi un tutorial lo tuyo Maikel, felicitaciones. > > Dejame crear la version sin hacks, que sería asi: > > Aca aplico la modificacion del scroll directamente a todos los > navegadores, porque el sistema del child selector no funciona con "html" > porque en los navegadores standard, html no es hijo de nada. Igualmente > funcionaría de forma correcta. > > html { > height: 100%; > overflow: hidden; > } > body { > height: 100%; > overflow: auto; > } > > #container { > height: 100%; > padding-bottom: 30px; > } > > #footer { > bottom: 0; > position: absolute; > } > > /* uso un child selector, que IE no entiende, pero el resto >si para aplicar las propiedades correctas de CSS */ > body > #container { > min-height: 100%; > } > > body > #footer { > position: fixed; > } > > Voilà ... CSS válido, se ve bien en IE, en los demás*, y no tiene Hacks! > > > * No hay garantías en realidad, no lo probé. > > -- > Martin Szyszlican > www.y.net.ar > > > > > > > > ___ > 1GB gratis, Antivirus y Antispam > Correo Yahoo!, el mejor correo web del mundo > http://correo.yahoo.com.ar > > ___ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > 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 Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Espacio despues del pie.
On 12/20/05, Santiago Flores <[EMAIL PROTECTED]> wrote: > > yo lo veo muy bien en iexploer, opera, firefox y flock > > en IE le veo un pixel abajo que sobra. pero funciona. ¿Has eliminado el 'float: left' de #footer? Un saludo, David Merino. gracias por el tutorial. > > > El 20/12/05, Robhert<[EMAIL PROTECTED]> escribió: > > Hola Martin, > > > > Acabo de probarlo y funciona perfectamente en IE, pero no en Firefox. > > > > A ver si le das una ojeada ;) > > > > Saludos. > > > > El día 20/12/05, Martin Szyszlican <[EMAIL PROTECTED]> escribió: > > > > > > Maikel Naigt wrote: > > > > > > >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 */ > > > > > > > Casi un tutorial lo tuyo Maikel, felicitaciones. > > > > > > Dejame crear la version sin hacks, que sería asi: > > > > > > Aca aplico la modificacion del scroll directamente a todos los > > > navegadores, porque el sistema del child selector no funciona con > "html" > > > porque en los navegadores standard, html no es hijo de nada. > Igualmente > > > funcionaría de forma correcta. > > > > > > html { > > > height: 100%; > > > overflow: hidden; > > > } > > > body { > > > height: 100%; > > > overflow: auto; > > > } > > > > > > #container { > > > height: 100%; > > > padding-bottom: 30px; > > > } > > > > > > #footer { > > > bottom: 0; > > > position: absolute; > > > } > > > > > > /* uso un child selector, que IE no entiende, pero el resto > > >si para aplicar las propiedades correctas de CSS */ > > > body > #container { > > > min-height: 100%; > > > } > > > > > > body > #footer { > > > position: fixed; > > > } > > > > > > Voilà ... CSS válido, se ve bien en IE, en los demás*, y no tiene > Hacks! > > > > > > > > > * No hay garantías en realidad, no lo probé. > > > > > > -- > > > Martin Szyszlican > > > www.y.net.ar > > > > > > > > > > > > > > > > > > > > > > > > ___ > > > 1GB gratis, Antivirus y Antispam > > > Correo Yahoo!, el mejor correo web del mundo > > > http://correo.yahoo.com.ar > > > > > > ___ > > > Lista de distribución Ovillo > > > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > > > 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 Ovillo@lists.ovillo.org > > 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 Ovillo@lists.ovillo.org > 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 Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Espacio despues del pie.
yo lo veo muy bien en iexploer, opera, firefox y flock en IE le veo un pixel abajo que sobra. pero funciona. gracias por el tutorial. El 20/12/05, Robhert<[EMAIL PROTECTED]> escribió: > Hola Martin, > > Acabo de probarlo y funciona perfectamente en IE, pero no en Firefox. > > A ver si le das una ojeada ;) > > Saludos. > > El día 20/12/05, Martin Szyszlican <[EMAIL PROTECTED]> escribió: > > > > Maikel Naigt wrote: > > > > >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 */ > > > > > Casi un tutorial lo tuyo Maikel, felicitaciones. > > > > Dejame crear la version sin hacks, que sería asi: > > > > Aca aplico la modificacion del scroll directamente a todos los > > navegadores, porque el sistema del child selector no funciona con "html" > > porque en los navegadores standard, html no es hijo de nada. Igualmente > > funcionaría de forma correcta. > > > > html { > > height: 100%; > > overflow: hidden; > > } > > body { > > height: 100%; > > overflow: auto; > > } > > > > #container { > > height: 100%; > > padding-bottom: 30px; > > } > > > > #footer { > > bottom: 0; > > position: absolute; > > } > > > > /* uso un child selector, que IE no entiende, pero el resto > >si para aplicar las propiedades correctas de CSS */ > > body > #container { > > min-height: 100%; > > } > > > > body > #footer { > > position: fixed; > > } > > > > Voilà ... CSS válido, se ve bien en IE, en los demás*, y no tiene Hacks! > > > > > > * No hay garantías en realidad, no lo probé. > > > > -- > > Martin Szyszlican > > www.y.net.ar > > > > > > > > > > > > > > > > ___ > > 1GB gratis, Antivirus y Antispam > > Correo Yahoo!, el mejor correo web del mundo > > http://correo.yahoo.com.ar > > > > ___ > > Lista de distribución Ovillo > > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > > 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 Ovillo@lists.ovillo.org > 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 Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Espacio despues del pie.
Hola Martin, Acabo de probarlo y funciona perfectamente en IE, pero no en Firefox. A ver si le das una ojeada ;) Saludos. El día 20/12/05, Martin Szyszlican <[EMAIL PROTECTED]> escribió: > > Maikel Naigt wrote: > > >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 */ > > > Casi un tutorial lo tuyo Maikel, felicitaciones. > > Dejame crear la version sin hacks, que sería asi: > > Aca aplico la modificacion del scroll directamente a todos los > navegadores, porque el sistema del child selector no funciona con "html" > porque en los navegadores standard, html no es hijo de nada. Igualmente > funcionaría de forma correcta. > > html { > height: 100%; > overflow: hidden; > } > body { > height: 100%; > overflow: auto; > } > > #container { > height: 100%; > padding-bottom: 30px; > } > > #footer { > bottom: 0; > position: absolute; > } > > /* uso un child selector, que IE no entiende, pero el resto >si para aplicar las propiedades correctas de CSS */ > body > #container { > min-height: 100%; > } > > body > #footer { > position: fixed; > } > > Voilà ... CSS válido, se ve bien en IE, en los demás*, y no tiene Hacks! > > > * No hay garantías en realidad, no lo probé. > > -- > Martin Szyszlican > www.y.net.ar > > > > > > > > ___ > 1GB gratis, Antivirus y Antispam > Correo Yahoo!, el mejor correo web del mundo > http://correo.yahoo.com.ar > > ___ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > 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 Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Espacio despues del pie.
Maikel Naigt wrote: 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 */ Casi un tutorial lo tuyo Maikel, felicitaciones. Dejame crear la version sin hacks, que sería asi: Aca aplico la modificacion del scroll directamente a todos los navegadores, porque el sistema del child selector no funciona con "html" porque en los navegadores standard, html no es hijo de nada. Igualmente funcionaría de forma correcta. html { height: 100%; overflow: hidden; } body { height: 100%; overflow: auto; } #container { height: 100%; padding-bottom: 30px; } #footer { bottom: 0; position: absolute; } /* uso un child selector, que IE no entiende, pero el resto si para aplicar las propiedades correctas de CSS */ body > #container { min-height: 100%; } body > #footer { position: fixed; } Voilà ... CSS válido, se ve bien en IE, en los demás*, y no tiene Hacks! * No hay garantías en realidad, no lo probé. -- Martin Szyszlican www.y.net.ar ___ 1GB gratis, Antivirus y Antispam Correo Yahoo!, el mejor correo web del mundo http://correo.yahoo.com.ar ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Espacio despues del pie.
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 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
Re: [Ovillo] Espacio despues del pie.
David, eres un crack! Qué respuesta tan currada! Gracias, aunque no fuera para mi. - Original Message - From: "Maikel Naigt" <[EMAIL PROTECTED]> To: "Ovillo, la lista de CSS en castellano" Sent: Tuesday, December 20, 2005 11:07 AM Subject: Re: [Ovillo] Espacio despues del pie. 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 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
Re: [Ovillo] Espacio despues del pie.
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 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 */ * ht
Re: [Ovillo] Espacio despues del pie.
Talves con un margin-bottom: 0px; Saludo, DJ-Dom El día 20/12/05, DJ-Dom <[EMAIL PROTECTED]> escribió: > > No he visto u float:bottom, :D > > Pero seguro es por algún salto . , o ... > > > Revisa el CSS de > > > > Saludo, > DJ-Dom > > > El día 20/12/05, Robhert <[EMAIL PROTECTED]> escribió: > > > > 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 Ovillo@lists.ovillo.org > > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > > http://ovillo.org/mailman/listinfo/ovillo > > > > > > -- > www.dj-dom.net > [EMAIL PROTECTED] -- www.dj-dom.net [EMAIL PROTECTED] ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Espacio despues del pie.
No he visto u float:bottom, :D Pero seguro es por algún salto . , o ... Revisa el CSS de Saludo, DJ-Dom El día 20/12/05, Robhert <[EMAIL PROTECTED]> escribió: > > 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 Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://ovillo.org/mailman/listinfo/ovillo > -- www.dj-dom.net [EMAIL PROTECTED] ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
[Ovillo] Espacio despues del pie.
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 Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo