Estoy buscando tutoriales para aprender...

[RAZGRIZ24]

Hola compañeros.

Llevo muchisimo tiempo con ganas de aprender a crear diseño liquido. Se que muchos de aqui os encontrareis en contra de hacer este tipo de diseños. Pero yo quiero aprender a aplicarlos.

Ciertamente, se hacer efecto liquido en ligeros aspectos, como tablas y fondos.

Pero no soy capaz de ajustar las medidas a otros aspectos como marcos hechos por photoshop (a los que quiero poner para "enmarcar" la informacion), fotografias, botones, backgrounds... etc.

Alguien puede facilitarme algun tutorial de como conseguir estos diseños o algun consejo? Algo que me ayude a aprender a aplicarlo?

Se que muchos estais en contra de este diseño, pero es atractivo y a mi me resulta como tal.

Si podeis ayudarme...

[RAZGRIZ24]

Nadie puede ayudarme?

[xhiena]

no entiendo que quieres decir con diseños liquidos. ¿puedes explicarlo?

[RAZGRIZ24]

lo contrario del diseño fijo. Es decir, el diseño que se ve igual en todas las pantallas de ordenador. Y no me refiero a diseños tipo foro (ya que ahi son tablas y resulta sencillo) Sino cuando el diseño tiene otros elementos mas complejos, como imagenes, spry, botones, capas... etc.

Como esta pagina, que desde hace mucho me encanta:

www.astonmartin.com

Se ve igual en todas las pantallas.

[ElJavista]

Los diseños líquidos ciertamente son bastante buenos, pero no es que permitan que se vean igual en todas las pantallas, eso se consigue mediante un diseño fijo. Lo que permite es que el diseño de adapte a cualquier resolución. Eso hoy en día es bastante útil porque las pantallas panorámicas se han puesto de moda y están bajando sus precios. Un diseño de, digamos 760 píxeles, (lo que se solía recomendar) se podría ver ridícula viéndose en una pantalla panorámica configurada con alta resolución.

Bueno, el problema con el diseño líquido es justamente lo que pides, cuando existen imágenes y capas (en cuanto a los botones no le veo el problema). Talvez en cuanto a las capas tampoco haya problemas porque a las capas se les da también un tamaño porcentual, pero en cambio hacer eso con imágenes? podríamos darle un tamaño porcentual y asunto resuelto, pero no todos los navegadores lo renderizan adecuadamente. Qué hacer entonces?
No podría darte una respuesta satisfactoria, creo que cada uno debería buscar su solución de acuerdo al diseño mismo.

Podría hacerse que en el diseño haya partes líquidas y otras no, o podría tomarse en cuenta los diferentes tamaños que adoptaría el diseño para que se vea bien en las distintas resoluciones. Es un problema en que no puedo hacer una recomendación definitiva. Suerte!

[RAZGRIZ24]

Si bueno, las capas tienes razon.

Pero las imagenes es bastante comprometido. Cuando aplicas el porcentaje en el ancho funciona perfectamente... pero a lo alto no.

Por otro lado, el tema botones que dices que no ves el problema: Es el mismo que el de las imagenes cuando la barra de navegacion ha sido creada integramente por ti. Tu le aplicas por ejemplo el 20% (5 botones, 20% de la <td> cada boton) Efectivamente, se ajustan. Pero tendras que aplicarle un porcentaje equivalente al alto para que no se distorsione la imagen. Pero ¿cual es el porcentaje equivalente? teniendo en cuenta que la proporcion de ancho/alto de las pantallas es diferente en cada una... Y si pasas a medidas de pixeles? volvemos al diseño fijo.

[ElJavista]

En cuanto a los botones, pues si le pones imágenes como fondo o haces que el botón sea una imagen, pues claro que hay problemas. Yo estaba pensando en los botones input type="button", <button> o los links que se les da apariencia de botón sin fondo de imágen. En fin.

A ver, en primer lugar estas exagerando el término de diseño líquido, solo se trata de hacer el ancho líquido, no el alto, de qué serviría un alto líquido si para eso existe el scroll? Eso no es un problema en realidad. El único problema que veo son las imágenes. Pero como te dije, yo no conozco ninguna solución definitiva para el tema. Si alguien podría darla por favor que nos la comparta.

[emprear]

RAZGRIZ24:

Tu planteo es un poco confuso, al parecer lo que vos deseas es trabajar con diferentes resoluciones, eso y lo que generalmente se conoce como "divs liquidos" son cosas diferentes. Hay muchas técnicas para hacer eso. Con lo que más deberías cuidarte es con las imagenes, estas no se ajustan.
Te sugiero que busques en Google por "liquid Layouts" y veas algunos tuitoriales y te descargues algunas de las numerosas plantillas que se encuentran disponibles. analizalas, hace tus pruebas, y si tenes problemas concretos, nos los expongas en el foro.

El ejemplo de http://www.astonmartin.com/ que pusiste, de liquido no tiene nada y en 800x600 hace scroll

Saludos y espero por tu trabajo