2 columnas dinámicas y 1 fija

Operadormail · #1 (**permalink**) 16/11/2006, 11:16

Hola a todos

Estoy intentando hacer un diseño que se adapte a la resolución de pantalla de la siguiente forma.

1 capa (izquierda) con widht dinámico
1 capa (centro) con width fijo (770 px)
1 capa (derecha) con widht dinámico

De forma que en resoluciones de pantalla más grandes la capa izquierda y la derecha se redimensionen dejando la del centro con su ancho fijo, en el medio.

alguna sugerencia???

opeth · #2 (**permalink**) 16/11/2006, 23:11

aquí hay algo similar a lo que intentas.
http://www.stuffandnonsense.co.uk/ar...an_layout.html

Operadormail · #3 (**permalink**) 06/12/2006, 10:12

no consigo que me funcione
Algun ejemplo más claro???

Gracias anticipadas

fearlex · #4 (**permalink**) 06/12/2006, 11:18

Creas tu capa media en px, y las de los laterales con %, y posicionas la capa izq: 0px a la izquierda, y la capa derecha 0px a la derecha.

Prueba a ver.

Esto es solo una variante existen otras quizas mas faciles.

Operadormail · #5 (**permalink**) 06/12/2006, 11:36

Este es el codigo de la prueba pero no consigo nada

Código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style>
body {
	margin:0px;
	padding:0px;
	}
#container {
	width:100%;
	padding:0px;
	text-align:center;
	}
#iz {
	width:auto;
	background-color:#00FFFF;
	float:left;
	}
#centro {
	width:770px;
	height:50px;
	float:left;
	background-color:#FFFF99	
}
#dr {
	width:auto;
	background-color:#00FFFF;
	float:right;
	}
	
	</style>
</head>

<body leftmargin="0" topmargin="0" s>
<div id="container">
	<div id="iz">&nbsp;
	</div>
	<div id="centro">&nbsp;
	</div>
	<div id="dr">&nbsp;
	</div>
</div>
</body>
</html>

Sugerencias??

kahlito · #6 (**permalink**) 06/12/2006, 22:18

Hola Operadormail, opeth y fearlex te han pasado buenos ejemplos, deberias intentarlo

En tu caso tienes poner un ancho establecido por ejemplo prueba con 10% en izquierda y derecha. De todas formas te paso otros ejemplos que te pueden servir

http://www.glish.com/css/2.asp
http://bluerobot.com/web/layouts/layout3.html
http://www.intensivstation.ch/files/...es/temp03.html
http://www.thenoodleincident.com/tut...on/basic3.html

Saludosss

Operadormail · #7 (**permalink**) 07/12/2006, 01:44

Hola de nuevo.

Gracias por las respuestas, pero mi problema no es hacer liquidas las 3 columnas, sino las 2 de los lados y la del centro con un ancho fijo (en este caso 770 px) que lo que no consigo...

Mikmoro · #8 (**permalink**) 07/12/2006, 03:21

Dime una cosa: ¿qué es lo que querrías poner en las columnas de los lados? Es que según lo que vayas a poner, puede haber alguna otra solución.
Mikel.

T_O_N_N_Y · #9 (**permalink**) 07/12/2006, 03:27

Exacto Mikmoro, porque si lo que quiere es que se adapte a todas las resoluciones (por lo menos a las más utilizadas (800x600 y 1024x768), van a tener problemas los de 800x600.

Mira, si la columna central tiene 770px, la barra de desplazamiento son unos 15px más o menos. 770+15=785px, por lo que en 15px tendrías que poner las otras dos columnas. Y mi pregunta es en 7 u 8 px vas a meter la información que quieras en las columnas laterales?

Por tanto, dependiendo de qué quieras meter en cada una de las columnas te podremos dar una solución u otra.

Saludos!!

kahlito · #10 (**permalink**) 07/12/2006, 09:12

Aparte de esto último que te explican te sigo sugeriendo lo citado arriba:

Cita:

Iniciado por kahlito

Hola Operadormail, opeth y fearlex te han pasado buenos ejemplos, deberias intentarlo

En tu caso tienes poner un ancho establecido por ejemplo prueba con 10% en izquierda y derecha.

Saludosss

Operadormail · #11 (**permalink**) 15/12/2006, 09:35

En las columnas laterales no hay ningun contenido, sino una imagen que se repite en el eje x para completar un mosaico con respecto a la columna central.
La imagen va como background-image.

Sugernecias?

Mikmoro · #12 (**permalink**) 15/12/2006, 12:20

En ese caso puede ser muy sencillo: en lugar de usar 3 columnas, usas una capa de fondo que ocupe el 100% y luego tu columna central, centrada sobre ella. Con eso consigues tu columna central fija y el fondo es líquido, siempre equilibrado a ambos lados. Luego ya se tratará de usar desplazamientos del fondo para encajarlo con el mosaico del centro.

Código:

<html>
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <title>Documento sin t&iacute;tulo</title>
  <style>
body {
margin:0px;
padding:0px;
}
#container {
width:100%;
padding:0px;
background-color:#00FFFF;
}
#centro {
margin: 0 auto;
width:770px;
height:50px;
background-color:#FFFF99; }
  </style>
</head>
<body>
<div id="container">
<div id="centro"></div>
</div>
</body>
</html>

Si resulta imposible encajar el mosaico a ambos lados (por alguna razón), podrás usar dos capas de fondo al 50% en lugar de una, y usar en cada una el desplazamiento del fondo que necesite hasta que quede perfecto.

Espero que te sirva.
Mikel.