Adaptar pagina a la ventana del navegador

viniarm · #1 (**permalink**) 16/05/2011, 18:47

Buenas. Estoy haciendo mi primera pagina web, y despues terminar casi toda la pagina principal he descubierto un problema q no habia tenido en cuenta, y es que cuando hago la pantalla del navegador mas pequeña todos los elementos de la pagina se me desordenan totalmente. Y lo que quiero es que al reducir la ventana se vaya adaptando la pagina y que almenos salgan scrolls para poder ver el resto de la pagina, como cualquier pagina bien hecha vamos (esta de forosdelweb seria un ejemplo). Alguien sabe como solucionar esto? Algun script de javascript?? Alguna linea de codigo que falta en mi HTML?? Gracias!!

ArturoGallegos · #2 (**permalink**) 16/05/2011, 21:28

javascript? mas bien necesitas un tutorial CSS, te pasa eso porque has utilizado porcentajes para crear tu sitio o bien has omitido el declarar el ancho del mismo...

1.- usaste porcentajes tienes dos opciones
- agregar la propiedad min-width inmediatamente después del width y asignarle en pixeles el tamaño mínimo requerido para que tu sitio se muestre correctamente.
- cambia el ancho de tu pagina por pixeles en lugar de porcentajes

2.- has olvidado declarar el ancho
- agrega en tu hoja de estilos las medidas necesarias al contenedor y/o elementos de tu sitio
- lee un tutorial css para complementar y reafirmar tus conocimientos y no se te vuelva a olvidar
aquí te dejo unos libros que te podrían servir -> clic aquí

viniarm · #3 (**permalink**) 17/05/2011, 05:47

Segun lo q he leido, creo q te has confundido pero te entiendo. Querras decir que sustituya el valor en pixeles del ancho por porcentajes, no al reves. Lo que no entiendo es lo del min-width, nunca lo he usado pero buscare informacion sobre ello aunque seguramente lo que hare sera poner porcentajes en los width. Gracias por tu respuesta

ArturoGallegos · #4 (**permalink**) 17/05/2011, 10:15

para nada yo dije cambia los porcentajes por pixeles... no me confundí en lo mas mínimo, el min-width le indica al navegador el ancho mínimo que debe tener, cuando trabajas en porcentajes el tamaño es variable al tamaño del navegador por lo que si este es muy pequeño el espacio disponible también lo es, con min-width solventas esto para que aunque el navegador sea pequeño tome al menos el tamaño necesario

mas información -> clic aquí

y compañero al responderle sin ver su código ha sido jugar al adivino del foro, cosa que se presta a equivocarse como veo que ha sido el caso. le recomiendo muestre la url a su sitio para poder apreciar su trabajo y sus errores

viniarm · #5 (**permalink**) 17/05/2011, 17:20

perdon, tenias razon. me ha funcionado lo del min-width, aunque al final he acabado solucinandolo poniendo position:abosulte a muchas de las capas y ordenandolas de nuevo (todo en px). al hacer esto reducia la ventana del navegador y todo seguia igual. pero insisto en que de igual manera se puede solucionar con lo que dices del min-width. mil gracias :)

lunaaladeuna · #6 (**permalink**) 02/11/2011, 04:59

Hola,
Estoy intentando adaptar una web a la resolución a diferentes tamaños de pantalla.

Estoy usando este código de javascript:
<script type="text/javascript" language="javascript1.2">
function comprobarScreen()
{ if(window.screen.availWidth <= 640)
{window.parent.document.body.style.zoom="50%";}
if(window.screen.availWidth == 800)
{window.parent.document.body.style.zoom="65%";}
if(window.screen.availWidth == 1024)
{window.parent.document.body.style.zoom="90%";}
if(window.screen.availWidth == 1280)
{window.parent.document.body.style.zoom="90%";}
if(window.screen.availWidth >= 1440)
{window.parent.document.body.style.zoom="100%";}
}
</script>
<body onload="comprobarScreen()">
Contenido de la web
</body>

El problema es que este código me funciona en todos los navegadores, excepto en firefox, donde la web no se ajusta al porcentaje que yo le indico.

¿Que debo hacer? Sabeis de otro código o algo que me pueda ayudar a solucionar esto?? me estoy volviendo loca!

Gracias!!!