Foros del Web » Creando para Internet » CSS »

3 columnas CSS

Estas en el tema de 3 columnas CSS en el foro de CSS en Foros del Web. Hola gente!!!, les escribo porque hace rato que estoy buscando respuesta a este tema y no puedo encontrarla... probe varios consejos y ninguno se adapta ...
  #1 (permalink)  
Antiguo 17/10/2009, 16:28
 
Fecha de Ingreso: octubre-2009
Mensajes: 5
Antigüedad: 8 años, 2 meses
Puntos: 0
3 columnas CSS

Hola gente!!!, les escribo porque hace rato que estoy buscando respuesta a este tema y no puedo encontrarla... probe varios consejos y ninguno se adapta exactamente a lo que quiero y, por otro lado, no suelen tener compatibilidad con ciertos navegadores.

Les explico: lo que necesito hacer es un sitio con 3 columnas en un contenedor con ancho fijo de 955px. Las columnas tendrian un ancho fijo pero, en este caso, no importa demasiado la medida de cada una. Lo que me esta complicando es que necesito que las tres tengan un 100% de alto. Es decir, que sea cual fuere la resolucion, mantengan ese 100% de alto.

Les paso una imagen como para que sea mas claro ( sitioamedida.com.ar/pic.jpg" ).

Si me pueden dar una mano con esto, se los agradeceria infinitamente!!!!!!!!!!

Saludos a todos y, desde ya gracias!!!.
  #2 (permalink)  
Antiguo 17/10/2009, 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
Respuesta: 3 columnas CSS

Hay varias formas de hacerlo, todas en función del caso concreto y lo que se quiere conseguir.

Mira a ver si este ejemplo de una de ellas te orienta de por dónde tirar (haz sólo caso al texto y el menú derecho "Desarrollo", que lo demás està todo en obras).

Si no te sirve, busca en el foro por "columnas equilibradas" que hay muchos hilos referente a eso.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 17/10/2009, 17:03
 
Fecha de Ingreso: octubre-2009
Mensajes: 5
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: 3 columnas CSS

Antes que nada gracias por tu rapida respuesta!.
Te cuento que lo que veo en la pagina que me enviaste no me sirve para lo que quiero. Lo que necesito es un contenedor de 955px con 3 divs, una izquierda, una central y una derecha, cada una con un ancho especifico en pixels y que ocupen el 100% del alto de la pagina. Es decir, que el alto de adapte segun la resolucion que se use.
No necesito que cada columna se adapte al tamaño de la otra sino que las tres se adapten al de la ventana.
Estoy buscando por todos lados y no encuentro una respuesta certera, si podes guiarme te lo agradeceria ya que estoy intentando salir de las benditas tablas y me esta costando muchisimo!!!.
Nuevamente, mil gracias!
  #4 (permalink)  
Antiguo 17/10/2009, 17:25
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: 3 columnas CSS

Aquí tienes otro ejemplo de "falsas columnas" o "columnas equilibradas".
Como te dice Mikmoro, lo más importante es que tengas claro qué quieres conseguir (y que lo sepas transmitir)
Creo que lo que buscas es una estructura con pie siempre abajo. Busca en www.araudi.net algún ejemplo con ese título o en las faq's de css

Un saludo.

P.D.: bienvenido a fdw
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 17/10/2009 a las 17:29 Razón: por embaído, mientras aclaró
  #5 (permalink)  
Antiguo 17/10/2009, 17:44
 
Fecha de Ingreso: octubre-2009
Mensajes: 5
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: 3 columnas CSS

Disculpa si no fui clara pero me parecio serlo, sobre todo con la imagen que les envie, es bastante ilustrativa. Te lo vuelvo a explicar pero no tiene muchas vueltas...

- Un div contenedor (en mi caso de 955px pero no importa la medida mientas que sea en pixels).
- Dentro de ese div, tres divs mas:
- Una columna izquierda,
- Una columna central,
- Una columna derecha,
Las tres con un ancho fijo en pixels y el alto de cada una al 100% de la ventana.

No mencione pie de pagina ni encabezado, solo tres columnas en un contenedor que ocupen el 100% del alto de la ventana.

Se entiende???
  #6 (permalink)  
Antiguo 17/10/2009, 18:07
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: 3 columnas CSS

Hola Buenas Tardes roma1979.
Creo que lo que tu necesitas es esto http://www.kopfmackloss.com/columnas.html
si es eso aqui te pongo los codigos.

Bueno yo use los siguientes codigos:

Código HTML:
<div id="content">
<div id="col1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat  volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation  ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse  molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero  eros et accumsan et iusto odio dignissim qui blandit praesent luptatum  zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum  dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.ipsum  dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut  wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper  suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem  vel eum iriure dolor in hendrerit in vulputate velit esse molestie  consequat.</div>
  <div id="col2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat  volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation  ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse  molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero  eros et accumsan et iusto odio dignissim qui blandit praesent luptatum  zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum  dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.ipsum  dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut  wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper  suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem  vel eum iriure dolor in hendrerit in vulputate velit esse molestie  consequat.</div>
  <div id="col3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat  volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation  ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse  molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero  eros et accumsan et iusto odio dignissim qui blandit praesent luptatum  zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum  dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.ipsum  dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut  wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper  suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem  vel eum iriure dolor in hendrerit in vulputate velit esse molestie  consequat.</div>
</div> 
Aqui el CSS
Código HTML:
* { margin:0; padding:0;}

.clear { clear:both;}

#content {
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	height: 700px;
}
#content #col1 {
	float: left;
	width: 316px;
	background-color: #216378;
	margin: 0px;
	padding: 0px;
	height: 700%;
}
#content #col2 {
	float: left;
	width: 316px;
	height: 700%;
	background-color: #FC0;
	margin: 0px;
	padding: 0px;
}
#content #col3 {
	float: right;
	width: 316.7px;
	height: 700%;
	background-color: #9C0;
	margin: 0px;
	padding: 0px;
}
Si tiene algo de sobra disculpen lo hice rapidin

