Foros del Web » Creando para Internet » CSS »

Diseño segun resolucion

Estas en el tema de Diseño segun resolucion en el foro de CSS en Foros del Web. hola tengo una duda...vean yo estoy armando una pequeña web pero quisiera armarla en otras resoluciones y mmmm si no me equivoco la resolucion de ...
  #1 (permalink)  
Antiguo 18/03/2011, 09:53
 
Fecha de Ingreso: julio-2010
Mensajes: 523
Antigüedad: 7 años, 4 meses
Puntos: 4
Diseño segun resolucion

hola tengo una duda...vean yo estoy armando una pequeña web pero quisiera armarla en otras resoluciones y mmmm si no me equivoco la resolucion de mi monitor es de 1280x960 y bueno me imagino mi web se veria bn solamente en monitores de esa resolucion...pero yo quiero hacer la web con otras resoluciones sera que si cambio mi resolucion a 800x600 y diseño mi web con esa resolucion se vera igual que la veo yo...en cualquier monitor ke tenga esa resolucion? claro es un ejemplo ps la quiero hacer en varias resoluciones...y tambn se ke debo implementar javascript para ver que tipo de resolucion hay pra mandar a la pag cn el tipo de resolucion correcta :D muchas gracias por aclararme las dudas :D
  #2 (permalink)  
Antiguo 18/03/2011, 10:58
Avatar de mtreik  
Fecha de Ingreso: marzo-2011
Ubicación: Yecla (Murcia)
Mensajes: 41
Antigüedad: 6 años, 9 meses
Puntos: 7
Respuesta: Diseño segun resolucion

Realmente esto que deseas realizar es muy costoso y no creo que merezca la pena, imagínate si tienes que adaptar el CSS a todas las resoluciones que hay...te podrías volver loco!
Yo lo que suelo hacer es crear un div contenedor con un ancho de unos 900px, ya que suele ser la media que uno se puede encontrar y considero que limitarlo a los 800px(normalmente la resolución más baja de los monitores) es dejarlo muy pequeño para resoluciones mayores.
A este contender le aplico un margin:auto; para que aparezca siempre centrado y dentro de el empiezo a construir el resto de la página.
A parte, suelo incluir un CSS adaptado a dispositivos móviles, que quita los elementos innecesarios y que dificulten la navegación en los móviles.

También puedes trabajar dando el tamaño a cada uno de los elementos usando porcentajes, pero esto hoy en día no se usa prácticamente debido a que no es muy "fiable" y además controlar toda la página con porcentajes es realmente difícil.

Un saludo
__________________
Marcelo López Santa
------------------------
Diseñador y programador web
www.sixtudio.com
  #3 (permalink)  
Antiguo 18/03/2011, 11:14
 
Fecha de Ingreso: marzo-2011
Ubicación: Veracruz
Mensajes: 92
Antigüedad: 6 años, 9 meses
Puntos: 3
Respuesta: Diseño segun resolucion

En vez de hacerte un diseño por cada resolución utiliza porcentajes (%) y la medida em para diseñar tu web.
  #4 (permalink)  
Antiguo 18/03/2011, 12:16
Avatar de zarcorian  
Fecha de Ingreso: marzo-2011
Ubicación: aquí
Mensajes: 113
Antigüedad: 6 años, 9 meses
Puntos: 3
Respuesta: Diseño segun resolucion

Cita:
Iniciado por mtreik Ver Mensaje
También puedes trabajar dando el tamaño a cada uno de los elementos usando porcentajes, pero esto hoy en día no se usa prácticamente debido a que no es muy "fiable" y además controlar toda la página con porcentajes es realmente difícil.
Hola,
precisamente estoy aprendiendo a usar los porcentajes, por un tema de que todos los verificadores de accessibilidad para la web me lo piden... No estoy todavia muy docto en el tema, así que me interesa mucho tu comentario por si tengo que abandonar la idea.

Porque dices que no es fiable trabajar con porcentajes ?

Podrias poner ejemplos?
  #5 (permalink)  
Antiguo 18/03/2011, 15:40
Avatar de mtreik  
Fecha de Ingreso: marzo-2011
Ubicación: Yecla (Murcia)
Mensajes: 41
Antigüedad: 6 años, 9 meses
Puntos: 7
Respuesta: Diseño segun resolucion

Cuando me refiero a que no es muy "fiable" es porque hacer que todo el diseño de la página quede "exactamente" como tu quieres usando porcentajes es muy complicado, ya que al hacer un simple zoom, hace que todos los elementos se modifiquen y quizás esto no sea muy interesante.
Mi recomendación es que uses ambas alternativas conjuntamente, es decir utilizar porcentajes y medidas en pixeles.

Por ejemplo en mi página web(http://www.sixtudio.com) tengo dividida cada una de las secciones en div contenedores, los cuales tienen asignada la anchura con width=100%; para que el fondo( cuadritos magenta) ocupe siempre todo el ancho de la pantalla pero por otro lado la altura tiene asignada el valor en unos pixeles fijos.
Dentro de estos contenedores tengo otro contenedor con una anchura fija en pixeles y con el atributo margin:auto; para que como te dije aparezca siempre centrado.

No sé, realmente cada uno tiene su forma de maquetar las páginas y diría que no hay ninguna mejor que otra, pero eso si, trabajarlo todo con porcentajes puede ser muy desquiciante jeje!
__________________
Marcelo López Santa
------------------------
Diseñador y programador web
www.sixtudio.com
  #6 (permalink)  
Antiguo 18/03/2011, 15:43
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Diseño segun resolucion

Para conseguir un diseño dinámico o líquido que se adapte a la anchura de la ventana del navegador y permanece siempre centrado:

Código CSS:
Ver original
  1. #contenedor {
  2. width: 70%;
  3. margin: 0 auto;
  4. }

Estableciendo la anchura del elemento contenedor mediante un porcentaje, su anchura se adapta de forma continua a la anchura de la ventana del navegador. De esta forma, si se reduce la anchura de la ventana del navegador, la página se verá más estrecha y si se maximiza la ventana del navegador, la página se verá más ancha.

Lo más recomendable para tu caso sería optar por un diseño que la anchura de la página sea variable y se adapte a la anchura de la ventana del navegador, pero respetando
ciertos límites. Que la anchura de la página no sea tan pequeña como para que no se puedan mostrar correctamente los contenidos y tampoco sea tan ancha como para que las
líneas de texto no puedan leerse cómodamente. CSS define cuatro propiedades que permiten limitar la anchura y altura mínima y máxima de cualquier elemento de la página.
Las propiedades son max-width, min-width, max-height y min-height. De esa forma puedes conseguir un diseño de anchura variable pero controlada.


Datos obtenidos de librosweb.es
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr

Última edición por gVenom; 18/03/2011 a las 17:45

Etiquetas: diseño
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:01.