Foros del Web » Creando para Internet » CSS »

Crear web de tres columnas

Estas en el tema de Crear web de tres columnas en el foro de CSS en Foros del Web. Cordial saludo a la comunidad Foros del Web, como verán soy nuevo, pero a la vez con entusiasmo por aprender. Comparto aquí con ustedes una ...
  #1 (permalink)  
Antiguo 29/09/2009, 10:39
 
Fecha de Ingreso: septiembre-2009
Mensajes: 15
Antigüedad: 8 años, 2 meses
Puntos: 0
Crear web de tres columnas

Cordial saludo a la comunidad Foros del Web,
como verán soy nuevo, pero a la vez con entusiasmo por aprender.
Comparto aquí con ustedes una inquietud que tengo al intentar dividir una web en tres columnas, de manera muy chapuza (novato claro ) hago esto:

Código HTML:
 <body>
	<div id="cuerpo">
		<div id="izquierda">
			Contenido del lado izquierdo
		</div>
		<div id="centro">
			Contenido del centro
		</div>
		<div id="derecha">
			Contenido del lado derecho
		</div>
	</div>
  </body> 
Y en el archivo CSS lo siguiente:

Código HTML:
#cuerpo
        {
        padding: 0px;
        margin: 0px;
        width: 100%;
        height: 100%;
        position: relative;
    }
#izquierda
        {
        padding: 0px;
        margin: 0px;
        width: 291px;
        height: 100%;
        background-color: #d0cece;
        float: left;
    }
#centro
        {
        padding: 0px;
        margin: 0px;
        width: 100%;
        height: 100%;
        background-color: #ffffff;             
    }
#derecha
        {
        padding: 0px;
        margin: 0px;
        width: 230px;
        height: 100%;
        background-color: #d0cece;             
        float: right;
    }
Entiendo que tengo errores allí, pero no relaciono la causa, por lo que no se muestra la web como deseo, espero me puedan orientar.

Saludos!
  #2 (permalink)  
Antiguo 29/09/2009, 11:02
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Crear web de tres columnas

Hola felipe88

Bienvenido al foro

No conozco exactamente que es lo que deseas, pero pueba esto (a ver si es lo que necesitas):

Código HTML:
<!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=utf-8" />
<title>Contenidos en tres columnas</title>
<style>
* {
	margin: 0;
	padding: 0;
	outline: 0;
}
html, body {
	width: 100%;
	height: 100%;
	overflow: auto;
}
#cuerpo {
        width: 100%;
        height: 100%;
        position: relative;
}
#izquierda {
        width: 291px;
        height: 100%;
        background-color: #d0cece;
        float: left;
}
#centro {
        width: auto;
        height: 100%;
        background-color: #ffffff; 
        float: left;
}
#derecha {
        width: 230px;
        height: 100%;
        background-color: #d0cece;             
        float: right;
    }
</style>
</head>

<body>
	<div id="cuerpo">
		<div id="izquierda">
			Contenido del lado izquierdo
		</div>
		<div id="centro">
			Contenido del centro
		</div>
		<div id="derecha">
			Contenido del lado derecho
		</div>
	</div>
  </body>
</html> 
Comenta algo...

Bye
  #3 (permalink)  
Antiguo 29/09/2009, 11:05
 
Fecha de Ingreso: marzo-2008
Ubicación: Patzún, Chimaltenango
Mensajes: 71
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Crear web de tres columnas

pone en el
#izquierda ...float:left;
#centro ...float:inherit;
#derecha ...float:right;
  #4 (permalink)  
Antiguo 29/09/2009, 11:24
 
Fecha de Ingreso: septiembre-2009
Mensajes: 15
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Crear web de tres columnas

Hola,
lamentablemente hasta ahora no me ha funcionado, la idea finalmente es que la distribución sea algo similar a esto:

img525.imageshack.us/img525/5472/dibujoaj.png


