min width , max width ¿?

follow · #1 (**permalink**) 11/04/2011, 13:45

Hola a todos, hace poco participé en la zona de css porque estoy intentando hacer una cabecera que en la izquierda esté el logotipo y en la derecha esté el inicio de sesión a la página. Hasta ahí no parece muy complejo pero con el tema de las resoluciones me estoy topando....

Vereis, hice un contenedor general, le apliqué un ancho de 100% para que todo el contenido se vea en cualquier pantalla, el tema es que cuando pongo la zona de 'inicio de sesión' en la zona derecha de la pantalla (el logo lo pongo flotante a la izquierda y el login a la derecha....) al hacer la ventana mas pequeña, éste div se me desplaza cada vez mas para el logo, si continuo haciendola mas pequeña aún se baja abajo. El problema creo que viene porque al trabajar con porcentajes en el contenedor y luego a los div flotantes le marco la anchura en 'px' no hace el mismo efecto..... he probado en darle posicion relativa absoluta y nada de nada....

He estado viendo ejemplos de la propiedad min width y max width... y creo que es bastante útil, pero me gustaría saber vuestra opinión.

No se como tratar el tema de las resoluciones correctamente para evitar posibles problemas mas adelante...

Esto es lo que he estado viendo, a ver que os parece....

Propiedades del contenedor general: (los div y tal ya se pueden tratar con px y no me pasa el 'desplazamiento')

Código HTML:

#page-wrap {
	min-width: 960px; max-width: 1260px;
	margin: 0 auto; padding: 0 10px;
	width:expression(document.body.clientWidth < 961? "960px" : document.body.clientWidth > 1261? "1260px" : "auto");

willyfc · #2 (**permalink**) 11/04/2011, 13:54

a ver si esta solución te sirve:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TITULO</title>
<style type="text/css">
    #page-wrap {
	min-width: 960px; max-width: 1260px;
	margin: 0 auto; padding: 0 10px;
	width:expression(document.body.clientWidth < 961? "960px" : document.body.clientWidth > 1261? "1260px" : "auto");
        height: 150px;
        background: #999999; position: relative; color: #FFF;
    }
    #logo{ width: 200px; height: 120px; background: #333;}
    #login{width: 150px; height: 80px; position: absolute; right: 15px; top: 10px;background: #333;}
</style>
</head>

<body>
    <div id="page-wrap">
        <div id="logo">logo</div>
        <div id="login">login</div>
    </div>
</body>
</html>

follow · #3 (**permalink**) 12/04/2011, 07:35

Muchas gracias willyfc por contestar y tu ayuda, pensaba que me ibais a decir que eso de min y max era un disparate y que había una forma mas 'correcta', no tengo mucha base y no se si eso podría ser mas o menos útil, aunque funcionase....

Lo haré de esta manera porque lo de mezclar porcentajes con pixeles no me ha ido nada bien!!!

Un saludo a todos, y como siempre... ¡muchas gracias!