Tamaños y posiciones

matucasal · #1 (**permalink**) 10/09/2009, 21:26

Planteo de nuevo mi problema, pero ahora bien ejemplificado, y mejor explicado.
Yo arme la maquetacion de una pagina en css. No la hice demasiada complicada.
Cabecera con un menu, centro con dos columnas y algunas sub columnas, footer.

La pruebo en mi monitor 1024*800 y sale algo asi

Ahora, bien, voy a mi notebook, cuya pantallar es 1300*800 (o algo asi) y como se veia todo en la izquierda, yo lo centre para que no quede tan mal, pero no es mi idea que quede de tal manera. Dejo imagen, recuadre mas o menos como se ve en el explorador, con la parte derecha e izquierda blanca, y en el centro el contenido

Lo que yo en realidad busco, es que si la pantalla es 1300*800 se vea como en la primer imagen, no que quede la pagina en el medio y todo lo demas blanco como fondo de la pagina.
Es decir, quiero que mi pagina se vea IGUAL independientemente de la resolucion. O al menos que no se modifique tanto segun la resolucion.

Les dejo mis css para que vean, saco un par de partes de contenido para que no quede tan largo.

Código css:

Ver originalbody { margin:0;}
#todo{  width:100&#37; ;
        min-width:1024px;
        max-width:1366px;}
#contenido {width:1000px;
margin: 0 auto;
}
#header{
    height:200px;
    overflow:hidden;
        width:auto;  
}
#cuerpo{
    margin-top:20px;
    height:900px;
    width:auto;
                
    }
    
 
#colizq{
    
    height:900px;
    float:left;
    position:absolute;
    width:600px;
    /*background-color:#F00;*/}
#colder{
    
    height:800px;
    float:right;
    width:400px;
    background-color:#360;
       
        }
    
#footer{
    margin-top:20px;
    bottom:25px;
    height:300px;
        background-color:#000;
    
    }

Y aqui el html para que se entienda mejor

Código HTML:

<body>
<div id="todo">
<div id="contenido">
<div id="header">
</div>
<div id="cuerpo">
<div id="colizq">
</div>
</div>
<div id="colder"></div>
</div>
    
<div id="footer"></div></div></div></body>

Bueno, si alguein sabe como hacer lo que estoy buscando, por favor que me lo diga, o me diga algun lugar donde lo pueda leer asi lo aprendo.
Muchas gracias
Chau!

mayid · #2 (**permalink**) 11/09/2009, 08:52

Siempre que tengas definidas alturas y anchuras en pixeles, se va a respetar esas medidas.

Para que la pagina sea "liquida" y se ajuste al ancho de pantalla, necesitas usar medidas relativas.

height:90%; width:25%;
en vez de:
height:900px; width:300px;

Te recomiendo empezar con los porcentuales, aunque tambien existe la medida "em" para lograr estas cosas.

Ojo nomas con los altos que son mas rebeldes, creo. No se. O creo que solo para un height 100% son rebeldes.

matucasal · #3 (**permalink**) 11/09/2009, 09:02

Esta bien, el width 25% lo puedo usar, pero lo que me pasa es que al hacer esto, los divs se deslizan a medida que achico o agrando el explorador. Me gustaria que eso no sucediera.
Osea quiero que al usar una resolucion mas chica o grande,la pagina quede igual o al menos parecida
Como es eso del em??
Gracias voy a probar bien eso de los procentajes, pero me sigue resultando problematico

mayid · #4 (**permalink**) 11/09/2009, 09:12

Y por que te deslizas? Eso es con el zoom?

Si no quisieras usar porcentuales, tendiras que hacer tu pagina dos veces, y poner un condicional que diga:

"si la resolucion del monitor es de 1024px de ancho, las imagenes y/o medidas son estas". Si la resolucion es aun mayor, las imagenes y/o medidas son estas". Cosa sencilla, con javascript.

kseso? · #5 (**permalink**) 11/09/2009, 09:50

