como te he dicho, todo depende de si tu cabecera y pie estan en % o en px. Si estan en % lo puedes arreglar directamente en el CSS, haciendo la resta. Si estan en px solo puedes arreglarlo con javascript si y solo si el contenedor ocupa todo el alto de la pantalla.
meddle, he estado viendo lo que me has enviado con más tranquilidad y tengo algunas dudas:
1. ¿por qué eliminar el "overflow:auto"? si lo dejo evito que en IE salga el scroll por defecto y me gusta más cómo queda.
2. ¿por qué quitar el "padding-bottom" de .contenidos en lugar de dejarlo a 40px? eso lo hago para que cuando el contenido exceda las dimensiones de la pantalla y aparezca el scroll, que siga manteniendo un margen inferior.
3. cuando dices que "caja_contenidos_inicio" debería ser un id en lugar de un class, ¿te refieres a que lo declare en el css como #caja_contenidos_inicio en lugar de .caja_contenidos_inicio? y si es así, ¿por qué? no veo la diferencia entre utilizar ambas, aunque los contenidos no se muestran exactamente iguales, no sé por qué. lo mismo pasa con "contenedor_html", "menu_navegacion", "logo", "menu_opciones" y "contenidos".
4. lo del hacer las listas como listas (parece tan lógico... ;)) es cierto, pero no sé cómo hacer para que me muestre "|" a la derecha de todos los elementos del menú excepto del último, ¿lo de "last-child" funciona con todos los navegadores?
lo siento, verás que soy un poco chapas, pero ya que me he puesto lo quiero hacer bien, y sobre todo saber por qué. gracias por adelantado :)
1. ¿por qué eliminar el "overflow:auto"? si lo dejo evito que en IE salga el scroll por defecto y me gusta más cómo queda.
si la resolucion de pantalla es menor que el alto del contenido obtienes 2 scrollbars. odio dos scrollbars en un navegador, molestan y confunden. suelo hacer un ALT+F4 acto seguido.
cbp
2. ¿por qué quitar el "padding-bottom" de .contenidos en lugar de dejarlo a 40px? eso lo hago para que cuando el contenido exceda las dimensiones de la pantalla y aparezca el scroll, que siga manteniendo un margen inferior.
pues añade margin-bottom:40px;
cbp
3. cuando dices que "caja_contenidos_inicio" debería ser un id en lugar de un class, ¿te refieres a que lo declare en el css como #caja_contenidos_inicio en lugar de .caja_contenidos_inicio? y si es así, ¿por qué? no veo la diferencia entre utilizar ambas, aunque los contenidos no se muestran exactamente iguales, no sé por qué. lo mismo pasa con "contenedor_html", "menu_navegacion", "logo", "menu_opciones" y "contenidos".
Cuando digo que deberias usar id's (no solo para caja_contenidos_inicio sino muchos otros casos) es porque son los unicos elementos que tienen esa clase, por tanto se pueden considerar unicos, por tanto no debes usar class sino id. Debes cambiar el html y el css.
cbp
4. lo del hacer las listas como listas (parece tan lógico... ;)) es cierto, pero no sé cómo hacer para que me muestre "|" a la derecha de todos los elementos del menú excepto del último, ¿lo de "last-child" funciona con todos los navegadores?
ok, si quieres que IE muestre los | hazlo como lo haces. si no te importa (no pretendo ser un integrista, pero es lo mas correcto) entonces usa listas. Puedes ver como dar formato a listas en este articulo
si la resolucion de pantalla es menor que el alto del contenido obtienes 2 scrollbars. odio dos scrollbars en un navegador, molestan y confunden. suelo hacer un ALT+F4 acto seguido.
jeje, completamente de acuerdo :) lo que pasa es que he probado a dejar el "overflow:auto", habiendo quitado el "min-height:100%" de .contenidos y funciona muy bien, cuando lo pongo a 640x480, la resolución es menor que el alto del contenido y sólo me sale un scroll.
meddle
pues añade margin-bottom:40px;
si hago eso, ¿no me meterá un espacio en blanco al final en el que ni siquiera se verá el grid de fondo? no sé por qué no puedo dejar el padding-bottom, igual que hecho en top, left y right.
meddle
Cuando digo que deberias usar id's (no solo para caja_contenidos_inicio sino muchos otros casos) es porque son los unicos elementos que tienen esa clase, por tanto se pueden considerar unicos, por tanto no debes usar class sino id. Debes cambiar el html y el css.
ok, era lo que imaginaba, ahora lo cambio :)
meddle
ok, si quieres que IE muestre los | hazlo como lo haces. si no te importa (no pretendo ser un integrista, pero es lo mas correcto) entonces usa listas. Puedes ver como dar formato a listas en este articulo
voy a echar un vistazo detallado al link que me dices. y está bien lo de ser integrista, hombre, si no lo somos con nuestros proyectos personales... :)
bueno, meddle, todo marcha sobre ruedas, he seguido los consejos que me diste y esto tiene una pinta casi semi-profesional ya :)
pero oh muestios collados, oh campos de soledad, tengo un problema :( tanto en mi versión como en la que tú me enviaste, cuando los contenidos exceden el tamaño de la pantalla y aparece el scroll, el fondo deja de aparecer y los contenidos se salen por la parte inferior. esto pasa, que yo haya visto, en Mozilla y en Opera, ¿qué hacer ante tamaño inconveniente...?
confieso que no me he leido el post entero pero me vino a la cabeza que a lo mejor lo que quieras hacer es <a href="http://80.33.118.134/man/> esto:</a> y sino pues [vergüenza] :P, espero que te sirva de algo
creo que se me escaparon unas comillas antes :S, lo que te pretyendo enseñar es una capa que actua como un iframe, pero en navegadores que no soportan overflow:auto, lo que hago es dejar el tamaño del contenido, para lo que tb tengo que aumentar el tamaño del contenedor que tiene el dic con el contenido. <a href="http://80.33.118.134/man/"> esto </a>
contenedor de contenidos acepta contenerse en una contención que esté muy contenida de ver, ufff mi madre que locuras
pero, perdona por mi torpeza, ¿en qué afecta esto a mi problema? a lo mejor no me he explicado bien y te podría ayudar ver el ejemplo de lo que estoy hablando. meddle tiene el código, de ahí que se lo haya preguntado específicamente a él, pero si quieres te lo puedo hacer llegar. lo que necesito es prolongar la repetición de un fondo en un div que contiene toda la página y 650 px de ancho, independientemente de que los contenidos excedan las dimensiones de la pantalla y haya un scroll. si todo esto se resuelve con lo que me has dicho, te pido exucsas de nuevo por mi óxido mental, pero es que los lunes... ;)
se soluciona eso, pero ahora, cuando los contenidos no llegan a cubrir toda la pantalla, queda un hueco sin el fondo en la parte inferior en Mozilla, y un huequecito muy pequeño, de apenas 10px, también sin fondo, para IE y Opera :(
ah, vale vale, tranquilo, lo siento, que no quería agobiarte, si alguna vez puedes echarle un vistazo se lo echas, y si no ya me voy pegando yo, que seguro que lo saco, hombre, si esto del CSS es una chorrada... ;)
ho-ho-ho... now i have a machine... ah, no, perdón, quería decir
ho-ho-ho... ya he arreglado el problema que tenía con una idea tan genial como trapera y chapucera. bueno no, en realidad me acordé de lo que dijo meddle para hacer que 3 columnas tuvieran el mismo alto, y he hecho el fondo de 650px de ancho y lo he repetido en el eje "y", asociándolo al body en lugar de a contenedor_html como hasta ahora. no sé si será muy buena o no, pero creo que funciona en todos los navegadores :D
orange
Lo de % no me convence, ya que no es que el div:contenido se esté adaptando, es que lo hacen todos, en relación a un porcentaje ...
¿De dónde puedo sacar info sobre el .htc?
meddle
busca "behaviours css". te estoy intentando hacer un ejemplo crossbrowser. veremos.
orange
Thnks !!
Tampoco te comas mucho la olla, la cosa quiero que sea supersimple, se me ha ocurrido la chorrada viendo lo del height 100%, pero tampoco es vital
meddle
como te he dicho, todo depende de si tu cabecera y pie estan en % o en px. Si estan en % lo puedes arreglar directamente en el CSS, haciendo la resta. Si estan en px solo puedes arreglarlo con javascript si y solo si el contenedor ocupa todo el alto de la pantalla.
ejemplo con cabeceray pie en px, contenido en % - IE/Moz incorrecto
ejemplo con todo en % - IE/Moz ok, pero necesitas usar % en cabecera y pie.
ejemplo con cabeceray pie en px, contenido en % - IE/Moz correcto (editado). Pero puestos a usar js, tambien podeis simplificarlo usando el articulo que he puesto mas abajo (http://www.alistapart.com/articles/footers/).
cbp
meddle, he estado viendo lo que me has enviado con más tranquilidad y tengo algunas dudas:
1. ¿por qué eliminar el "overflow:auto"? si lo dejo evito que en IE salga el scroll por defecto y me gusta más cómo queda.
2. ¿por qué quitar el "padding-bottom" de .contenidos en lugar de dejarlo a 40px? eso lo hago para que cuando el contenido exceda las dimensiones de la pantalla y aparezca el scroll, que siga manteniendo un margen inferior.
3. cuando dices que "caja_contenidos_inicio" debería ser un id en lugar de un class, ¿te refieres a que lo declare en el css como #caja_contenidos_inicio en lugar de .caja_contenidos_inicio? y si es así, ¿por qué? no veo la diferencia entre utilizar ambas, aunque los contenidos no se muestran exactamente iguales, no sé por qué. lo mismo pasa con "contenedor_html", "menu_navegacion", "logo", "menu_opciones" y "contenidos".
4. lo del hacer las listas como listas (parece tan lógico... ;)) es cierto, pero no sé cómo hacer para que me muestre "|" a la derecha de todos los elementos del menú excepto del último, ¿lo de "last-child" funciona con todos los navegadores?
lo siento, verás que soy un poco chapas, pero ya que me he puesto lo quiero hacer bien, y sobre todo saber por qué. gracias por adelantado :)
meddle
cbp
1. ¿por qué eliminar el "overflow:auto"? si lo dejo evito que en IE salga el scroll por defecto y me gusta más cómo queda.
si la resolucion de pantalla es menor que el alto del contenido obtienes 2 scrollbars. odio dos scrollbars en un navegador, molestan y confunden. suelo hacer un ALT+F4 acto seguido.
cbp
2. ¿por qué quitar el "padding-bottom" de .contenidos en lugar de dejarlo a 40px? eso lo hago para que cuando el contenido exceda las dimensiones de la pantalla y aparezca el scroll, que siga manteniendo un margen inferior.
pues añade margin-bottom:40px;
cbp
3. cuando dices que "caja_contenidos_inicio" debería ser un id en lugar de un class, ¿te refieres a que lo declare en el css como #caja_contenidos_inicio en lugar de .caja_contenidos_inicio? y si es así, ¿por qué? no veo la diferencia entre utilizar ambas, aunque los contenidos no se muestran exactamente iguales, no sé por qué. lo mismo pasa con "contenedor_html", "menu_navegacion", "logo", "menu_opciones" y "contenidos".
Cuando digo que deberias usar id's (no solo para caja_contenidos_inicio sino muchos otros casos) es porque son los unicos elementos que tienen esa clase, por tanto se pueden considerar unicos, por tanto no debes usar class sino id. Debes cambiar el html y el css.
cbp
4. lo del hacer las listas como listas (parece tan lógico... ;)) es cierto, pero no sé cómo hacer para que me muestre "|" a la derecha de todos los elementos del menú excepto del último, ¿lo de "last-child" funciona con todos los navegadores?
ok, si quieres que IE muestre los | hazlo como lo haces. si no te importa (no pretendo ser un integrista, pero es lo mas correcto) entonces usa listas. Puedes ver como dar formato a listas en este articulo
meddle
por cierto, no me ha gustado pero podeis leer en ALA un articulo sobre posicionamiento de footers
cbp
meddle
si la resolucion de pantalla es menor que el alto del contenido obtienes 2 scrollbars. odio dos scrollbars en un navegador, molestan y confunden. suelo hacer un ALT+F4 acto seguido.
jeje, completamente de acuerdo :) lo que pasa es que he probado a dejar el "overflow:auto", habiendo quitado el "min-height:100%" de .contenidos y funciona muy bien, cuando lo pongo a 640x480, la resolución es menor que el alto del contenido y sólo me sale un scroll.
meddle
pues añade margin-bottom:40px;
si hago eso, ¿no me meterá un espacio en blanco al final en el que ni siquiera se verá el grid de fondo? no sé por qué no puedo dejar el padding-bottom, igual que hecho en top, left y right.
meddle
Cuando digo que deberias usar id's (no solo para caja_contenidos_inicio sino muchos otros casos) es porque son los unicos elementos que tienen esa clase, por tanto se pueden considerar unicos, por tanto no debes usar class sino id. Debes cambiar el html y el css.
ok, era lo que imaginaba, ahora lo cambio :)
meddle
ok, si quieres que IE muestre los | hazlo como lo haces. si no te importa (no pretendo ser un integrista, pero es lo mas correcto) entonces usa listas. Puedes ver como dar formato a listas en este articulo
voy a echar un vistazo detallado al link que me dices. y está bien lo de ser integrista, hombre, si no lo somos con nuestros proyectos personales... :)
cbp
bueno, meddle, todo marcha sobre ruedas, he seguido los consejos que me diste y esto tiene una pinta casi semi-profesional ya :)
pero oh muestios collados, oh campos de soledad, tengo un problema :( tanto en mi versión como en la que tú me enviaste, cuando los contenidos exceden el tamaño de la pantalla y aparece el scroll, el fondo deja de aparecer y los contenidos se salen por la parte inferior. esto pasa, que yo haya visto, en Mozilla y en Opera, ¿qué hacer ante tamaño inconveniente...?
gracias de antemano :)
dirarck
confieso que no me he leido el post entero pero me vino a la cabeza que a lo mejor lo que quieras hacer es <a href="http://80.33.118.134/man/> esto:</a> y sino pues [vergüenza] :P, espero que te sirva de algo
cbp
dirarck, edita el enlace, porfa, que sale mu raro ;)
aún así he logrado entrar :P pero no logro ver a lo que te refieres, ¿puedes precisarlo un poco, por favor? muchas gracias :D
dirarck
creo que se me escaparon unas comillas antes :S, lo que te pretyendo enseñar es una capa que actua como un iframe, pero en navegadores que no soportan overflow:auto, lo que hago es dejar el tamaño del contenido, para lo que tb tengo que aumentar el tamaño del contenedor que tiene el dic con el contenido. <a href="http://80.33.118.134/man/"> esto </a>
contenedor de contenidos acepta contenerse en una contención que esté muy contenida de ver, ufff mi madre que locuras
cbp
pero, perdona por mi torpeza, ¿en qué afecta esto a mi problema? a lo mejor no me he explicado bien y te podría ayudar ver el ejemplo de lo que estoy hablando. meddle tiene el código, de ahí que se lo haya preguntado específicamente a él, pero si quieres te lo puedo hacer llegar. lo que necesito es prolongar la repetición de un fondo en un div que contiene toda la página y 650 px de ancho, independientemente de que los contenidos excedan las dimensiones de la pantalla y haya un scroll. si todo esto se resuelve con lo que me has dicho, te pido exucsas de nuevo por mi óxido mental, pero es que los lunes... ;)
meddle
quita el <code>height: 100%;
min-height: 100%;</code>de contenedor_html y ponlo en contenidos, donde tambien vas a poner position: relative;
cbp
se soluciona eso, pero ahora, cuando los contenidos no llegan a cubrir toda la pantalla, queda un hueco sin el fondo en la parte inferior en Mozilla, y un huequecito muy pequeño, de apenas 10px, también sin fondo, para IE y Opera :(
orange
Ei Sergi!! ... gracias por lo del .htc .. una pregunta, me tengo que bajar estos archivos además ¿no? -> moz-behaviors.xml y height.htc
Gracias !!
meddle
cbp, tio lo siento pero no tengo tiempo de meterme a corregir eso ahora, de verdad.
borja, si, debes bajarte los dos archivos.
cbp
ah, vale vale, tranquilo, lo siento, que no quería agobiarte, si alguna vez puedes echarle un vistazo se lo echas, y si no ya me voy pegando yo, que seguro que lo saco, hombre, si esto del CSS es una chorrada... ;)
meddle
jaja, q cachondo :P
cbp
pos al final no iba a ser tan chorra esto del CSS, cago'n Berners-Lee y en Owen Briggs...
sigo con el mismo problema y con la misma falta de recursos para arreglarlo, ¿algún predicador del CSS que se digne...? :(
cbp
ho-ho-ho... now i have a machine... ah, no, perdón, quería decir
ho-ho-ho... ya he arreglado el problema que tenía con una idea tan genial como trapera y chapucera. bueno no, en realidad me acordé de lo que dijo meddle para hacer que 3 columnas tuvieran el mismo alto, y he hecho el fondo de 650px de ancho y lo he repetido en el eje "y", asociándolo al body en lugar de a contenedor_html como hasta ahora. no sé si será muy buena o no, pero creo que funciona en todos los navegadores :D