problema 3 columnas

fueradejuego · #1 (**permalink**) 20/02/2007, 02:57

Hola,

he probado ya varias "soluciones" que he encontrado por internet pero no consigo arreglarlo de ninguna forma.

Lo que necesito hacer es una web con 3 columnas, dos pequeñas a los laterales (de color rojo) y una grande en el centro. Lo mas importante es que la columna centrar nunca se haga mas pequeña de unos 780 u 800px. pero si debe expandirse si la resolucion de pantalla es mayor.

Las 3 columnas deberian quedarse en la misma linea, viendose una columna pequeña de color rojo a la izquierda, una grande de color blanco en el centro y otra pequeña de color rojo a la derecha.

Viendolo maximizado no tengo ningun problema, pero cuando hago la ventana mas pequeña necesitaria que apareciese un scroll horizontal y que la columna centrar no se haga mas pequeña de 800px.

Probe a hacerlo con por porcentajes, con las columnas pequeñas al 11% y la central al 78%, pero no conseguí establecer el tamaño minimo de ancho a la columna central.

Os pongo el codigo por si alguien lo puede mirar un poco o si alguien tiene alguna idea.

Un saludo y gracias por anticipado

HTML

Código:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Web</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="web">
		<div id="back_left"></div>
		<div id="content"></div>
		<div id="back_right"></div>
	</div>
</body>
</html>

CSS

Código:

* {
	margin:0;
	padding:0;
	border:0;
	}

html {
	margin:0;
	padding:0;
	border:0;
	width:100%;
	height:100%;
}
body {
	height:100%;
	}
	
#web {
	width:100%;
	min-width:1024px;
	height:100%;
	margin:0;
	padding:0;
	border:0;	
	}
	
#back_left{
	width:11%;
	min-width:110px;	
	height:100%;
	float:left;
	margin:0;
	padding:0;
	border:0;
	background-color:#FF0000;
	}
	
#back_right{
	width:11%;
	min-width:110px;
	height:100%;
	float:right;
	margin:0;
	padding:0;
	border:0;	
	background-color:#FF0000;	
	}	

#content {
	min-width:790px;
	width:78%;
	height:500px;
	float:left;
	margin:0;
	padding:0;
	border:0;	
	}

Mikmoro · #2 (**permalink**) 20/02/2007, 05:23

Prueba con este código, a ver si te sirve para lo que quieres;

Código:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Web</title>
  <style type="text/css">
* { border: 0pt none ;
margin: 0pt;
padding: 0pt;
}
html, body { height: 100%;
width:100%;
}
#web { border: 0pt none ;
margin: 0pt;
padding: 0pt;
min-width:800px;
width:expression(document.body.clientWidth < 790? "790px": "auto" );
height: 100%;
}
#back_left { border: 0pt none ;
margin: 0pt;
padding: 0pt;
height: 100%;
float: left;
background-color: rgb(255, 0, 0);
width: 110px;
}
#back_right { border: 0pt none ;
margin: 0pt;
padding: 0pt;
float: right;
background-color: rgb(255, 0, 0);
width: 110px;
height: 100%;
}
#content { border: 0pt none ;
margin: 0pt;
padding: 0pt;
min-width: 790px;
height: 500px;
float: left;
}
  </style>
</head>
<body>
<div id="web">
<div id="back_left"></div>
<div id="back_right"></div>
<div id="content">
</div>
</div>
</body>
</html>

Mikel.

fueradejuego · #3 (**permalink**) 20/02/2007, 05:41

Muchas gracias por el codigo, pero tampoco me sirve. Con eso se arregla el tamaño minimo de la pagina y evita el que se descuadre si haces la ventana mas pequeña. Pero si la haces mas grande el contenido se te queda del mismo tamaño, y necesito que se estire.

He modificado un poco el codigo para que el contenido tenga un tamaño de 790px. Solo el contenido sin contar las columnas de los lados. Pero si veo la pagina en 1280 de resolucion, las columnas se posicionan bien en los lados, pero el contenido se alinea a la izquierda y mantiene el mismo tamaño de siempre, dejando media pagina vacia.

Realmente ya pienso que esto que pido no se puede hacer (mas bien esto que me piden) , a ver como se lo explico al jefe para hacer la web de un tamaño fijo y evitar problemas, jejeje

Mikmoro · #4 (**permalink**) 20/02/2007, 06:25