Hola Matucasal
Cuando un diseño es al 100% de la ventana, alguno de sus componentes tienen que modificar su anchura para cubrir toda la ventana en sus distintos tamaños posibles.
En un diseño de 2 ó 3 "columnas", puedes dejar fijo el tamaño de alguna de ellas (en px) y la otra no definir anchura para que ocupe el resto de la ventana que queda libre.
O puedes marcar las anchuras en %, para que la relación entre ellas siempre sea igual.
Lógicamente, al disminuir la anchura de la ventana ha de crecer la altura de los elementos para seguir alojando el contenido.

Pero siempre es conveniente marcar un ancho mínimo para evitar problemas de colapso a bajas resoluciones y un máximo para evitar lo contrario en grandes.

En el siguiente ejemplo puedes ver el comportamiento de una página con anchura máxima a 1280 px, mínima a 770px y que, entre esos rangos de ventana, ocupa el 100% de su anchura.
Otros supuestos no los contemplo, pero seguramente en una página "real" habría que tenerlos en cuenta. Pero no es el caso.

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding:0; outline: none; border: 0;}
body, html {
    background-color: #444;
    height: 100%;
    width: 100%;
}
#cabecera {
  background: #990000;
  width: 100%;
  height: 5em;
}
#cuerpo {
  position: relative;
  background: #CC3300;
  width: 100%;
  min-width: 770px;
  width: expression(document.body.clientWidth < 771? "770px": "auto" );
  max-width: 1280px;
  width: expression(document.body.clientWidth > 1281? "1280px": "auto");
  margin-bottom: -3em;
  overflow: auto;
  margin: 0 auto;
}
#lateral {
  width: 40%;
  position: relative;
  float: left;
  background: #FF6600;
}
#principal {
  float: left
  position: relative;
  padding: 10px;
  font-family: monospace;
  margin-left: 40%;
}
#pie {
  position: relative;
  height: 3em;
  width: 100%;
  background: #006600;
}
p {text-indent:5em;}
.corte {clear: both;}
</style>
</head>
<body>
<div id="cabecera">
</div>
<div id="cuerpo">
      <div id="lateral">
          <p>Lorem ipsum dolor sit amet consectetuer turpis habitasse tincidunt turpis dolor. Curabitur ut orci venenatis porttitor odio Curabitur justo laoreet mauris nibh. Convallis cursus libero Maecenas risus Curabitur wisi Vivamus urna ac Lorem. Cum auctor velit at Nam vel molestie risus gravida auctor quis. Malesuada dapibus consequat Sed nibh Proin.</p>