Espero que te ayude...

saludos ATTe Gidharvey
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.
  #7 (permalink)  
Antiguo 17/10/2009, 18:35
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: 3 columnas CSS

Cita:
Te lo vuelvo a explicar pero no tiene muchas vueltas...
A ver, señor Roma1979
¿No observó que mi comentario lo edité? Y que está tachado el enlace a una estructura de falsas columnas equilibradas? Que por cierto, es lo que su imagen nos transmitió a dos usuarios.
¿Tampoco advirtió que lo que dejé sin tachar (por añadido en la edición) fue uno de los nombres como se conocen esas estructuras ("pie abajo")?
¿Tampoco se ha molestado en pasar por la página que le enlacé donde hay algún ejemplo de ese tipo de estructura?
¿Y el hecho de que no mencionase usted ni pie ni encabezado significa que le hemos de dar el código exacto de lo que quiere?
Cita:
Se entiende???
Para que vaya haciéndose una idea más ajustada: usted lo que necesita es una estructura (layout, tramoya, composición de cajas...) que por un lado ocupen el 100% de alto de la ventana y que simultáneamente todas ellas tengan la misma altura con independencia del contenido. Esto es: pie abajo y equilibradas.
Ahora pregunto yo: ¿Se entiende?

GidHarvey, creo que esa composición no se ajustará a todos los casos porque la caja principal tiene una altura definida (700px)
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 17/10/2009, 18:47
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: 3 columnas CSS

Hola kseso?
si, ya vi que no se ajustara a todos los casos, mil disculpas si no te sirve, pero lo intente saludos.

PD: kseso? ayudame en el post del CSS slide porfavor :S

Un saludo

ATTe Gidharvey
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.
  #9 (permalink)  
Antiguo 18/10/2009, 05:19
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: 3 columnas CSS

Hola:

Quizá este enlace te ayude, solo tienes que adaptarle tú las medidas.

Saludos.

  #10 (permalink)  
Antiguo 18/10/2009, 05: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
Respuesta: 3 columnas CSS

Lo siento, no te había entendido. Lo hago sobre el ejemplo de GidHarvey, que no es correcto:
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>ejemplo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* { margin:0; padding:0;}
html, body {height: 100%;}
#content {width: 950px;
margin: 0 auto;
height: 100%;
}
#content #col1, #content #col2, #content #col3{ float: left;
height: 100%;
}
#content #col1 {width: 316px;
background-color: #216378;
}
#content #col2 {width: 316px;
background-color: #FC0;
}
#content #col3 {width: 316.7px;
background-color: #9C0;
}
</style>
</head>
<body>
<div id="content">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>
</body>
</html>
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 18/10/2009, 13:14
 
Fecha de Ingreso: octubre-2009
Mensajes: 5
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: 3 columnas CSS

Mikmoro, diste en la tecla!!!!!!!!!!!!!!!!, es exactamente lo que necesitaba. Infinitas gracias por ayudarme con tu conocimiento, realmente lo aprecio mucho!. Ojala sea correspondida tu ayuda por otros lados, seguro lo sera!!!. Mil y una gracias!.

Por otro lado agradezco a Gidharvey por el intento!, era algo similar a lo que necesitaba pero no exactamente. Igual, gracias por el tiempo.

Tambien gracias Jomaruro por el aporte!.