Gracias por su ayuda .


Saludos!
  #5 (permalink)  
Antiguo 29/09/2009, 11:25
 
Fecha de Ingreso: septiembre-2009
Mensajes: 15
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Crear web de tres columnas

Tuve que colocar el link en esa forma ya que el foro no me permite por poca antigüedad.


Saludos!
  #6 (permalink)  
Antiguo 29/09/2009, 11:36
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Crear web de tres columnas

Creo que lo que buscas es un layout adaptado al 100% de la ventana del navegador, de tres columnas equilibradas (misma altura de las tres, por el height:100%), las dos laterales con anchura fija y la central que ocupe el resto del espacio disponible.
¿Acerté, Felipe?

Mira a ver si esta composición se adapta. Elimina la #centro_izquierda y #centro_derecha y pon el ancho que necesites en #izquierda y #derecha.

También puedes realizar una búsqueda por layout 3 columnas

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 29/09/2009, 11:36
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Crear web de tres columnas

Pero veamos... tú has copiado y pegado en un html limpio lo que te he puesto arriba; porque se visualiza exactamente como has puesto en la imagen.

Bye
  #8 (permalink)  
Antiguo 29/09/2009, 11:40
 
Fecha de Ingreso: septiembre-2009
Mensajes: 15
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Crear web de tres columnas

Efectivamente kseso?, ahora mismo estoy viendo el material y les cuento, gracias


Saludos!
  #9 (permalink)  
Antiguo 29/09/2009, 11:44
 
Fecha de Ingreso: septiembre-2009
Mensajes: 15
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Crear web de tres columnas

Cita:
Iniciado por deirdre Ver Mensaje
Pero veamos... tú has copiado y pegado en un html limpio lo que te he puesto arriba; porque se visualiza exactamente como has puesto en la imagen.

Bye
Si es verdad deirdre, por ejemplo en tu código, ¿que "obliga" a que funcione la división?.

Me gustaría entender ese punto


Saludos!
  #10 (permalink)  
Antiguo 29/09/2009, 12:01
 
Fecha de Ingreso: septiembre-2009
Mensajes: 15
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Crear web de tres columnas

Bueno, pude encontrar que parte de lo que me ayuda a solucionar el problema es esto:

Código HTML:
#centro
        {
        width: autho; /*Usar un width automático en vez de un 100%*/
        height: 100%;
        background-color: #ffffff;    
	float: left; /*Usar en esta linea left en vez de inherit*/
    }
Cualquier duda les comentaré, muchas gracias por sus ayudas.


Saludos!
  #11 (permalink)  
Antiguo 05/10/2009, 16:29
 
Fecha de Ingreso: septiembre-2009
Mensajes: 15
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Crear web de tres columnas

Hola,
no habia vuelto a probar con el código y ahora lo que intento no me da literalmente.

Añadí tanto al div izquierdo como el derecho una pequeña imagen (degrade) de fondo que finalmente contrasta con el color de fondo del mismo div.

Los problemas que hasta el momento tengo es debido a que no se proporciona correctamente el ancho total de la página, parece que sobrepasa el 100% y por lo tanto es más ancha, a su vez; el div del centro no rellena completamente el espacio que posee, solo el que tiene texto; sin embargo si la escritura es muy amplia esta no respeta su distribución, por lo que toma el resto de parte derecha de la página haciendo que el div derecho baje.

Espero me halla explicado bien, espero sus consejos y comentarios, gracias.


Saludos!
  #12 (permalink)  
Antiguo 05/10/2009, 16:57
 
Fecha de Ingreso: septiembre-2009
Mensajes: 15
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Crear web de tres columnas

Quedo a la espera de cualquier ayuda :)


Saludos!
  #13 (permalink)  
Antiguo 05/10/2009, 17:26
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Crear web de tres columnas

Hola...

Prueba esto, a ver si te sirve. Cópialo en un html limpio:

