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.
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 ovillo@lists.ovillo.org
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 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
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 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á
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.
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.
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
[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
Re: [Ovillo] Espacio despues del pie.
No he visto u float:bottom, :D Pero seguro es por algún salto br /. div, o p... Revisa el CSS de div id=footer/div 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
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 br /. div, o p... Revisa el CSS de div id=footer/div 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