<p>Ante pulvinar libero malesuada pellentesque tincidunt vel non a Donec wisi. Sed non ac adipiscing congue pede dictumst enim pede Suspendisse faucibus. Metus id id hendrerit feugiat enim ante Nunc sed cursus Vivamus. Et augue Curabitur Quisque tristique eget elit ac nibh ligula interdum. Et in ac Proin et hac ut pede nulla diam at. Non libero pulvinar mauris at pulvinar nec.</p>
<p>Est neque justo ac et quis Nulla sem porttitor lacinia elit. Justo Nam condimentum Sed Integer Nunc Integer nec semper ut Morbi. Maecenas ipsum interdum dignissim Pellentesque eu et quis venenatis vel malesuada. Vestibulum sapien arcu eros semper.</p>
<p>Pede vitae Cum metus pharetra urna lorem orci id ornare et. Porta a egestas Suspendisse nec libero Curabitur lacinia Phasellus enim et. Tincidunt nulla Curabitur urna mauris massa mauris vel Ut eu fringilla. Ut ut non et Pellentesque leo dolor lobortis turpis quis lacus. Tempor tellus purus Nullam sollicitudin nisl amet consequat orci sem Aenean. Elit et vel Sed quis porttitor tempor tempor elit felis velit. </p>
<p>Tellus massa Morbi neque semper nibh gravida justo vel ligula gravida. Mus eu ac nulla Donec augue Vestibulum eget Nullam lorem faucibus. Nec pellentesque eros adipiscing tellus ac et sed justo metus vitae. Sodales Morbi et risus nec ligula ac Aliquam porttitor Cum Sed. Est sit ac dapibus nunc enim pretium.</p>
<p>Nibh eu a velit et et Nam ante Suspendisse auctor orci. Nisl eu Sed sem nibh massa vitae elit elit eget elit. Sit urna ut Curabitur Morbi adipiscing habitasse tellus eros natoque turpis. Convallis enim leo malesuada Maecenas In nascetur id pulvinar Curabitur pellentesque. Curabitur Nulla.</p>
<p>Dignissim id sit fringilla metus odio mollis et quis quis commodo. A Nulla et fames quis augue consequat libero lobortis in penatibus. Euismod ac id condimentum tincidunt fames turpis tempus Sed semper Phasellus. Feugiat nunc leo Pellentesque Vivamus lacus congue ac id tellus fringilla. Elit.</p>
<p>Eros nec quis ligula senectus sed Ut a ullamcorper interdum dolor. Pretium eget laoreet urna libero metus vitae risus Vestibulum congue scelerisque. Nulla rutrum Mauris justo Vestibulum nibh Pellentesque pretium Aliquam wisi id. Wisi venenatis adipiscing.</p>
<p>Dignissim dignissim vitae a convallis amet ligula augue auctor montes In. Dolor quis leo In purus Lorem neque pretium In magna senectus. Et nibh risus vitae penatibus nibh risus risus Suspendisse congue Morbi. Lobortis tortor Ut at Nunc et risus consectetuer enim volutpat leo. Eget laoreet malesuada elit eget cursus Cras magna sit at laoreet. </p>
<p>Nullam malesuada et interdum Donec enim tincidunt porttitor semper pede Suspendisse. Phasellus quis Vestibulum Curabitur sodales sit tincidunt justo Phasellus pellentesque mattis. Nunc enim dignissim velit ipsum et ipsum cursus nibh.</p>
      </div>
      <div id="principal">
