duda de maquetación con css

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

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...? :(

jaja, q cachondo :P

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... ;)

cbp, tio lo siento pero no tengo tiempo de meterme a corregir eso ahora, de verdad.

borja, si, debes bajarte los dos archivos.

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 !!

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 :(

quita el <code>height: 100%;
min-height: 100%;</code>de contenedor_html y ponlo en contenidos, donde tambien vas a poner position: relative;

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... ;)

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. &lt;a href="http://80.33.118.134/man/"&gt; esto &lt;/a&gt;

contenedor de contenidos acepta contenerse en una contención que esté muy contenida de ver, ufff mi madre que locuras

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

confieso que no me he leido el post entero pero me vino a la cabeza que a lo mejor lo que quieras hacer es &lt;a href="http://80.33.118.134/man/&gt; esto:&lt;/a&gt; y sino pues [vergüenza] :P, espero que te sirva de algo

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 :)

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... :)

por cierto, no me ha gustado pero podeis leer en ALA un articulo sobre posicionamiento de footers

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, 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 :)

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/).

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

busca "behaviours css". te estoy intentando hacer un ejemplo crossbrowser. veremos.

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?

otra opcion: usar .htc (behaviours css). aunque menos elegante, tambien funcionaria, incluso con cabecera y pie siendo en px

el unico problema es si los altos de cabecera y pie son en px, porque al ser contenido un % pues no se puede calcular la diferencia. pero si tu tuvieras cabecera y pie en % podrias hacer algo como esto:

<code>html, body {
height: 100%;
margin: 0;
padding: 0;
}

#contenedor {
position: relative;
width: 650px;
height: 100%;
min-height: 100%;
background: gray;
}

#cabecera {
position: relative;
height: 10%;
background: green;
}

#contenido {
position: relative;
height: 80%;
min-height: 80%;
background: yellow;
}

#pie {
position: relative;
bottom: 0px;
height: 10%;
background: orange;
}</code>y eso SI funciona

jejeje, ya lo he probado y no rula ...

perdon he editado el anterior mientras tu contestabas.

respuesta: <code>#contenido {height: auto}</code>(aunque no lo he probado) :)

Respondiendo a lo que dices, lo único que digo es que esas propiedades hay que ponerselas siempre al elemento que va dentro del div, cuando yo creo que es mucho más lógico (igual que se hace con el horizontal) que fuera una propiedad del propio div

A ver, se me está ocurriendo otra cosa, ¿cómo haríais esto?

Yo ya tengo mi contenedor ocupando el 100%, pero ahora quiero que dentro de ese contenedor, haya varios divs, uno de ellos de altura variable ...

Ejemplo:

&lt;div id="contenedor"&gt;

&lt;div id="cabecera"&gt;&lt;/div&gt;
&lt;div id="contenido"&gt;&lt;/div&gt;
&lt;div id="pie"&gt;&lt;/div&gt;

&lt;/div&gt;

Pues yo quiero que la cabecera y el pie tengan una altura fija, y que el div del contenido se adapte al tamaño necesario ... pero la pagina siempre me habrá de ocupar el 100% de la pantalla

un, dos, tres ... responda otra vez

bueno, con las premisas anteriores... ¿que le encuentras a faltar a la combinacion relative positioning con bottom? Extractos literales: <fieldset>This property specifies how far a box's bottom content edge is offset above the bottom of the box's containing block.</fieldset> y <fieldset>A relatively positioned box is generated when the 'position' property for an element has the value 'relative'. The offset is specified by the 'top', 'bottom', 'left', and 'right' properties.</fieldset>

Sí, si hay varias alternativas, y muy limpias además, para alinear contenido abajo en un div .... pero falta la forma más simple de todas, que es un a propiedad en el propio div, igual que se hace con el alineamiento horizontal, ¿no crees?

por cierto...
orange

Ejemplo: yo simplemente quiero meter un pie de pagina con un texto dentro ... si quiero alinearlo abajo tengo que anidar dos divs, o un span dentro de un div ... con lo que redundo código, ya que debería poder hacerse solamente con una propiedad del div inicial ... creo que es un detalle que le faltan a los divs, y que creo necesario, de cara a facilitar la vida a la gente a la hora de diseñar con CSS
creo que solo tienes que alinear lo que tu llamas el pie de pagina. tanto si el pie de pagina esta dentro de un contenedor global como si no lo esta, seguro que se forma de un div o un p con un texto dentro. Pues si no me equivoco puedes alinear ese div/p y listos.

y puedes alinear <em>ese elemento</em>, no? ;)