Foros del Web » Creando para Internet » CSS »

Columnas siempre del mismo tamaño

Estas en el tema de Columnas siempre del mismo tamaño en el foro de CSS en Foros del Web. Hola gente. Mirando por el FAQ de CSS he encontrado este ejemplo: http://www.forosdelweb.com/f53/faqs-css-114830/index3.html#post2593702 Pero por lo que veo me condiciona un poco. Yo quiero 3 ...
  #1 (permalink)  
Antiguo 12/01/2010, 06:36
 
Fecha de Ingreso: diciembre-2009
Mensajes: 40
Antigüedad: 8 años
Puntos: 0
Columnas siempre del mismo tamaño

Hola gente.

Mirando por el FAQ de CSS he encontrado este ejemplo: http://www.forosdelweb.com/f53/faqs-css-114830/index3.html#post2593702
Pero por lo que veo me condiciona un poco. Yo quiero 3 columnas, y no quiero definir el tamaño de la página con px, sino con %.

Ahora mismo mi código es el siguiente:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Columnas equilibradas</title>
	<style type="text/css">
		body{font:100%;}
		#pagina {
		}
		#cabecera{
			background:olive;
			width:98%;
			height:80px;
		}
		#cab_izquierda{
			float:left;
			width:24%;
		}
		#cab_derecha{
			float:left;
			width:24%;
		}
		#cab_centro{
			float:left;
			width:50%;
		}
		#pie{
			background:olive;
			width:98%;
			height:40px;
			clear:left;
		}
		#pie_izquierda{
			float:left;
			width:24%;
		}
		#pie_derecha{
			float:left;
			width:24%;
		}
		#pie_centro{
			float:left;
			width:50%;
		}
		#contenido{
			height:auto;
		}
		#izquierda{
			float:left;
			background:red;
			width:24%;
		}
		#central{
			float:left;
			background:blue;
			width:50%;
		}
		#derecha{
			float:left;
			background:red;
			width:24%;
		}
		.clear
		{
			clear: both;
		}
	</style>
</head>
<body>
<div id="pagina">
	<div id="cabecera">
		<div id="cab_izquierda">&nbsp;</div>
		<div id="cab_centro">Cabecera</div>
		<div id="cab_derecha">&nbsp;</div>
	</div>
	<div id="contenido">
		<div id="izquierda">
			a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
		</div>
		<div id="central">Columna central</div>
		<div id="derecha">
			a<br/>a<br/>a<br/>
		</div>
	</div><br class="clear" />
	<div id="pie">
		<div id="pie_izquierda">&nbsp;</div>
		<div id="pie_centro">Pie</div>
		<div id="pie_derecha">&nbsp;</div>
	</div>
</div>
<?php mysql_close($conn);?>
</body>
</html>
No soy experto en CSS pero me defiendo.

Alguien me puede decir como hacerlo para que todas las columnas se vean del mismo tamaño?

El ejemplo en cuestión está sacado de la web: http://www.grafikas.es/web_apuntes/capas.htm

Muchas gracias por adelantado y saludos.
  #2 (permalink)  
Antiguo 12/01/2010, 17:06
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Columnas siempre del mismo tamaño

Hola:

Mira este otro ejemplo, solo tienes que cambiar las medidas en px por % adaptándolo a tus necesidades.

Saludos.

  #3 (permalink)  
Antiguo 12/01/2010, 17:07
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Columnas siempre del mismo tamaño

Perdón, no se que he hecho pero he repetido la respuesta.

Saludos.

  #4 (permalink)  
Antiguo 13/01/2010, 03:49
 
Fecha de Ingreso: diciembre-2009
Mensajes: 40
Antigüedad: 8 años
Puntos: 0
Respuesta: Columnas siempre del mismo tamaño

Disculpa, pero a que ejemplo te refieres?

Por cierto, el cuerpo (centro), derecha e izquierda, ya están puestos a %. No entiendo a que te refieres.