<p>Lorem ipsum dolor sit amet consectetuer turpis habitasse tincidunt turpis dolor. Curabitur ut orci venenatis porttitor odio Curabitur justo laoreet mauris nibh. Convallis cursus libero Maecenas risus Curabitur wisi Vivamus urna ac Lorem. Cum auctor velit at Nam vel molestie risus gravida auctor quis. Malesuada dapibus consequat Sed nibh Proin.</p>
<p>Ante pulvinar libero malesuada pellentesque tincidunt vel non a Donec wisi. Sed non ac adipiscing congue pede dictumst enim pede Suspendisse faucibus. Metus id id hendrerit feugiat enim ante Nunc sed cursus Vivamus. Et augue Curabitur Quisque tristique eget elit ac nibh ligula interdum. Et in ac Proin et hac ut pede nulla diam at. Non libero pulvinar mauris at pulvinar nec.</p>
<p>Est neque justo ac et quis Nulla sem porttitor lacinia elit. Justo Nam condimentum Sed Integer Nunc Integer nec semper ut Morbi. Maecenas ipsum interdum dignissim Pellentesque eu et quis venenatis vel malesuada. Vestibulum sapien arcu eros semper.</p>
<p>Pede vitae Cum metus pharetra urna lorem orci id ornare et. Porta a egestas Suspendisse nec libero Curabitur lacinia Phasellus enim et. Tincidunt nulla Curabitur urna mauris massa mauris vel Ut eu fringilla. Ut ut non et Pellentesque leo dolor lobortis turpis quis lacus. Tempor tellus purus Nullam sollicitudin nisl amet consequat orci sem Aenean. Elit et vel Sed quis porttitor tempor tempor elit felis velit. </p>
<p>Tellus massa Morbi neque semper nibh gravida justo vel ligula gravida. Mus eu ac nulla Donec augue Vestibulum eget Nullam lorem faucibus. Nec pellentesque eros adipiscing tellus ac et sed justo metus vitae. Sodales Morbi et risus nec ligula ac Aliquam porttitor Cum Sed. Est sit ac dapibus nunc enim pretium.</p>
<p>Nibh eu a velit et et Nam ante Suspendisse auctor orci. Nisl eu Sed sem nibh massa vitae elit elit eget elit. Sit urna ut Curabitur Morbi adipiscing habitasse tellus eros natoque turpis. Convallis enim leo malesuada Maecenas In nascetur id pulvinar Curabitur pellentesque. Curabitur Nulla.</p>
<p>Dignissim id sit fringilla metus odio mollis et quis quis commodo. A Nulla et fames quis augue consequat libero lobortis in penatibus. Euismod ac id condimentum tincidunt fames turpis tempus Sed semper Phasellus. Feugiat nunc leo Pellentesque Vivamus lacus congue ac id tellus fringilla. Elit.</p>
<p>Eros nec quis ligula senectus sed Ut a ullamcorper interdum dolor. Pretium eget laoreet urna libero metus vitae risus Vestibulum congue scelerisque. Nulla rutrum Mauris justo Vestibulum nibh Pellentesque pretium Aliquam wisi id. Wisi venenatis adipiscing.</p>
<p>Dignissim dignissim vitae a convallis amet ligula augue auctor montes In. Dolor quis leo In purus Lorem neque pretium In magna senectus. Et nibh risus vitae penatibus nibh risus risus Suspendisse congue Morbi. Lobortis tortor Ut at Nunc et risus consectetuer enim volutpat leo. Eget laoreet malesuada elit eget cursus Cras magna sit at laoreet. </p>
<p>Nullam malesuada et interdum Donec enim tincidunt porttitor semper pede Suspendisse. Phasellus quis Vestibulum Curabitur sodales sit tincidunt justo Phasellus pellentesque mattis. Nunc enim dignissim velit ipsum et ipsum cursus nibh.</p>
<p>Eget wisi elit Vestibulum congue ut quis urna Sed quis tortor. Mattis interdum urna tempor Nam orci et quis Aenean orci eget. Augue odio dui pede convallis nisl sagittis enim et lacinia a. Pede Curabitur consectetuer Ut nec velit lacinia nascetur eget Curabitur gravida. Consequat eros cursus justo Nullam.</p>
<p>Semper tortor interdum sagittis nibh est a pellentesque Vestibulum adipiscing Aenean. Ut at eget Pellentesque nulla Nullam justo odio semper congue hendrerit. Diam justo nulla ultrices facilisi sapien consequat volutpat sapien vitae Pellentesque. </p>
      </div>
      <div class="corte"></div>
</div>
<div id="pie"></div>
</body>
</html>

Espero que te ayude a ver un poco más claro el tema del 100%

Un saludo

matucasal · #6 (**permalink**) 11/09/2009, 10:07

Kseso, si bien tu ejemplo me gusto bastante, hay un par de cosas que no me gustan que es lo que mas me genera poblemas en mis trabajos
Lo del 100 % yo lo habia llegado a entender, pero lo que no me gusta es que a medida que voy achicando el navegador, los divs se vayan achicando con el.
Por ahi me explique mal,
Lo que busco yo es, que mi pagina se vea al menos similar en una resolucion 1024*800 que en una 1300*800. No que quede toda mi pagina tirada para un costado o en el centro y todo lo demas de fondo.
Pero ahora, lo otro que quiero, es que al ir achicando el explorador asi a mano, la pagina quede fijada, nose mueva.
No se si se puede hacer lo que yo busco.
Muchas gracias saludos!

kseso? · #7 (**permalink**) 11/09/2009, 10:13

Pues fija un min-width de 1024px y un max-width de 1300px
Y como te decía, entre esos valores el cuerpo principal de la página se adapta.
A menor resolución a 1024px aparece el scroll horizontal y a mayores a 1300px la página ya no se ensancha y queda centrada.

matucasal · #8 (**permalink**) 11/09/2009, 10:16

Perfecto, eso mismo buscaba.
Si llego a tener un problema te consulto
Gracias enserio!