Poderse sí que se puede, pero siempre hay que ver el caso concreto y las peculiaridades de los contenidos, etc.
Prueba con esto:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <title>Web</title>
  <style type="text/css">
* { border: 0pt none ;
margin: 0pt;
padding: 0pt;
}
html, body { height: 100%;
width: 100%;
}
#web { border: 0pt none ;
margin: 0pt;
padding: 0pt;
height: 100%;
min-width:1010px;
width:expression(document.body.clientWidth < 1010? "1010px": "auto" );
}
#back_left { border: 0pt none ;
margin: 0pt;
padding: 0pt;
height: 100%;
float: left;
background-color: rgb(255, 0, 0);
width: 110px;
}
#back_right { border: 0pt none ;
margin: 0pt;
padding: 0pt;
float: right;
background-color: rgb(255, 0, 0);
height: 100%;
width: 110px;
}
#content { border: 0pt none ;
margin: 0pt;
padding: 0pt;
height: 500px;
background-color: rgb(0, 153, 0);
}
  </style>
</head>
<body>
<div id="web">
<div id="back_left"></div>
<div id="back_right"></div>
<div id="content">nadgnadg
</div>
</div>
</body>
</html>

A ver qué tal.

Mikel.

luface2000 · #5 (**permalink**) 20/02/2007, 06:40

Yo no te puedo ayudar mucho con código porque estoy empezando con el HTML + CSS, pero hay páginas a tres columnas en las que la columana central se expande a tu voluntad. Por ejemplo la web de videoedicion.org en la que en la parte alta de la página, justo donde empiezan las dos columnas laterales, hay unas flechas que pulsando sobre ellas, las ocultas o las expandes y como resultado el centro se adapta. Por lo que si se puede hacer.

Saludos.

fueradejuego · #6 (**permalink**) 20/02/2007, 07:59

Muchisimas gracias Mikmoro, ya habia probado eso que me has puesto con el 1010px exactamente, pero de las pruebas anteriores que hice se me olvido quitar una linea con width de otro sitio y es lo que hacia que saliera mal.

Con este codigo creo que puedo montar la web como me hace falta.

para luface2000:

La web que me comentas es similar, pero no tiene un ancho minimo en la columna central, eso ya lo habia hecho yo. En esa web el ancho minimo es el ancho del objeto de mayor anchura que hay dentro (en este caso una imagen).
Pero gracias igualmente

Un saludo y gracias a los dos.

Mikmoro · #7 (**permalink**) 20/02/2007, 09:22

Cita:

Iniciado por fueradejuego

Muchisimas gracias Mikmoro, ya habia probado eso que me has puesto con el 1010px exactamente, pero de las pruebas anteriores que hice se me olvido quitar una linea con width de otro sitio y es lo que hacia que saliera mal.

Y quitar el float left de esa capa para que ocupe todo el espacio disponible.
Me alegro de que te sirva. Como vés, el truco está en dar el ancho mínimo al bloque contenedor en lugar de al bloque central, para que no se descuadren los elementos que tiene dentro, y no dar tamaño ni posición al bloque central para que ocupe todo su espacio.

Hasta la vista.

Mikel.

tocalasam · #8 (**permalink**) 20/02/2007, 15:08

quero hacer lo mismo pero con 3 columnas de tamañao fijo 150px/450px/150px

¿que hago mal??

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Web</title>
<style type="text/css">
* { border: 0pt none ;
margin: 0pt;
padding: 0pt;
}
html, body { width: 750px;
}
#web { border: 0pt none ;
margin: 0pt;
padding: 0pt;

}
#back_left { border: 0pt none ;
margin: 0pt;
padding: 0pt;
height: 20%;
float: left;
background-color: rgb(255, 0, 0);
width: 150px;
}
#back_right { border: 0pt none ;
margin: 0pt;
padding: 0pt;
float: right;
background-color: rgb(255, 0, 0);
height: 20%;
width: 150px;
}
#content { border: 0pt none ;
margin: 0pt;
padding: 0pt;
height: 450px;
background-color: rgb(0, 153, 0);
}
</style>
</head>
<body>
<div id="web">
<div id="back_left">  </div>
<div id="back_right"> </div>
<div id="content"></div>
</div>
</body>
</html>

Mikmoro · #9 (**permalink**) 20/02/2007, 16:45

¿Con "hacer lo mismo" te refieres a que la columna central tenga un ancho mínimo y se adapte (o crezca) con anchos mayores?

