Página web que se ajuste a la resolución
Hola tengo una página web y el problema es que la se supone que estaba hecha con una resolución de 1024x768, y todo se veía bien, pero como cada vez la resolución de monitores y portátiles cada vez es más alta ahora parce que todo esta descentrado, hay alguna solución más o menos rápida o tengo que modificarla de nuevo todo.
Si la tuviese que modificar entera, ¿cómo podría evitar este problema?
Gracias
Si la tuviese que modificar entera, ¿cómo podría evitar este problema?
Gracias
1 Respuesta
Respuesta de Kike Rodríguez
1
No sé como tienes la página estructurada, si la tienes con tablas o divs a lo mejor de una forma muy sencilla puedes ajustarlo todo.
Si no tienes definidos los tamaños de las celdas o de los divs, defínelos (width y height) y en vez de usar tamaños fijos (por ejemplo "100px") utiliza porcentajes: width="20%"
Así, si tiene una tabla con 3 columnas, en al primera tienes el menú, en la segunda el contenido y en la tercera banners, puedes definir un 20% para el menu, un 60% para el contenido y otro 20% para la tercera columna, así se ajustan a las resoluciones de la ventana, no solo de la resolución del monitor.
Pero para hacerlo correctamente y evitar que algunas cosas se cierren más de lo debido si se hacen las ventanas más pequeñas o se trabaja en monitores antiguos deberías trabajar con CSS, o sea, definir los estilos en hojas aparte del contenido. Eso te facilita las modificaciones.
Otra forma de hacerlo, dependiendo de la resolución del monitor, y que de paso te ayuda a centrar la página es algo más compleja. Necesitas usar javascript para detectar la resolución del monitor y en función de esta resolución darle el tamaño adecuado a cada uno de los contenedores (div, layer, tabla, etc) Yo te aconsejaría que trabajases solo con div, te evitará tener que volver a diseñar la página en un futuro. Si vas a rehacerla porque con los porcentajes no te arreglas puedes buscar entre mis respuestas, hay dos o tres explicando como hacerlo con javascript. Si no las encuentras o no las ves claras y te interesa hacerlo así, puedes volver a consultarme con algún dato más sobre la página para poderte dar una solución más detallada y ajustada a tus necesidades.
Kike
Si no tienes definidos los tamaños de las celdas o de los divs, defínelos (width y height) y en vez de usar tamaños fijos (por ejemplo "100px") utiliza porcentajes: width="20%"
Así, si tiene una tabla con 3 columnas, en al primera tienes el menú, en la segunda el contenido y en la tercera banners, puedes definir un 20% para el menu, un 60% para el contenido y otro 20% para la tercera columna, así se ajustan a las resoluciones de la ventana, no solo de la resolución del monitor.
Pero para hacerlo correctamente y evitar que algunas cosas se cierren más de lo debido si se hacen las ventanas más pequeñas o se trabaja en monitores antiguos deberías trabajar con CSS, o sea, definir los estilos en hojas aparte del contenido. Eso te facilita las modificaciones.
Otra forma de hacerlo, dependiendo de la resolución del monitor, y que de paso te ayuda a centrar la página es algo más compleja. Necesitas usar javascript para detectar la resolución del monitor y en función de esta resolución darle el tamaño adecuado a cada uno de los contenedores (div, layer, tabla, etc) Yo te aconsejaría que trabajases solo con div, te evitará tener que volver a diseñar la página en un futuro. Si vas a rehacerla porque con los porcentajes no te arreglas puedes buscar entre mis respuestas, hay dos o tres explicando como hacerlo con javascript. Si no las encuentras o no las ves claras y te interesa hacerlo así, puedes volver a consultarme con algún dato más sobre la página para poderte dar una solución más detallada y ajustada a tus necesidades.
Kike
