Foros del Web » Creando para Internet » CSS »

2 columnas dinámicas y 1 fija

Estas en el tema de 2 columnas dinámicas y 1 fija en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/11/2006, 11:16
 
Fecha de Ingreso: junio-2003
Mensajes: 778
Antigüedad: 14 años, 6 meses
Puntos: 1
2 columnas dinámicas y 1 fija

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???
  #2 (permalink)  
Antiguo 16/11/2006, 23:11
Avatar de opeth  
Fecha de Ingreso: junio-2004
Ubicación: Distrito Federal, México
Mensajes: 338
Antigüedad: 13 años, 6 meses
Puntos: 0
aquí hay algo similar a lo que intentas.
http://www.stuffandnonsense.co.uk/ar...an_layout.html
__________________
Mi blog
  #3 (permalink)  
Antiguo 06/12/2006, 10:12
 
Fecha de Ingreso: junio-2003
Mensajes: 778
Antigüedad: 14 años, 6 meses
Puntos: 1
Re: 2 columnas dinámicas y 1 fija

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

Gracias anticipadas
  #4 (permalink)  
Antiguo 06/12/2006, 11:18
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Re: 2 columnas dinámicas y 1 fija

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.
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #5 (permalink)  
Antiguo 06/12/2006, 11:36
 
Fecha de Ingreso: junio-2003
Mensajes: 778
Antigüedad: 14 años, 6 meses
Puntos: 1
Re: 2 columnas dinámicas y 1 fija

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??
  #6 (permalink)  
Antiguo 06/12/2006, 22:18
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: 2 columnas dinámicas y 1 fija

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
  #7 (permalink)  
Antiguo 07/12/2006, 01:44
 
Fecha de Ingreso: junio-2003
Mensajes: 778
Antigüedad: 14 años, 6 meses
Puntos: 1
Re: 2 columnas dinámicas y 1 fija

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...
  #8 (permalink)  
Antiguo 07/12/2006, 03:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: 2 columnas dinámicas y 1 fija

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.
  #9 (permalink)  
Antiguo 07/12/2006, 03:27
 
Fecha de Ingreso: octubre-2006
Ubicación: Quart de Poblet, Valencia
Mensajes: 767
Antigüedad: 11 años, 1 mes
Puntos: 8
Re: 2 columnas dinámicas y 1 fija

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!!
  #10 (permalink)  
Antiguo 07/12/2006, 09:12
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: 2 columnas dinámicas y 1 fija

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

Cita:
Iniciado por kahlito Ver Mensaje
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
  #11 (permalink)  
Antiguo 15/12/2006, 09:35
 
Fecha de Ingreso: junio-2003
Mensajes: 778
Antigüedad: 14 años, 6 meses
Puntos: 1
Re: 2 columnas dinámicas y 1 fija

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?
  #12 (permalink)  
Antiguo 15/12/2006, 12:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: 2 columnas dinámicas y 1 fija

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:23.