quarkmarino · #9 (**permalink**) 11/09/2009, 10:44

Hola, mira eso de los 'em' o los porcentajes esta bien, solo que a veces igual no funciona correctamente, si sabes algo de php podrias ocuparlo como yo para construir tu archivo CSS tal como se hace para escribir HTML o lo que sea, y llamar un archivo PHP en lugar de el CSS, seria algo como lo siguiente:

Código HTML:

<link rel="stylesheet" href="style.php" type="text/css" />

a partir de eso pues es obio que puedes hacer algo asi

Código HTML:

<link rel="stylesheet" href="style.php?var=123" type="text/css" />

enviar una variable por el metodo GET

y solo restaria saber con que resolucion nos vamos a 'pelear',

eso seria algo asi

Código HTML:

<head>
	 <script language = "JavaScript">
		 if (screen.width == 800)
			 document.write('<link rel="stylesheet" href="site_style.php?width=800" type="text/css" />');
		 if (screen.width == 1024)
			document.write('<link rel="stylesheet" href="site_style.php?width=1024" type="text/css" />');
	 </script>
</head>

o incluso simplemente

Código HTML:

 <script language = "JavaScript">
		document.write('<link rel = "stylesheet" " href = "style.php?width=',screen.width,' type = "text/css" />');
	</script>

y para terminar en tu archivo CSS-PHP intercalarias algo asi

Código PHP:

      if($_GET['width'] == '1024')
        echo "width                    : 584px;";
    if($_GET['width'] == '1280')
        echo "width                    : 840px;";

para cierta regla que definas, espero que te sirva y a otros mas, por cierto lo descubrí YO SOLITO ehh ehh ehh jeje. bueno ahí les dejo el tip.

matucasal · #10 (**permalink**) 11/09/2009, 10:50

Gracias a vos tambien por el dato.
Probe lo de kseso, y lo que pasa es que ahora como el width de la pagina al ser max ¿width es de 1300, las columnas se separaron cambiando toda la configuracion de la pagina.
Muchas gracias, pero es otra cosa la que busco.
Ahora voy a voy aprobar este css-php para ver como anda

kseso? · #11 (**permalink**) 11/09/2009, 11:03

Si has hecho bien el cambio de los valores para la anchura de #cuerpo, Matucasal, no debería haber desarme ninguno.
El #lateral sigue siendo de 40% y #principal ocupa el resto de la anchura disponible.
Como creo que es lo primero (error al cambiar el ancho) así debería haberte quedado:

Código css:

Ver original#cuerpo {
  position: relative;
  background: #CC3300;
  width: 100%;
  min-width: 1024px;
  width: expression(document.body.clientWidth < 1025? "1024px": "auto" );
  max-width: 1300px;
  width: expression(document.body.clientWidth > 1301? "1300px": "auto");
  overflow: auto;
  margin: 0 auto;
}

Quarkmarino, bienvenido a fdw
Creo que en este supuesto no es necesario el uso ni de php ni js.
Y como mi ignorancia en php y js es bíblica, quizás lo que pregunto ahora es una burrada, pero ¿qué ocurrirá si la ventana del navegador se redimensiona a valores distintos a esos 2 que tú contemplas?

Un saludo

matucasal · #12 (**permalink**) 11/09/2009, 11:17

Que hace el overflow:auto ??
Sigue pasando lo de antes, no es que desarma sino que aparece un "espacio blanco" entre las dos columnas.
Te dejo como me quedo el css

Código css:

Ver originalbody { margin:0;}
#todo{  
        min-width:1024px;
        max-width:1366px;}
#contenido {
}
#header{
    height:200px;
    overflow:hidden;
        width:auto;  
}
#cuerpo {
  position: relative;
  /*background: #CC3300;*/
  width: 100&#37;;
  min-width: 1024px;
  width: expression(document.body.clientWidth < 1025? "1024px": "auto" );
  max-width: 1300px;
  width: expression(document.body.clientWidth > 1301? "1300px": "auto");
  /*overflow: auto;*/
  margin: 0 auto;
  height:900px;
}
    
 
 
