solucion para resoluciones

trevol · #1 (**permalink**) 01/10/2009, 08:02

hola amigos estoy diseñando una pagina y a la hora de situar los elementos,( cajas)
como cada pagina del sitio tiene variaciones, he decidido hacer posiciones absolutas.

Eso puede afectar a la visualizacion segun la resolucion que el usuario tenga en su pantalla.

como puedo establecer una resolucion para que se vean los elementos con la misma distribucion.

AlbertoGarcia · #2 (**permalink**) 01/10/2009, 17:35

Hola, lo de las posiciones absolutas para todo lo veo un poco radical. Para controlar un poco la visualización independientemente de la resolución del usuario puedes englobar todo el contenido en un contenedor con un ancho fijo para 1024 (960px por ejemplo), o a los elementos que ya tienes darles medidas relativas (porcentajes o em) para que se adapten a la resolución en la que se muestren. Más fácil la primera opción.

Salud!

bex · #3 (**permalink**) 01/10/2009, 23:36

Alberto sin duda está en lo correcto. Una vez creado el contenedor podés usar posiciones absolutas para cajas dentro del mismo, siempre que tenga la propiedad position declarada. De ser así, las cajas toman su origen en la esquina superior izquierda del elemento que los contiene, en este caso el div contenedor.

De esta forma se puede, por ejemplo, centrar el contenedor mediante margin: 0 auto y después usar divs con position: absolut dentro del mismo. Si la resolución cambia, las cajas se centran junto con el contenedor.

Se entiende?

trevol · #4 (**permalink**) 02/10/2009, 02:51

Mi problema es que todas las paginas del sitio no son iguales entonces como yo quiero utilizar un css para todas cuando doy una posicion, si en una pagina hay alguna caja que no hay en otra entonces varian las posiciones. lo otro que se me ocurre es situar todas las cajas comunes a todas las hojas en primera posicion del html una detras de otra y asi las particulares añadiendolas detras. ¿ es buena solución?

muchas gracias alberto grcia y a ti bex.

AlbertoGarcia · #5 (**permalink**) 02/10/2009, 04:37

Hola de nuevo, es importante en un sitio por motivos de accesibilidad guardar una consistencia en el diseño de la estructura. Pero si necesitas hacerlo como dices y usar una sola hoja css, puedes darle al body de cada página un id y en el css usar la especifidad para dar estilo a los mismo elemento pero en páginas distintas. Más o menos así:

Código:

<body id="inicio">
<div id="contenedor">
...contenido...
</div>
</body>

Y en el css te refieres al div contenedor especificando un elemento padre del mismo:

Código:

#inicio #contenedor {width: 80%;}
#contacto #contenedor {width: 60%;}

Todo esto si te he entendido bien, claro.

Por otro lado, cuando empieces un sitio es bueno hacer todo este tipo de consideraciones respecto del diseño de la estructura de la información al principio del proyecto, luego te ahorras mucho tiempo haciendo parches y chapuzas en el código porque te has dado cuenta de que algo no funciona como esperabas cuando ya lo tienes casi todo armado. Puede que te de pereza hacerlo para este que tienes entre manos pero para el próximo investiga los wireframes.

Salud!

trevol · #6 (**permalink**) 02/10/2009, 10:00

Graias alberto garcia, buen consejo creo que es lo primero que me tengo que plantear la estrctura de la inforrmacion en la pagina y luego decidir que medidas generales tomar. como sueles hacerlo con un dibujito en un folio o tienes alguna herramienta. Pudes adjuntar un ejemplo en el hilo. gracias.

AlbertoGarcia · #7 (**permalink**) 02/10/2009, 10:27

En este sitio tienes mi ejemplos de wireframes, yo personalmente uso lapiz y papel cuadriculado, pero puedes usar un programa de edición cualquiera, como Fireworks o Gimp.

Ahora mismo no te puedo adjuntar ninguno pues tendría que escanearlo pero no son muy diferentes de los del enlace.

Salud!

AlbertoGarcia · #8 (**permalink**) 02/10/2009, 10:27

/* algo ha ocurrido y he posteado el mismo mensaje dos veces. Borro el contenido de este */

bex · #9 (**permalink**) 02/10/2009, 13:03

Yo lo suelo hacer en Photoshop o Illustrator (dependiendo el aspecto que quiera conseguir) y ya incluyo el diseño.
Saludos!