El diseño de mi web se estropea con el zoom

[Braaank]

Hola, he creado una web descargando un template de internet y modificandolo a mi gusto, sin embargo he visto que se presenta de forma diferente según el zoom y un zoom un poco mas alto del 100% descoloca mi pagina por completo (rompiendo con todo el diseño) como puedo hacer para que se adapte según el zoom?

La pagina en concreto es:

http://www.ernesto-herrera.esy.es/

Si os dais cuenta al hacer zoom el cuadro de (biografia en este caso) se solapa con la de filmografía, me gustaria poder adaptarla para que no saliera de ese cuadro.

Tambien me gustaría saber como puedo hacer para adaptarla a una versión móvil y que desde el móvil se vaya hacia ese otro diseño.

Saludos

[pzin]

No uses posiciones absolutas. Así de fácil. Incluso sin zoom se solapan los elementos… Y es por usar posicionamiento absoluto.

[Braaank]

Entonces que posicion deberia utilizar? Y eso de que vez que se te solapan debe ser por el zoom que tienes en tu navegador, yo tengo el predeteminado 100% y se ve bien. Pero claro quiero que se vea bien para todos. Por eso el hilo

[pzin]

Iniciado por Braaank

Entonces que posicion deberia utilizar?

En principio, ninguna. Aprende a flotar elementos con float por ejemplo.

[Braaank]

Iniciado por pzin

En principio, ninguna. Aprende a flotar elementos con float por ejemplo.

Algun sitio donde pueda empezar a ver esto?

De antemano, gracias.

[pzin]

En realidad es algo muy básico de CSS. Deberías de mirarte algún manual. Ahí hay un capítulo hacer de float.

[Braaank]

Iniciado por pzin

En realidad es algo muy básico de CSS. Deberías de mirarte [URL="http://librosweb.es"]algún manual[/URL]. Ahí hay [URL="http://librosweb.es/referencia/css/float.html"]un capítulo hacer de [inline]float[/inline][/URL].

De hecho justo esa pagina había encontrado y estaba tratando de aplicarlo. Donde tengo las imagenes en una clase en CSS que se llama .nivoSlider ya venia la propiedad overflow: hidden;

Después en donde tengo la caja de texto (dentro de la imagen) he quitado la propiedad position y he puesto float: left; a ver que ocurría y resulta que me pone el texto debajo de la imagen (en un fondo blanco) además que si quito la propiedad sigue estando igual, no sé que estaré haciendo mal..

[Braaank]

Aún no lo he conseguido, alguien puede echarme una mano?