#colizq{
    
    height:900px;
    float:left;
    position:absolute;
    width:600px;
    /*background-color:#F00;*/}
#colder{
    
    height:800px;
    float:right;
    width:40%;
    background-color:#360;
       
        }
    
#footer{
    margin-top:20px;
    bottom:25px;
    height:300px;
        background-color:#000;
    
    }

Aclaro que el width 40% lo cambie recien para ver que pasaba, pero elwidth ahi siendo 40 % o 400px es lo mismo.
Nose por donde encarar el problema, ese es mi lio.
Tambien probe cambiando el css de esta manera

Código css:

Ver originalbody { margin:0;}
#todo{  
          position: relative;
  /*background: #CC3300;*/
  width: 100%;
  min-width: 1024px;
  width: expression(document.body.clientWidth < 1025? "1024px": "auto" );
  max-width: 1300px;
  width: expression(document.body.clientWidth > 1301? "1300px": "auto");
  overflow: auto;
  margin: 0 auto;}
#contenido {
}
#header{
    height:200px;
    overflow:hidden;
        width:auto;  
}
#cuerpo {
  width:1000px;
  height:900px;
margin: 0 auto;
}
    
 
 
#colizq{
    
    height:900px;
    float:left;
    position:absolute;
    width:600px;
    /*background-color:#F00;*/}
#colder{
    
    height:800px;
    float:right;
    width:40%;
    background-color:#360;
       
        }
    
#footer{
    margin-top:20px;
    bottom:25px;
    height:300px;
        background-color:#000;
    
    }

Queda bastante mejor,pero me sucede en las dos columnas del header lo mismo, que se deslizan los divs internos segun el tamaño del explorador, y lo mismo en el footer. Pero igualmente, queda muy bien asi.
Graciaas nuevamente

quarkmarino · #13 (**permalink**) 11/09/2009, 11:22

Una pregunta nunca es una burrada, mucho menos cuando me hace ver mi error, el ejemplo maneja 'px' por decir algo, pero podrían ser 'em' o los mismos % sin embargo, tampoco soy un guru, y lo que no sabia era que se podian usar expresiones en CSS, lo cual es muy buen tip, la cuestion seria ver si consigues lo que buscas, en particular yo uso PHP para construir el CSS por que utilizo informacion de una base de datos, lo cual no seria posible simplemente con CSS, bueno eso me salvo a mi, y esperaba que le sirviera a alguien mas, gracias por la info.

quarkmarino · #14 (**permalink**) 11/09/2009, 11:24

Una pregunta nunca es una burrada, mucho menos cuando me hace ver mi error, el ejemplo maneja 'px' por decir algo, pero podrían ser 'em' o los mismos % sin embargo, tampoco soy un guru, y lo que no sabia era que se podian usar expresiones en CSS, lo cual es muy buen tip, la cuestion seria ver si consigues lo que buscas, en particular yo uso PHP para construir el CSS por que utilizo informacion de una base de datos, lo cual no creo se pueda hacer simplemente con CSS, aunque habría que ver hasta donde pueden llegar esas expresiones de CSS.
Bueno en fin, eso me salvo a mi, y esperaba que le sirviera a alguien mas, gracias por la info.

kseso? · #15 (**permalink**) 11/09/2009, 14:14

Quarkmarino, esa expresión no es css estándar, y el validador marcará un error. Pero ie no entiende el min y max, así que en un caso real debería ir en hoja de estilo aparte y llamada con un condicional.

El overflow "límpia" el flotado de las columnas centrales, hace que la caja que las contiene crezca junto a ellas.
El espacio en blanco no se de donde puede salir, no vemos tu html.
Pero si te has fijado, en las columnas centrales hay un margen en una que coincide con la anchura en de la otra.

Si quieres puedes ver más ejemplos de layouts en estas páginas:
www.araudi.net
www.cssplay.co.uk
http://matthewjamestaylor.com

Posiblemente se adapten mejor a lo que andas buscando.

Un saludo