Un fondo bien ajustado, un contenido proporcional

Thyssa · #1 (**permalink**) 25/10/2010, 01:44

Hola a Todos!

Soy diseñadora y estoy realizando páginas web. Con lo que podréis adivinar por mi titulo, manejo bastante bien lo que es todo el diseño gráfico que pueda tener una pagina web. Además, como sé lo importancia que tiene la programación, estoy estudiando código poco a poco. Aprendiendo un poco de akí y de allí.

Ahora veréis cual es mi problema:

diseño paginas web ajustando con código su posición para que el contenido de im pagina quede centrado. Eso lo consigo sin ningun problema

Pero luego viene mi dilema más caotico, pongo un fondo y me pasan varias cosas:

- el fondo para empezar, si lo pongo de un tamaño normal digamos que: 1027x768
en algunos monitores se ve el fondo en su tamaño completo pero como le falte un cachín, ese cachín se ve en blanco.

- Por el dilema anterior opté por poner una imagen a lo bestia de grande, pensando que así cualquier monitor la visualizaría entera y no existirían esos malditos cortes blancos, bien, mision cumplida, pero ahora mi problema es que al ser tan grande no se ve al completo el fondo en algunos monitores más pequeños

Estuve observando paginas web como la clásica de google, como la de tuenti, y otras más, y me di cuenta admirada y con cierta envidia que ellos sí que consiguen que sus fondos se ajusten a la pantalla que sea, es decir, ves todo el fondo, un poco achatado, un poco alargado, pero al fin y al cabo los ves correctamente.

Ahora viene la pregunta que ya os imaginais que haré... ¿cómo se hace eso?

GRacias por vuestra ayuda.

Un saludo!!!

dargorg · #2 (**permalink**) 25/10/2010, 14:30

Eso, querida amiga, se hace con Javascript, lo que pasa que para una iniciada como tú puede ser algo bastante difícil y frustrante. Lo normal es hacer las páginas web con fondos que se repitan o con colores sólidos y así se soluciona este problema, mientras que para páginas más ricas visualmente se suelen utilizar otras tecnologías como puede ser Adobe Flash.

Thyssa · #3 (**permalink**) 26/10/2010, 01:09

Vaya, asi que se hace con el famoso javascript, juas, de acuerdo ya tengo una meta por aprender, jajajaja. Muchas gracias, me alivia saber que al menos hay una forma de hacerlo :D

p3rikl3s · #4 (**permalink**) 26/10/2010, 01:22

Mmm también lo puedes lograr con código css. Ejemplo:

Código:

.
.
.
<head>

<style type="text/css">

html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left;}
#fondo{position:absolute; z-index:1; width:100%; height:100%;}

</style>

</head>

<body>

<div>
<img id="fondo" src="tu-fondo.jpg" /> 
</div>
.
.
.
</body>

Pero esto solo funciona con páginas (html/body) con ancho=100% x altura=100%. Con esto quería mostrarte otra alternativa: Css, que en mi opinión es menos complicado y mas optimo para este tipo de rutinas que otros lenguajes como por ejemplo javascript, pero que igual este no deja de ser también una alternativa. Es cuestión de gustos!

Saludos

Thyssa · #5 (**permalink**) 26/10/2010, 11:12

wow, gracias lo voy a probar!!! Ya me habia deprimido yo un poco porque pense: jo, ahora hasta que no aprenda javascript no podré conseguir eso... pero ahora tengo algo de esperanza de poder hacerlo ya!!!

Gracias a los dos!! :D

Thyssa · #6 (**permalink**) 27/10/2010, 01:34

Dios, p3rikl3s, te acabas de convertir en mi dios... ¡¡lo he conseguido! El fondo ya se ajusta, es perfecto!!!!!

Ahora, ¿puedo preguntar algo más?Ejem... Como se consigue que los elementos de la pagina, que ya no son el fondo, también se ajusten como él?? (manteniendose centrado) Porque estoy intentandolo fijandome un poco en lo que me has enseñado, pero no hay manera de conseguirlo.

¡¡QUE GRANDE ERES!! :D

Un saludo y gracias!