Kseso?, creo que no tenias el conocimiento y solo intenstaste hacer ver que yo no tenia el vocabulario exacto para expresar lo que necesitaba. Igualmente, creo que fue claro ya que otra persona lo pudo interpretar y logro resolver mi problema.
Mas alla de no haber podido ayudarme, igual agradezco el tiempo en responder.

Saludos y gracias a toda la gente con buena onda y dispuesta a ayudar!!!.
  #12 (permalink)  
Antiguo 18/10/2009, 14:04
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: 3 columnas CSS

Cita:
Kseso?, creo que no tenias el conocimiento y solo intenstaste hacer ver...
Pues sí, seguramente será eso: lo mucho que me preocupa mi reputación e imagen aquí y lo que influyen en mi ego y economía

Nada, que me alegro doblemente: porque haya resuelto su duda y por el registro en el foro de persona tan perspicaz. Estamos de enhorabuena todos.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 18/10/2009, 14:53
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: 3 columnas CSS

Hola:

Y sobre todo en la economía.

Saludos.

  #14 (permalink)  
Antiguo 18/10/2009, 17:32
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
Respuesta: 3 columnas CSS

Hola, roma1979.
Yo no entendí a la primera porque no imaginaba que fuera eso lo que buscabas, ya que me pareció que tenías ciertos conocimientos de HTML y CSS y en ese caso no sería lo que querías, porque la consulta era muy simple, de primeras lecciones de cualquier tutorial.

De la misma manera, me alegro de que te haya servido mi respuesta, aunque al tiempo he de decirte que tu opinión dirigida a kseso? ha sido bastante desacertada, incorrecta e innecesaria.
Es decir:
Cita:
Iniciado por roma1979 Ver Mensaje
Kseso?, creo que no tenias el conocimiento y solo intenstaste hacer ver que yo no tenia el vocabulario exacto para expresar lo que necesitaba.
Al margen de que te aseguro que kseso? tiene el conocimiento en la materia necesario para haber hecho el mismo trozo de código que yo (entre otras cosas porque como te he dicho es de "primer curso"), hay una cosa que debes tener en cuenta en este foro: las estrellas en el nombre de cada uno significan el agradecimineto de mucha gente a la que has prestado ayuda como en este caso a ti, lo que habla en primer lugar de los conocimientos de quien posee 11 estrellas, y en segundo lugar, de su entrega. Si él buscara la estúpida argucia de escudarse en una ambigua explicación para ocultar su falta de conocimientos, en primer lugar no sería una de las personas más "laureadas" del foro (por su propia ignorancia y por tan estúpida actitud), y por descontado: ¿no le hubiera resultado mucho más sencillo simplemente no responder, como se hace cuando no conoces una materia? Te aseguro que sí, y creo que no tiene un problema de autoestima como para llegar a ese punto

En fin, lo que era un final feliz se ha visto un tanto enturbiado por un pequeño despecho de principiante. Este discurso era igual de innecesario, pero me apetecía escribirlo, porque creo que ha sido un pequeño desliz que no te tomaremos en cuenta, sabiendo que eres novato y que no volverá a ocurrir

Saludos.
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 18/10/2009, 23:11
 
Fecha de Ingreso: octubre-2009
Mensajes: 5
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: 3 columnas CSS

Kseso?, te pido disculpas si te ofendi. Realmente recien empiezo a trabajar con capas y me complica un poco y me parecio que me habias respondido como si supiera del tema y te respondi de mala forma...
Mil perdones y gracias a vos y a todos los que estan aca dispuestos a ayudar!.
  #16 (permalink)  
Antiguo 19/10/2009, 01:01
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
Respuesta: 3 columnas CSS

roma1979: me alegro mucho de que hayas respondido así, en una actitud que te honra. Ójala mucho usuarios mostraran esa humildad. Muchas gracias. Nos veremos.

Mikel.
__________________
Visita mi nueva web idplus.org
  #17 (permalink)  
Antiguo 19/10/2009, 07:11
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: 3 columnas CSS

10-4 Roma
No le des más importancia de la que tiene. Fue un malentendido mutuo sin mayor trascendencia ni importancia. Seguro que tendremos ocasiones en un futuro para reírnos de esta situación.
De todas formas, gracias por tus palabras, junto a mi pesar por contribuir sin querer a que las pronunciaras.

Un saludo.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #18 (permalink)  
Antiguo 19/10/2009, 17:01
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: 3 columnas CSS

Hola:

Perdón por la intromisión.

Cita:
Iniciado por Mikmoro Ver Mensaje
hay una cosa que debes tener en cuenta en este foro: las estrellas en el nombre de cada uno significan el agradecimineto de mucha gente a la que has prestado ayuda
Pues yo no he ayudado tanto (ni tengo tantos conocimientos) como para tener las que tengo.

Saludos.

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 11:14.