ayuda con div

Cafar · #1 (**permalink**) 08/06/2009, 04:26

Buenas, tengo esta pagina web: worksafesupportsolutions.co.uk
si la ves con una resolucion de 1280 x 800 la pagina se ve bien...si la ves con una resolucion diferente se ve mal :S
alguien sabe alguna solucion para que se vea bien de cualquier resolucion?
aqui dejo el css por si podeis hacer algo
worksafesupportsolutions.co.uk/style.css

gracias y un saludo

hades87 · #2 (**permalink**) 08/06/2009, 04:28

Podrías hacer un diseño fluido con CSS

Cafar · #3 (**permalink**) 08/06/2009, 04:30

lo he estado mirando y eso seguro que me funcionaria pero como lo hago?
ya tengo todo puesto con porcentajes :S

hades87 · #4 (**permalink**) 08/06/2009, 04:34

Una opción sería fijarle un ancho como mínimo al div contenedor, y luego un margin: auto. Para que siempre te quede centrado, yo por ejemplo el daría uno de 800px de ancho y una altura auto.

Cafar · #5 (**permalink**) 08/06/2009, 04:38

ya lo he modificado pero nada :S cuando lo pongo a 1024 x 768 cada cosa sale por un lado y unas encima de otras...
Gracias.

hades87 · #6 (**permalink**) 08/06/2009, 04:41

Estas usando position relative o absolute?

Cafar · #7 (**permalink**) 08/06/2009, 04:45

absolute.
hechale un vistazo a la pagina worksafesupportsolutions.co.uk/style.css

hades87 · #8 (**permalink**) 08/06/2009, 04:46

Vale, entonces ese es el problema, si es absolute, toma siempre como referencia la izquierda y parte superior, por lo que siempre habrá la misma distancia aún sean resoluciones diferentes. Yo te aconsejaría que cambiaras tu diseño a relative y trabajarás desde ahí.

Cafar · #9 (**permalink**) 08/06/2009, 04:48

voy a probar, gracias por tu ayuda

Cafar · #10 (**permalink**) 08/06/2009, 04:54

lo intento con relative, pero al ponerlo relative no puedo poner una capa encima de otra no?

hades87 · #11 (**permalink**) 08/06/2009, 04:56

A que te refieres con una capa encima de otra?

PD: Edita y no doble-postees :)

Cafar · #12 (**permalink**) 08/06/2009, 04:58

la pagina que me han pedido es una imagen, encima de esa imagen otra...encima otra etc...
si la pongo en relative la imagen que va encima de la primera siempre va a estar al final
con lo cual no puedo ponerla encima nunca.
sorry por lo del doble posteo ^^

hades87 · #13 (**permalink**) 08/06/2009, 05:08

Eso lo podrías tratar con z-index, pero que lógica tiene la de ir poniendo imágenes una encima de otra?

Cafar · #14 (**permalink**) 08/06/2009, 05:13

te explico desde 0.
ellos me dieron una serie de imagenes y la pagina como tendria que quedar al final.
con lo cual, la idea que se me ocurrio era hacerla con flash, pero me dijeron que no, que flash no les gusta a si que la unica forma que conocia era hacerla con capas e ir poniendo una encima de otra.
si te fijas en la pagina web, la parte amarilla es una imagen, y la medalla es otra
con lo cual la parte amarilla esta por debajo y la medalla por encima, al igual que el titulo es otra imagen.

kseso? · #15 (**permalink**) 08/06/2009, 05:16

esta línea la tienes dentro de body, debe esta en head:

Cita:

En el css suprime de body lo que te tacho:

Cita:

BODY {color:#0202EC; font-size:19px; font-family:Arial, Helvetica, sans-serif; /* ~~margin:auto; width:800; height:600~~*/}

cambia las propiedades de:

Código css:

Ver original#micapa {position:relative; margin: 0 auto; width: 1124px; height: auto; overflow:hidden;}

en el html, borra todo lo refente a las tablas:

Código html:

Ver original<body>    
<table><!-- esto lo borras-->
<tr><!-- esto lo borras-->
<td><!-- esto lo borras-->
<DIV ID="micapa">
      <img src="Worksafe_files/3.JPG" />
        </div><!-- este cierre lo quitas de aquí y lo pones justo antes de cerrar el body-->
          ------------
          ------------
</td><!-- esto lo borras-->
</tr><!-- esto lo borras-->
</table><!-- esto lo borras-->
</DIV><!-- este es el cierre trasladado de #micapa -->
</body>

y a todos tus #micapa2 a #micapa6 cambias la referencia de posicionamiento Top/lef a px en vez de % y suprimes lo de "margin-left:auto; margin:right:auto;"

Creo que puedes empezar por eso. Quizás me he dejado algo. Ya dirás.

Y para que comprendas los porqués de los cambios propuestos, échale un vistazo a la guías de migración I y II de Mikmoro en el foro de css.

Un saludo

hades87 · #16 (**permalink**) 08/06/2009, 05:18

Eso lo puedes hacer, teniendo un contenedor principal, que le pondrías la iamgen de fondo esa amarilla y dentro de ese contenedor principal, podrías hacer uno mas pequeño situado a la izquierda y meter la medalla dentro de ese y luego otro a la derecha con la imagen del mapa como fondo de pantalla y el menú en el.

Para mas información sobre este tema, pásate por el foro de CSS, que te podrán ayudar mucho mas.

Cafar · #17 (**permalink**) 08/06/2009, 05:33

kseso muchisimas gracias tio ^^
ya esta todo resuelto, joder, cuando sea mayor quiero ser como vosotros, quiero ser diseniador web, pero aun me queda mucho que aprender jeje.
ahora estoy de practicas en inglaterra aprendiendo el idioma y tal ^^
un abrazo muy fuerte y gracias a los dos

kseso? · #18 (**permalink**) 08/06/2009, 05:43

nada, Cafar, ha sido un placer.

"cuando seas mayor..." ¿qué me estas llamando?

nah

Pues si te aburres entre tanto "inglisito" puedes pasar de vez en cuando por www.librosweb.es creo que te ayudará.

Un saludo

Cafar · #19 (**permalink**) 08/06/2009, 05:55

he estudiado css, javascript, php y html
cual es el libro que mejor me vendria?

jomaruro · #20 (**permalink**) 08/06/2009, 14:58

Hola:

Con lo que hay en la página que te indica Kseso? tienes para una temporada. Son unos libros muy buenos pero no por ellos dejes sueltas a las inglesitas.

Saludos.