Foros del Web » Creando para Internet » CSS »

problema con layout a 3 columnas

Estas en el tema de problema con layout a 3 columnas en el foro de CSS en Foros del Web. buenas! estoy teniendo un problema con css, estoy migrando del uso de "tablas" al uso de divs asi que soy nuevo en esto de hacer ...
  #1 (permalink)  
Antiguo 15/01/2010, 12:01
 
Fecha de Ingreso: enero-2010
Mensajes: 10
Antigüedad: 7 años, 11 meses
Puntos: 0
De acuerdo problema con layout a 3 columnas

buenas!

estoy teniendo un problema con css, estoy migrando del uso de "tablas" al uso de divs asi que soy nuevo en esto de hacer columnas y layouts en css y algunas cosas me fallan

estoy intentando crear un layout que se vea de la siguente manera:



quiero que las comumnas laterales abarquen en su totalidad el ancho de la pagina y que encierren con ellas el header y el footer, y obviamente el contenido

pero me esta quedando de la siguente manera:



en el problema, todo esta bien, la columna derecha se queda en su lugar y el header respeta el espacio de la columna izquierda, pero la columna izquierda comienza a la misma altura que lo hace el footer y el footer no respeta las dimensiones dentro del las columnas laterales

este es mi codigo css:
Código CSS:
Ver original
  1. #main960container
  2. {
  3. width:960px;
  4. position:relative;
  5.     }
  6. #header {
  7.     background: yellow;
  8.     width:800px;
  9.     }
  10. #l_container
  11. {
  12.     width:80px;
  13.     float:left;
  14.     background-color:#FF0000;
  15.     border:2px solid #454545;
  16.     padding-bottom: 1000px;
  17. }
  18. #r_container
  19. {
  20.     width:80px;
  21.     float:right;
  22.     background-color:#0000FF;
  23.     border:2px solid #454545;
  24.     padding-bottom: 1000px;
  25. }
  26. #container{
  27. width:800px;
  28. }
  29. #footer {
  30.     clear: both;
  31.     background: #A2A2A2;

y este es mi codigo html:

Código HTML:
Ver original
  1. <div id="main960container">
  2. <div id="l_container">lado A</div>
  3. <div id="header">HEADER</div>
  4. <div id="container"> contenido </div>
  5. <div id="footer"> FOOTER </div>
  6. <div id="r_container">lado B</div>
  7. </div>

cualquier ayuda se agradece! en especial por que me quiero enseñar a maquetear sin tablas
  #2 (permalink)  
Antiguo 15/01/2010, 12:49
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: problema con layout a 3 columnas

Haber amigo vamos viendo...
1ra. en #footer no cierras

2da. la medida del div contenedor no coincide con los divs internos

div contenedor 960px
divs internos >> 84+800+84 =968 ?¿ no salimos verdad?

3ra. usas float para los laterales pero el header, container y footer no

4ta. no veo tu finalidad de hacer crecer los divs con un padding-bottom

5ta y ultima. Utiliza un código mas como este>>>

Código CSS:
Ver original
  1. html, body{height:100&#37;; margin:0; padding:0;}
  2. #Cont, .LeftPane,  .RightPane, .ContPane{height:100%;}
  3. #Cont{width:960px; margin:auto;}
  4. .LeftPane,  .RightPane{width:80px; float:left; background:#FF9966;}
  5. .ContPane{width:800px; float:left;}
  6. .HeaderPane{background:#FFFF99;}
  7. .ContainerPane{background:#FFCCFF;}
  8. .FooterPane{background:#CCFF99;}

Código HTML:
Ver original
  1. <div id="Cont">
  2.     <div class="LeftPane">LeftPane</div>
  3.     <div class="ContPane">
  4.         <div class="HeaderPane">HeaderPane</div>
  5.         <div class="ContainerPane">ContainerPane</div>
  6.         <div class="FooterPane">FooterPane</div>
  7.     </div>
  8.     <div class="RightPane">RightPane</div> 
  9. </div>

edito: 6ta. y ahora si ultima......el footer no te respeta el ancho simplemente porque no le indicaste un ancho
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Última edición por ArturoGallegos; 15/01/2010 a las 12:57
  #3 (permalink)  
Antiguo 15/01/2010, 12:58
 
Fecha de Ingreso: enero-2010
Mensajes: 10
Antigüedad: 7 años, 11 meses
Puntos: 0
Respuesta: problema con layout a 3 columnas

Cita:
Iniciado por Ag666 Ver Mensaje
Haber amigo vamos viendo...
1ra. en #footer no cierras

2da. la medida del div contenedor no coincide con los divs internos

div contenedor 960px
divs internos >> 84+800+84 =968 ?¿ no salimos verdad?

3ra. usas float para los laterales pero el header, container y footer no

4ta. no veo tu finalidad de hacer crecer los divs con un padding-bottom

5ta y ultima. Utiliza un código mas como este>>>
muchas gracias por la ayuda, me has visto ver mis errores, supongo que mi problema es que sigo pensando en tablas, pero ya lo empezare a dejar atras, estoy construyendo toda mi web con puro css y quitando todo lo que estaba hecho en tablas

algun tutorial que me recomiendes donde pueda aprender mejor como posicionar los div? gracias!
  #4 (permalink)  
Antiguo 15/01/2010, 14:03
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: problema con layout a 3 columnas

Te recomiendo las guías que hico Mikmoro, que son esta y esta y yo te recomiendo con la que aprendí de verdad a dejar las tablas, que es esta
__________________
No diseñes usando tablas.
  #5 (permalink)  
Antiguo 15/01/2010, 14:17
 
Fecha de Ingreso: enero-2010
Mensajes: 10
Antigüedad: 7 años, 11 meses
Puntos: 0
Respuesta: problema con layout a 3 columnas

ahora que examino tu ejemplo con mas detalle tengo algunas dudas, espero no sea mucha molestian:

he notado que solo el contenedor principal es # id, y los demas con class, a que se debe esto?
que tal si quisiera que los contenedores laterales, rightpane y leftpane terminaran just donde temina el footer? para que sin importar el largo del texto, los paneles laterales se extiendan hasta el footer

gracias por tus respuestas :)
  #6 (permalink)  
Antiguo 15/01/2010, 15:04
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: problema con layout a 3 columnas

ok en mi ejemplo solo el contenedor principal es un ID por uso y costumbre, no es por ninguna razón especifica... tal vez pudiera decir la razón es que los ID solo se pueden usar una sola vez en el sitio y los CLASS los podemos aplicar cuantas veces necesitemos.

siempre que construyo un sitio los estilos del contenedor principal los aplico una sola ves y no los repito en ninguna otra área.... si supiera los volveré a aplicar el contenedor principal seria también un CLASS

en cuanto a que el RightPane y LeftPane crezcan no te tengo una respuesta, ya que siempre dejo crezcan de acuerdo a su contendió pero como ya dijo nuestro compañero Hades87 has una visita a las guías de Mikmoro

ahorita ando algo atareado y no e tenido tiempo de revisar a fondo quizás el fin si no lo as resuelto eche una mirada mas por lo pronto checa este ejemplo quizás te ayude http://www.araudi.net/ejemplos/conjunta.html
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #7 (permalink)  
Antiguo 15/01/2010, 15:29
 
Fecha de Ingreso: enero-2010
Mensajes: 10
Antigüedad: 7 años, 11 meses
Puntos: 0
Respuesta: problema con layout a 3 columnas

muchas gracias hades87 y Ag666!

voy a revisar toda esta documentacion a ver que encuentro de util, gracias por todo y suerte con sus proyectos! :)

Etiquetas: columnas, layout
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 05:57.