Código HTML:
<!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=utf-8" />
<title>Tres columnas</title>
<style type="text/css">
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
} 
#caja { 
    width: 960px;
	height: 100%;
    margin: auto;
    background-color:#ffc;
} 
#izquierdo { 
    width: 200px;
    height: 100%;
    background-color: #999; 
    float:left;
}
#central{ 
    width: 560px;
    height: 100%;
    float: left;
    background-color: #fff;
    overflow: auto;
} 
#derecho { 
    width: 200px;
    height: 100%;
    background-color: #999; 
    float:right;
}
p {
	line-height: 100px; /* sólo para probar */
	padding: 8px;
} 
</style>
</head>

<body>
<div id="caja"> 
       <div id="izquierdo"><p>Izquierdo</p></div> 
        
       <div id="central"> 
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
       </div>
        
       <div id="derecho"><p>Derecho</p></div>
</div>
</body>

</html> 
Bye
  #14 (permalink)  
Antiguo 05/10/2009, 17:58
 
Fecha de Ingreso: septiembre-2009
Mensajes: 15
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Crear web de tres columnas

Hola, funciona hasta ahora, deberé probarlo con la imagen de fondo.

El valor overflow causa un efecto poco agradable al añadir una barra de desplazamiento, pero sin el, la página no muestra todo el contenido hasta el final.


Saludos!
  #15 (permalink)  
Antiguo 06/10/2009, 19:51
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Respuesta: Crear web de tres columnas

te recomiento le des una vuelta a este sitio www.librosweb.es ;) luego me contas como te fue
__________________
_______
Jorge Rojas.
  #16 (permalink)  
Antiguo 07/10/2009, 06:40
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Crear web de tres columnas

Cita:
Iniciado por felipe88 Ver Mensaje
Añadí tanto al div izquierdo como el derecho una pequeña imagen (degrade) de fondo que finalmente contrasta con el color de fondo del mismo div.

Los problemas que hasta el momento tengo es debido a que no se proporciona correctamente el ancho total de la página, parece que sobrepasa el 100% y por lo tanto es más ancha, a su vez; el div del centro no rellena completamente el espacio que posee, solo el que tiene texto; sin embargo si la escritura es muy amplia esta no respeta su distribución, por lo que toma el resto de parte derecha de la página haciendo que el div derecho baje.

Espero me halla explicado bien, espero sus consejos y comentarios, gracias.


Saludos!
Hola Felipe
Si estás trabajando en base al código del ejemplo que te puse en el #6, creo que has introducido elementos nuevos que seguramente serán los causantes de esos efectos no deseados (a demás de los fondos, que esos no influyen en el tamaño ni posición de las cajas).

Así que lo mejor sería que pusieses un enlace a tu página (o al menos publiques los códigos html + css).

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #17 (permalink)  
Antiguo 16/10/2009, 18:26
 
Fecha de Ingreso: marzo-2008
Ubicación: Patzún, Chimaltenango
Mensajes: 71
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Crear web de tres columnas

y tambien publiques una imagen! a lo mejor es incompatibilidad con navegadores por eso yo siempre prefiero Firefox!
  #18 (permalink)  
Antiguo 02/11/2009, 18:12
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
Respuesta: Crear web de tres columnas

Cita:
Iniciado por hwelt Ver Mensaje
y tambien publiques una imagen! a lo mejor es incompatibilidad con navegadores por eso yo siempre prefiero Firefox!
Ojala que todos hicieran lo mismo y solo tuvieramos que diseñar para un solo navegador, pero no, es imposible...
  #19 (permalink)  
Antiguo 02/11/2009, 18:42
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 8 años, 4 meses
Puntos: 4
Respuesta: Crear web de tres columnas

mira, yo cuando deseo hacer una plantilla de 3 columnas floto todo left (Enseñanza del gran maestro "elQuique"), nada de left-inherit-right, todo left!
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:23.