Gracias.

Última edición por Joaquin2111; 13/01/2010 a las 03:54
  #5 (permalink)  
Antiguo 13/01/2010, 10:08
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Columnas siempre del mismo tamaño

a este ejemplo supongo

http://araudi.net/ejemplos/columnas_equilibradas.html
  #6 (permalink)  
Antiguo 13/01/2010, 14:30
 
Fecha de Ingreso: agosto-2009
Mensajes: 292
Antigüedad: 8 años, 3 meses
Puntos: 5
Respuesta: Columnas siempre del mismo tamaño

hola que tal, eso lo puedes lograr fácilmente con las propiedades: display:table, table-row y table-cell, mira aquí te pongo un ejemplo que acabo de hacer a la rápida, pero tu lo puedes mejorar para que se ajuste a tus necesidades.

Código CSS:
Ver original
  1. #contenedor {
  2.     background-color:#CCC;
  3.     display:table;
  4.     padding:1px;
  5. }
  6.  
  7. #contenidos {
  8.     display:table-row;
  9. }
  10.  
  11. #columna1, #columna2, #columna3 {
  12.     display:table-cell;
  13.     padding:10px;
  14. }
  15.  
  16. #columna1 {
  17.     background-color:#060;
  18. }
  19.  
  20. #columna2 {
  21.     background-color:#FFF;
  22. }
  23.  
  24. #columna3 {
  25.     background-color:#F00;
  26. }

Código HTML:
<div id="contenedor">
  <div id="contenidos">
    <div id="columna1">columna 1.1<br> columna 1.2<br> columna 1.3<br></div>
    <div id="columna2">columna 2</div>
    <div id="columna3">columna 3</div>
  </div>
</div> 
Y aquí la imagen del resultado:



Saludos y espero que te sirva de maravilla

Probado y compatible en: FF, IE8, Safari, Chrome y Opera.

Última edición por WinderJerter; 13/01/2010 a las 15:07
  #7 (permalink)  
Antiguo 13/01/2010, 14:54
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Columnas siempre del mismo tamaño

WinderJerter y para IE6 y 7... eso no creo que ande
  #8 (permalink)  
Antiguo 13/01/2010, 15:03
 
Fecha de Ingreso: agosto-2009
Mensajes: 292
Antigüedad: 8 años, 3 meses
Puntos: 5
Respuesta: Columnas siempre del mismo tamaño

Cita:
Iniciado por alexk Ver Mensaje
WinderJerter y para IE6 y 7... eso no creo que ande
hola que tal alex, tienes razón en ese punto, pero yo pienso que es mas importante que un diseño sea compatible con las nuevas versiones de los navegadores, ya que la mayoría de las personas actualizan sus navegadores para que corregir los problemas de seguridad, nuevas funciones, etc... pero bueno, Joaquin2111 hay decidirá cual le conviene mas o se adapta mejor a sus necesidades

saludos y que andes bien

Última edición por WinderJerter; 13/01/2010 a las 15:14
  #9 (permalink)  
Antiguo 13/01/2010, 16:21
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Columnas siempre del mismo tamaño

Hola:

Cita:
Iniciado por WinderJerter Ver Mensaje
... ya que la mayoría de las personas actualizan sus navegadores para que corregir los problemas de seguridad, nuevas funciones, etc... ...
¿Por eso hay todavía tanta gente que usa IE6?

Saludos.

  #10 (permalink)  
Antiguo 13/01/2010, 16:51
 
Fecha de Ingreso: agosto-2009
Mensajes: 292
Antigüedad: 8 años, 3 meses
Puntos: 5
Respuesta: Columnas siempre del mismo tamaño

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:



¿Por eso hay todavía tanta gente que usa IE6?

Saludos.

Haber yo dije
Cita:
yo pienso que es mas importante que un diseño sea compatible con las nuevas versiones de los navegadores, ya que la mayoría de las personas actualizan sus navegadores para que corregir los problemas de seguridad, nuevas funciones, etc...
En ningún momento afirme que la gente ya no usaba IE6

