Foros del Web » Creando para Internet » CSS »

problema 3 columnas

Estas en el tema de problema 3 columnas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/02/2007, 02:57
Avatar de fueradejuego  
Fecha de Ingreso: abril-2003
Ubicación: Málaga - España
Mensajes: 94
Antigüedad: 14 años, 7 meses
Puntos: 0
problema 3 columnas

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;	
	}
  #2 (permalink)  
Antiguo 20/02/2007, 05:23
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: problema 3 columnas

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.
  #3 (permalink)  
Antiguo 20/02/2007, 05:41
Avatar de fueradejuego  
Fecha de Ingreso: abril-2003
Ubicación: Málaga - España
Mensajes: 94
Antigüedad: 14 años, 7 meses
Puntos: 0
Re: problema 3 columnas

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
  #4 (permalink)  
Antiguo 20/02/2007, 06:25
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: problema 3 columnas

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.
  #5 (permalink)  
Antiguo 20/02/2007, 06:40
 
Fecha de Ingreso: octubre-2006
Mensajes: 165
Antigüedad: 11 años, 1 mes
Puntos: 2
Re: problema 3 columnas

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.
  #6 (permalink)  
Antiguo 20/02/2007, 07:59
Avatar de fueradejuego  
Fecha de Ingreso: abril-2003
Ubicación: Málaga - España
Mensajes: 94
Antigüedad: 14 años, 7 meses
Puntos: 0
Re: problema 3 columnas

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.
  #7 (permalink)  
Antiguo 20/02/2007, 09:22
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: problema 3 columnas

Cita:
Iniciado por fueradejuego Ver Mensaje
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.
  #8 (permalink)  
Antiguo 20/02/2007, 15:08
 
Fecha de Ingreso: julio-2003
Ubicación: Barcelona
Mensajes: 142
Antigüedad: 14 años, 4 meses
Puntos: 1
Re: problema 3 columnas

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"> <!-- #include file='../banner_LILA.htm' --> </div>
<div id="back_right"><!-- #include file='../faqs_home.asp' --> </div>
<div id="content"><!-- #include file='../home_center_1.asp' --></div>
</div>
</body>
</html>
  #9 (permalink)  
Antiguo 20/02/2007, 16:45
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: problema 3 columnas

¿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.
  #10 (permalink)  
Antiguo 21/02/2007, 14:19
 
Fecha de Ingreso: julio-2003
Ubicación: Barcelona
Mensajes: 142
Antigüedad: 14 años, 4 meses
Puntos: 1
Re: problema 3 columnas

NO, quise decir que las tres columnas tengan un ancho fijo
  #11 (permalink)  
Antiguo 21/02/2007, 15:31
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: problema 3 columnas

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.

Última edición por Mikmoro; 21/02/2007 a las 15:37 Razón: Añadir centrado horizontal
  #12 (permalink)  
Antiguo 21/02/2007, 15:59
 
Fecha de Ingreso: julio-2003
Ubicación: Barcelona
Mensajes: 142
Antigüedad: 14 años, 4 meses
Puntos: 1
Re: problema 3 columnas

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"><!-- #include file='../banner_LILA.htm' --></div>
<div id="back_right"><!-- #include file='../faqs_home.asp' --> </div>
<div id="content"><!-- #include file='../home_center_1.asp' --></div>
</div>
  #13 (permalink)  
Antiguo 21/02/2007, 16:51
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: problema 3 columnas

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.
  #14 (permalink)  
Antiguo 22/02/2007, 15:46
 
Fecha de Ingreso: julio-2003
Ubicación: Barcelona
Mensajes: 142
Antigüedad: 14 años, 4 meses
Puntos: 1
Re: problema 3 columnas

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?
  #15 (permalink)  
Antiguo 22/02/2007, 17:46
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: problema 3 columnas

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.
  #16 (permalink)  
Antiguo 23/02/2007, 10:58
 
Fecha de Ingreso: julio-2003
Ubicación: Barcelona
Mensajes: 142
Antigüedad: 14 años, 4 meses
Puntos: 1
Re: problema 3 columnas

arratxaldeon mikel.
siempre de buen rollo, por favor

disculpa si te he podido moelstar.no era mi intencion

salu2
  #17 (permalink)  
Antiguo 23/02/2007, 11:18
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: problema 3 columnas

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.
  #18 (permalink)  
Antiguo 23/02/2007, 17:35
 
Fecha de Ingreso: julio-2003
Ubicación: Barcelona
Mensajes: 142
Antigüedad: 14 años, 4 meses
Puntos: 1
Re: problema 3 columnas

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"><!-- #include file='../top_edirol.htm' --></div>
<div id="back_left"><!-- #include file='../banner_LILA.htm' --></div>
<div id="back_right"><!-- #include file='../faqs_home.asp' --> </div>
<div id="content"><!-- #include file='../home_center_5.asp' --></div>
<div id="footer"><!-- #include file='../footer.htm' --></div>
</div>




¿que hago mal?
  #19 (permalink)  
Antiguo 23/02/2007, 17:50
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: problema 3 columnas

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.
  #20 (permalink)  
Antiguo 23/02/2007, 19:41
 
Fecha de Ingreso: julio-2003
Ubicación: Barcelona
Mensajes: 142
Antigüedad: 14 años, 4 meses
Puntos: 1
Re: problema 3 columnas

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"><!-- #include file='top_edirol.htm' --></div>
<div id="header2"><!-- #include file='azar.asp' --></div>
<div id="header3"><!-- #include file='barra_edirol.htm' --></div>
<div id="back_left"><!-- #include file='banner_LILA.htm' --></div>
<div id="back_right"><!-- #include file='faqs_home.asp' --> </div>
<div id="content"><!-- #include file='home_center_6.asp' --></div>
<div id="footer"><!-- #include file='footer.htm' --></div>
</div>
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:47.