¿Cómo maqueto esto?

scumah

Pues nada, me ha tocado maquetar esto, y yo creo que tal y como lo quiere el cliente, se acerca bastante a imposible, pero a ver si a álguien se le ocurre (El contenido principal tiene que estar centrado en la ventana):

El problema está tanto en los elementos del menú como en las cabeceras, que necesitan estirarse hasta el principio y el final respectivamente... La parte del menú es salvable, porque mediante tablas, una capa cualquiera con una imagen de fondo, o mediante JS se puede hacer (Todas formas asquerosas, lo sé), pero la parte de la derecha... Es que básicamente haría falta un layout de dos columnas, una izquierda líquida pero que cuyo ancho acabe siempre en el mismo punto para centrar el contenido, y otra también líquida a partir de ahí hasta el final, o yo que sé...

A lo mejor es más fácil de lo que creo y se me está escapando la manera, pero el caso es que no lo veo xD

¡Se agradece la ayuda!

0buS

Pues te tocará tirar de divs flotantes no? XD

1 respuesta
Zuki

Divs Flotantes y con Z-Index y con margenes Superiores.

1 respuesta
babri

#1 no uses tablas por dios!!! xDDD los divs son tus amigos xD

mira esto, yo he puesto un menu qeu es la barra de navegador asi:

la barra oscura de arriba al tengo de principio a fin de la pantalla y el contenido no, no se si es lo que quieres xD

scumah

#1 y #2, si con divs flotantes os referís a divs con un float, no se puede xD A lo mejor a simple vista parece algo normal, pero es un layout bastante más complicado de lo que parece.

#3, No es lo que quiero xD Eso que has hecho ahí sí es más fácil, lo complicado, por ejemplo, sería hacer que esa barra, en vez de ocupar todo el ancho, ocupara sólo hasta el centro de la ventana menos 300px, por poner un número :P

Lo que he hecho para solucionar la parte izquierda es la segunda solucion que dije en #1: Poner un div absoluto con un fondo gigante con cuatro bandas horizontales y ponerlo unos píxeles a la izquierda para que quede debajo justo del menú. Queda perfecto y la imagen (de unos 2000x500px) sólo ocupa 8kb. La parte derecha no se sabe a qué altura estarán las bandas horizontales, así que lo doy por imposible.

1 respuesta
X-Crim

con divs flotantes no se puede? :S pensaba que si... entonces no tengo ni idea xD

Zuki

#5 y por que no se puede? cual es el impedimento?

1 respuesta
scumah

#7 Porque no puedes posicionar un div mediante floats a la distancia necesaria del ancho de la página y que se vea bien a cualquier resolución. Si dividimos la página en tres capas y las flotamos, ¿Qué ancho deberían tener para que el contenido principal esté centrado y las capas laterales se estiren hasta el final? Con una tabla es el comportamiento por defecto, pero para esto no hay una solución clara con capas.

O al menos eso creo yo xD Si tú eres capaz de encontrar alguna forma que funcione bien, me darás una alegría :D

2 respuestas
0buS

#8 Pero le puedes dar valores con % y no unos determinados píxeles, segun la resolución en el css.

1 respuesta
Zuki

#8 Puedes hacer una capa contenedor y a partir de ahi la estructura y listos.

1 respuesta
eXtreM3

Joder la verdad es que es una movida ese diseño, no es nada facil. Solo se me ocurren chapuzas, tales como haces un montón de contenedores independientes, y después repetir un color plano a todo el ancho del div...

1 respuesta
scumah

#9 Pero es que en % nunca te lo va a dejar en el sitio donde tiene que estar a todas las resoluciones...

#9 y #10, A ver, ya digo que no es un layout simple, llevo maquetando muchos años, trabajo de esto, y no he visto una solución para esto nunca. Ya he probado con un ancho porcentual y he probado con miles de capas contenedoras posicionadas de todas las maneras posibles. Ahora mismo puedo decir que estoy seguro de que eso, mediante un layout limpio y sin ningún truquito, no se puede maquetar. Y yo venía buscando ese truquito xD Pero se agradece de verdad la ayuda de todas formas :D

#11 Yo es que directamente lo de las cabeceras de sección lo voy a dar por imposible, porque si cada una está a una altura... Para la parte de los menús si queda bien con la solución que puse en #5, pero la parte derecha...

APOCa

No se si así sirve.

http://utgoty.site88.net/misc/testmaquetacion.html

2 respuestas
eXtreM3

#13 No, se solapan todos los contenidos y menús a resoluciones pequeñas.

scumah

#13 No está nada mal :P pero ciertamente, al reescalar la ventana se comporta un poco raramente. De todas formas le echaré un ojo, muchas gracias :D

bLaKnI

Pon un ejemplo con contenido porfa. Es decir, montate un mokup en photoshop, para ver como quedaria. Pk la imagen en #1 no es nada aclaratoria.

1 respuesta
scumah

#16 Al final hemos hecho un apaño y no habrá cabeceras que sobresalgan por la derecha a diferentes alturas, pero ahí lo llevas por si te quieres entretener :P

Usuarios habituales

  • scumah
  • bLaKnI
  • eXtreM3
  • Zuki
  • 0buS
  • X-Crim
  • babri