Resolucion de pantalla

Sthr · #1 (**permalink**) 19/09/2007, 09:26

Hola,

continuo con mi problema para ajustar mi pagina a cualkier resolucion. El problema de la pagina era que el fondo entero es una imagen y esto me daba problemas ya que esta se deforma
Me han dicho q con CSS puedo hacerlo xo no se como, he mirado x internet xo lo q encuentro es un poco confuso o que yo soy mu torpe jejeje, que tb puede ser.
Alguien podria indicarme el codigo q debo introducir y explicarmelo paso a paso.

Muchas gracias.

rogertm · #2 (**permalink**) 19/09/2007, 09:35

hola, bueno para lo de que la pagina se te ajuste a cualquier resolucion, ponle el ancho a tus tablas o capas en pocientos (%), asi se acomodara a cualquier resolucion

para lo de la imagen de fondo, es facil con CSS:

Código:

body{
background: url(ruta-de-la-imajen.jpg) repeat-x top;
}

algo asi, claro lo tienes que acomodar a lo tuyo, si la imagen se repite verticalmente, entonces cambias el parametro repeat a repeat-y, top es donde va la imagen, botton si fuera abajo, asi + o -

saludos y si te da mas palos, pues postea

Sthr · #3 (**permalink**) 19/09/2007, 09:51

Voy a probarlo ahora mismo y os cuento.

Thanks!!

Sthr · #4 (**permalink**) 19/09/2007, 10:05

Pero la imagen se deforma igualmente o no cubre todo la superficie de la pantalla, ten en cuenta q ocupa todo el background y tiene q ajustarse a todos los laterales.
Lo que necesito es q digamos, se detecte la resolucion del usuario y se redimensione a esa resolucion.
Me han comentado q tngo q hacer varias hojas de estilo con varias imagenes optimizadas cada una para una resolucion u otra y de este modo segun la detecte cargue una u otra.
Uuufffff!, que lio!

Thanks

Sthr · #5 (**permalink**) 19/09/2007, 10:10

Otra cosita,

cuantas resoluciones es recomendable que tenga en cuenta?, incluyendo las panoramicas de los portatiles. Es que el cliente quiere q sea bien en todas

y no kiere la pagina en flash.

A ver si me ayudais q encontrar la solucion o me suicido jajajaj

Gracias.

rogertm · #6 (**permalink**) 19/09/2007, 10:13

WOW man, tu sabes cuantas resoluciones de pantallas hay?, bueno, el problema creo que es de otro tipo, puedes mostrar la web, o al menos la imagen que quieres de fondo? por que por lo que veo no es una imagen uniforme, o sea un degradado o algo asi

y para que se repita la imagen por todo lo largo y ancho de la pagina solo le quitas el parametro repeat y ya, y si quieres que se quede fija le pones fixed

Sthr · #7 (**permalink**) 19/09/2007, 10:16

Es una foto que ocupa todo el fondo y el cliente quiere q se ajuste a los extremos de la pantalla sea cual sea la resolucion y no kiere flash.

rogertm · #8 (**permalink**) 19/09/2007, 10:25

valla, yo no entiendo, y cuanto mide la foto? 1024x768? 800x600? cuanto?
ademas, si es asi, creo que debes explicarle algo a tu cliente, eso no es muy recomendable, ya que cargaria mucho la pagina y personas con conecciones lentas como un modem, pues no accederian nunca

Snd234 · #9 (**permalink**) 19/09/2007, 10:25

Que tipo de imagen es?
Alguna foto?
o Alguna imagen como "marco"?

De ser este ultimo, podrias dividir la imagen en 3, y la parte del centro que se repita de extremo a extremo y asi se mantendria la apariencia de la imagen original...

Sthr · #10 (**permalink**) 19/09/2007, 10:42

ahi va el link

http://www.comunicart.es/alfredo/new/1152.html

La chica y las letras tienen q aparecer siempre en la misma posicion sea cual sea la resolucion

Thanks a tod@s.

rogertm · #11 (**permalink**) 19/09/2007, 11:08

ya, pues asi pones en tu hoja de estilos:

Código:

body{
background: url(ruta-de-la-imagen.jpg) no-repeat bottom left fixed;
}

como dije antes, el fixed es para que cuando le des al scroll, la imagen se quede en su lugar, en este caso se aliniara a la izquierda, se pegara al fondo y no se repetira

saludos y si pasa algo pues dices

JHMorales · #12 (**permalink**) 19/09/2007, 13:43

Hola:
lo que necesitas es esto:

http://www.cssplay.co.uk/layouts/background.html

el html comienza así:
<!DOCTYPE ht.......

.......</head>

<body>

<div>
<img id="background" src="rabbit.jpg" alt="" title="" />
</div>
......

</html>

y en el css poner la línea:

#background{position:absolute; z-index:1; width:100%; height:100%;}

Suerte. Jorge H.

Sthr · #13 (**permalink**) 20/09/2007, 03:44

Probé esto último y la verdad es que lo que más se asemeja a lo que buscaba, pero aun así el cliente dice que sigue viendolo raro Claro, la imagen se deforma un poco de todos modos y como el tiene en portatil con pantalla panorámica pues ve la imagen alargada, asi que nada.....el suicido es lo que me queda

jejeje!
Intentaré hacerle entender que lo que el kiere no se puede hacer, xq es la conclusión a la que he llegado, asi que a ver como van las cosas.

Muchas gracias por vuestra ayuda.

No obstante, si a alguien se le ocurre algo más jiji!

JHMorales · #14 (**permalink**) 20/09/2007, 04:37

Hola:
tira por el camino del medio y saca una media entre la imagen 16:9 que es la proporción panorámica (que usan muy pocos) y la 4:3 que es la más común en los monitores tanto ctr como lcd, tft, etc. Es lo que se hace para las tv panorámicas buscando adaptar la señal que llega que es 4:3 a una panorámica 16:9, recortan un poco de arriba y de abajo (eso se nota en la mosca y en los titulares en los noticieros, ahora están más separados de los bordes superior e inferior respectivamente) y luego estiran los cuartos izquierdo y derecho para terminar de llenar la pantalla (se nota mucho en los paneos, las imágenes fijas se ven bien pero cuando la cámara se desplaza hacia algún lado se nota como la imagen se estira a izquierda y derecha mientras en el medio mantiene las proporciones adecuadas). En tu caso estira toda la imagen para que se vea más natural.

Otra opción es por medio de javascript detectar la proporción de la pantalla y luego elegir entre un fondo para 4:3 u otro para 16:9. Suerte. Jorge H.

rogertm · #15 (**permalink**) 20/09/2007, 06:33

de esa manera la imagen se te desforma, por que tiene medidas de 100%, asi que para cada resolucion se acomodara a esa medida, y sin menospreciar a JHMorales, prueba de la manera que te di yo, a ver

saludos

Flamman · #16 (**permalink**) 13/07/2011, 02:32

Más vale tarde que nunca. Y esta otra que lei?

body align="center"
table width="100%"
tr
td
todo el contenido te tu pagina
/td
/tr
/table
/body

Asi la pagina se verá del mismo tamaño en cualquier monitor y a cualquier resolucion.

En las pruebas que hice parece ser que funciona.