Saludos
  #11 (permalink)  
Antiguo 13/01/2010, 17:37
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Columnas siempre del mismo tamaño

Hola:

Cita:
Iniciado por WinderJerter Ver Mensaje
En ningún momento afirme que la gente ya no usaba IE6
Y yo intentaba hacerte ver que son usuarios (o clientes que te pueden comprar algo) y que no hay que dejarlos de lado.

Saludos.

  #12 (permalink)  
Antiguo 13/01/2010, 17:50
 
Fecha de Ingreso: agosto-2009
Mensajes: 292
Antigüedad: 8 años, 3 meses
Puntos: 5
Respuesta: Columnas siempre del mismo tamaño

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:



Y yo intentaba hacerte ver que son usuarios (o clientes que te pueden comprar algo) y que no hay que dejarlos de lado.

Saludos.

Hola que tal, en eso si tienes razón no capte bien lo que me querías hacer entender , pero bueno que mas da,,,

Saludos
  #13 (permalink)  
Antiguo 21/01/2010, 11:46
 
Fecha de Ingreso: diciembre-2009
Mensajes: 40
Antigüedad: 8 años
Puntos: 0
Respuesta: Columnas siempre del mismo tamaño

Cita:
Iniciado por WinderJerter Ver Mensaje
hola que tal, eso lo puedes lograr fácilmente con las propiedades: display:table, table-row y table-cell, mira aquí te pongo un ejemplo que acabo de hacer a la rápida, pero tu lo puedes mejorar para que se ajuste a tus necesidades.

Código CSS:
Ver original
  1. #contenedor {
  2.     background-color:#CCC;
  3.     display:table;
  4.     padding:1px;
  5. }
  6.  
  7. #contenidos {
  8.     display:table-row;
  9. }
  10.  
  11. #columna1, #columna2, #columna3 {
  12.     display:table-cell;
  13.     padding:10px;
  14. }
  15.  
  16. #columna1 {
  17.     background-color:#060;
  18. }
  19.  
  20. #columna2 {
  21.     background-color:#FFF;
  22. }
  23.  
  24. #columna3 {
  25.     background-color:#F00;
  26. }

Código HTML:
<div id="contenedor">
  <div id="contenidos">
    <div id="columna1">columna 1.1<br> columna 1.2<br> columna 1.3<br></div>
    <div id="columna2">columna 2</div>
    <div id="columna3">columna 3</div>
  </div>
</div> 
Y aquí la imagen del resultado:



Saludos y espero que te sirva de maravilla

Probado y compatible en: FF, IE8, Safari, Chrome y Opera.
Pues yo lo he probado con Windows 7 i IE 8.0.7600 y no me funciona. Con firefox y Chrome sin problemas. Pero una solución que no sirve para todos los navegadores no es una buena opción, y menos si no funciona en el principal navegador. (no entraré en guerras de navegadores, yo no uso IE, pero la mayoría de gente si).
  #14 (permalink)  
Antiguo 21/01/2010, 11:49
 
Fecha de Ingreso: diciembre-2009
Mensajes: 40
Antigüedad: 8 años
Puntos: 0
Respuesta: Columnas siempre del mismo tamaño

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:

Mira este otro ejemplo, solo tienes que cambiar las medidas en px por % adaptándolo a tus necesidades.

Saludos.

Hola Jomamuro, sigo sin saber a que ejemplo te referías, podrías volver a postearlo?

Gracias.
  #15 (permalink)  
Antiguo 22/01/2010, 17:32
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Columnas siempre del mismo tamaño

Hola:

Pues la verdad, tengo que pedirte disculpas por no haber puesto el enlace, tendré que buscarlo, porque ahora mismo no recuerdo cual era.

Saludos.


Etiquetas: columnas, siempre, tamaño
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 17:00.