Mikel.

tocalasam · #10 (**permalink**) 21/02/2007, 14:19

NO, quise decir que las tres columnas tengan un ancho fijo

Mikmoro · #11 (**permalink**) 21/02/2007, 15:31

Ah, pues debe ser que en el selector "#content" tienes puesto 450px como height, en lugar de como width:

#content { border: 0pt none ;
margin: 0pt;
padding: 0pt;
height: 450px;
background-color: rgb(0, 153, 0);
}

Y alguna otra cosilla que te apunto:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <title>Web</title>
  <style type="text/css">
* { border: 0pt none ;
margin: 0pt;
padding: 0pt;
}
html, body { width: 100%;
height: 100%;
text-align: center;
}
#web {
margin: 0pt auto;
padding: 0pt;
width: 750px;
height: 100%;
position: relative;
text-align: left;
}
#back_left { border: 0pt none ;
margin: 0pt;
padding: 0pt;
height: 20%;
float: left;
background-color: rgb(255, 0, 0);
width: 150px;
}
#back_right { border: 0pt none ;
margin: 0pt;
padding: 0pt;
float: right;
background-color: rgb(255, 0, 0);
height: 20%;
width: 150px;
}
#content { border: 0pt none ;
margin: 0pt;
padding: 0pt;
width: 450px;
background-color: rgb(0, 153, 0);
height: 20%;
float: left;
}
  </style>
</head>
<body>
<div id="web">
<div id="back_left"></div>
<div id="back_right"></div>
<div id="content"></div>
</div>
</body>
</html>

Mikel.

tocalasam · #12 (**permalink**) 21/02/2007, 15:59

muchas gracias, pero ahora me encuentro con que el IE lo alinea a la izquierda que es lo que quiero pero en cambio el mozilla no,
¿que he poner para que el fierfox lo reconozca?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Web</title>
<style type="text/css">
* { border: 0pt none ;
margin: 0pt;
padding: 0pt;
}
html, body { width: 100%;
height: 100%;
text-align: left;
}
#web {
margin: 0pt auto;
padding: 0pt;
width: 750px;
height: 100%;
position: relative;
text-align: left;
}
#back_left { border: 0pt none ;
margin: 0pt;
padding: 0pt;
height: 20%;
float: left;
background-color: rgb(255, 0, 0);
width: 150px;
}
#back_right { border: 0pt none ;
margin: 0pt;
padding: 0pt;
float: right;
background-color: rgb(255, 0, 0);
height: 20%;

}
#content { border: 0pt none ;
margin: 0pt;
padding: 0pt;
width: 450px;
background-color: rgb(0, 153, 0);
height: 20%;
float: left;
}
</style>
</head>
<body>
<div id="web">
<div id="back_left"></div>
<div id="back_right"> </div>
<div id="content"></div>
</div>

Mikmoro · #13 (**permalink**) 21/02/2007, 16:51

Ah, pues es que creía que lo querías centrado (cuando has dicho "quiero hacer lo mismo pero...", en realidad se parecía más bien poco).

Elimina la línea que te señalo en negrita:

#web {
margin: 0pt auto;
padding: 0pt;
width: 750px;
height: 100%;
position: relative;
text-align: left;
}

Mikel.

tocalasam · #14 (**permalink**) 22/02/2007, 15:46

ok, eres el mejor, pero......... ¿y si quisiera añadir un header y un footer?
O sea una fila por encima y una por debajo ¿como deberia hacerlo?

Mikmoro · #15 (**permalink**) 22/02/2007, 17:46

Pues te bastaría con añadir estas dos clases:

#header, #footer { width: 100%;
height: 40px;
background-color: rgb(51, 102, 255);
}
#footer {
background-color: rgb(0, 0, 153);
clear: both;
}

Y luego añadir esos dos div al html:

<body>
<div id="web">
<div id="header"></div>
<div id="back_left"></div>
<div id="back_right"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>

Mikel.

P.D.: eso de "ok, eres el mejor, pero...", me suena bastante peyorativo. No sé si de verdad te interesa o me estás vacilando.

tocalasam · #16 (**permalink**) 23/02/2007, 10:58

arratxaldeon mikel.
siempre de buen rollo, por favor

disculpa si te he podido moelstar.no era mi intencion

salu2

Mikmoro · #17 (**permalink**) 23/02/2007, 11:18

