Comunidad de diseño web y desarrollo en internet online

Es posible?

Citar            
MensajeEscrito el 09 Ago 2011 08:16 pm
Hola a todos

Antes de ayer descubri gracias a vosotros los div, lo que os voy a comentar no se si es posible.

http://www.superline.es/SLInicioprovaa3.html

Podria hacer la imagen del fondo sola, sin la chica, y que depende de la resolucion se adaptase a la pantalla.
Luego poner la chica en otra imagen y decirle que se coloque a la derecha.
De esta forma se veria la web grande en resoluciones altas?
Yo hice la imagen para 800x600 y en mi ordenador lo veo pequeño, en cambio vuestra web ocupa mucho mas de ancho.

Espero haberme explicado bien.

Gracias
Eva

Por ecsn

11 de clabLevel



 

msie
Citar            
MensajeEscrito el 12 Ago 2011 11:06 pm
Lo que pedís es un poco complicado pero acá va:

1.Tenés que elegir el tamaño máximo de resolución que vas a abarcar con tu web, En este caso, la imagen la hice de 1000px porque elegí como tamaño máximo 1024x768. En resoluciones mayores se va a ver un poco pixelado, aunque funciona.

2. El fondo es un jpg y la chica es un png transparente.

3.El div con id="wrapperFondo" envuelve tanto a la imagen de fondo como a la figura de la chica. Debe ser de ancho 100% (el ancho del navegador) y position:relative.

4.La imagen del fondo, en este caso <img class="fondo" src="fondo.jpg" />, debe tener ancho 100%. Esto quiere decir que siempre va a estar al 100% de su contenedor y su contenedor en este caso es wrapperFondo, que a su vez tiene como ancho el 100% de la ventana. En definitiva, esto quiere decir que la imagen siempre va a estar al 100%.

5.La imagen de la figura de la chica, en este caso <img class="figura" src="figura.png" />, siempre va a tener un tamaño y una posición al tamaño de la imagen de fondo, y la imagen de fondo varía de tamaño según la resolución. Entonces, hay que sacar las proporciones de la chica:

- El ancho de la imagen de la chica es aquí de 211px. Si la imagen de fondo es de 1000px, entonces 211px es el 21% de 1000px. En definitiva, en este caso, el ancho de la chica es de 21%.
- Desde la izquierda, la posición de la chica en la imagen de 1000px es de 668px.
Y 668px es el 67% de 1000. Entonces la posición desde la iquierda es left:67%.
-Siguiendo la misma lógica llegás a que 12% es la distancia desde arriba (top)
-IMPORTANTE: la posición de la figura debe ser position:absolute. En este caso, pusimos además position: relative al contenedor (wrapperFondo). De esta manera, el origen de la posición de la figura de la chica no es el arriba/izquierda del navegador, si no el arriba/izquierda del wrapperFondo.

Aquí te dejo los archivos de ejemplo:

http://www.megaupload.com/?d=1CFV79G6

Por martino

16 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 13 Ago 2011 05:32 am
Hola Eva,

Aqui te dejo un link con un tutorial muy basico de como empezar a programar tu sitio con divs, es muy basico.

http://www.w3.org/Style/Examples/011/firstcss.es.html

saludos! espero que te sirva

Por samSSL

19 de clabLevel



 

Seguridad Web

firefox
Citar            
MensajeEscrito el 14 Ago 2011 04:21 pm
Dios santo! Quanta informacion!!! Muchisimas gracias.

Ahora mismo me pongo a trabajar.
Ya os ire contando.

Eva

Por ecsn

11 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.