Aupa. Eso esperaba, por eso te lo he comentado, si no, hubiera pasado de todo. Lo que pasa es que a mi esas expresiones tipo "qué pasa, campeón", y cosas por el estilo, me suenan faltonas, como que te estás quedando con el otro, y no tenía claro por dónde ibas.

Espero que te sirva la solución que te he puesto para lo que quieres. Si no, consulta y entre todos veremos a ver.

Mikel.

tocalasam · #18 (**permalink**) 23/02/2007, 17:35

no hay manera, IE me alinea el content debajo de la columna izquierda, en cambio en firefox la parte de arriba se ve ok, pero el footer me lo coloca donde empieza el content.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Web</title>
<style type="text/css">
* { border: 0pt none ;
margin: 0pt;
padding: 0pt;
}
html, body { width: 100%;
height: 100%;
text-align: left;
background-color: #ffffff;
}

#web {

padding: 0pt;
width: 750px;
height: 100%;
position: relative;
text-align: left;
}

#header, #footer { width: 100%;
height: 40px;
text-align: left;
background-color: rgb(51, 102, 255);
}

#back_left { border: 0pt none ;
margin: 0pt;
padding: 0pt;
height: 20%;
float: left;
background-color: white;
width: 150px;
}

#content { border: 0pt none ;
margin: 0pt;
padding: 0pt;
width: 450px;
background-color: white;
height: 20%;
float: left;
}

#back_right { border: 0pt none ;
margin: 0pt;
padding: 0pt;
float: right;
background-color: white;
height: 20%;
width: 150px;

}

#footer {
background-color: rgb(0, 0, 153);
text-align: left;
clear: both;
}
</style>
</head>

<body>
<div id="web">
<div id="header"></div>
<div id="back_left"></div>
<div id="back_right"> </div>
<div id="content"></div>
<div id="footer"></div>
</div>

¿que hago mal?

Mikmoro · #19 (**permalink**) 23/02/2007, 17:50

Bueno, no creo que estés haciendo nada mal. Cuando mandaste el primer ejemplo, en tus 3 columnas tenías puesto un 20% de altura, y yo seguí con tu ejemplo, dando por supueso que le ponías una altura cualquiera para ver el efecto.

En esta última modificación, al añadirle la cabecera y el pie, he seguido con tu ejemplo, y lógicamente salen todas las columnas más bien apretadas en la parte de arriba (con un 20% de altura). Cambia esos porcentajes y de momento ya todo crecerá y mejorará, como para poder colocarlo como quieras.

Igual la mejor idea sería que, como tienes todo el contenido en includes, ejecutes el archivo en el navegador y de éste cojas el código html generado y lo pongas aquí, para que podamos ver el resultado final, a fin de mirar entre todos las correcciones que pudieran hacer falta.

Mikel.

tocalasam · #20 (**permalink**) 23/02/2007, 19:41

Al final casi lo he conseguido, pero ahora tengo un problema que entre las 3 filas del header me genera un pixel, espacio, llamese como quiera.
¿hay algun manera de ignorarlo?

solo pasa en IE, claro.

<style type="text/css">

* { border: 1pt none ;

margin: 0pt;
padding: 0pt;
}

html, body { width: 100%;
height: 100%;
text-align: left;
background-color: #ffffff;
}

#web {
padding: 0pt;
width: 750px;
height: 100%;
position: relative;
text-align: left;
background-color: black;
}

#header { width: 100%;
height: 80px;
text-align: left;
background-color: black;

}

#header2 { width: 100%;
height: 130px;
text-align: left;
background-color: black;
}

#header3 { width: 100%;
height: 55px;
text-align: left;
background-color: white;
}

#back_left { border: 0pt none ;
margin: 0pt;
padding: 0pt;
width: 150px;
height: 600px;
float: left;
background-color: white;

}
#back_right { border: 0pt none ;
margin: 0pt;
padding: 0pt;
width: 150px;
float: right;
background-color: white;
height: 600px;

}
#content { border: 0pt none ;
margin: 0pt;
padding: 0pt;
width: 450px;
background-color: white;
height: 600px;
float: left;
}

#footer {
background-color: #cccccc;
text-align: left;
clear: both;
}

</style>
</head>

<body>
<div id="web">
<div id="header"></div>
<div id="header2"></div>
<div id="header3"></div>
<div id="back_left"></div>
<div id="back_right"> </div>
<div id="content"></div>
<div id="footer"></div>
</div>