Foros del Web » Creando para Internet » CSS »

hacer divs de 3 columnas y darle espacio a ellos

Estas en el tema de hacer divs de 3 columnas y darle espacio a ellos en el foro de CSS en Foros del Web. buenas a todos. googleando, encontre un codigo para desarrollar divs de 2 columnas. @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original #column_left {     width : ...
  #1 (permalink)  
Antiguo 15/01/2010, 16:43
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Pregunta hacer divs de 3 columnas y darle espacio a ellos

buenas a todos. googleando, encontre un codigo para desarrollar divs de 2 columnas.

Código CSS:
Ver original
  1. #column_left {
  2.     width:200px;
  3.     background-color:#5B7444;
  4.     height:300px;
  5.     float:left;
  6. }
  7. #column_right {
  8.     width:600px;
  9.     background-color:#47697E;
  10.     height:300px;
  11.     float:right;
  12. }

entendiendo como funciona el css, lo adapte a uno de mis proyectos.

mi consulta es como debo desarrollar para divs de 3 columnas y darle un espacio determinado ?.
  #2 (permalink)  
Antiguo 15/01/2010, 16:47
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: hacer divs de 3 columnas y darle espacio a ellos

Creo que esto es justo lo que buscas: http://cssya.com.ar/temarios/descripcion.php?cod=43

En resumen:

Código CSS:
Ver original
  1. #columna1
  2. {
  3.   float:left;
  4.   width:200px;
  5.   margin:0;
  6.   padding:1em;
  7. }
  8. #columna2
  9. {
  10.   margin-left:210px;
  11.   margin-right:230px;
  12.   border-left:1px solid #aaa;
  13.   border-right:1px solid #aaa;
  14.   padding:1em;
  15. }
  16. #columna3
  17. {
  18.   float:right;
  19.   width:200px;
  20.   margin:0;
  21.   padding:1em;
  22. }
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #3 (permalink)  
Antiguo 15/01/2010, 16:53
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: hacer divs de 3 columnas y darle espacio a ellos

bueno, mi amigo daPhyre ya te paso un codigo.....
ps la verdad que yo prefiero trabajar con posiciones absolutas y darles posiciones a mi gusto.

Código CSS:
Ver original
  1. #column1 {
  2.     position:absolute;
  3.     left:0px;
  4.     width:200px;
  5.     background-color:#5B7444;
  6.     height:300px;
  7. }
  8. #column2 {
  9.     position:absolute;
  10.     left:200px;
  11.     width:600px;
  12.     background-color:#47697E;
  13.     height:300px;
  14. }
  15. #column3 {
  16.     position:absolute;
  17.     left:800px;
  18.     width:200px;
  19.     background-color:#5B7444;
  20.     height:300px;
  21. }

entonces ya cada una tendria una posicion establecida y si quieres, puedes darle espacio entre ellas, subirlas o bajarlas a tu gusto.

suerte.
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #4 (permalink)  
Antiguo 15/01/2010, 18:36
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: hacer divs de 3 columnas y darle espacio a ellos

gracias por su ayuda. leere el codigo css que publicaron.

una consulta. por que es necesario colocar position: absolute ?

saludos.
  #5 (permalink)  
Antiguo 15/01/2010, 19:41
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
Respuesta: hacer divs de 3 columnas y darle espacio a ellos

posicion absolute es para indicar la posicion del div mediante coordenadas, puedes ver en el ejemplo de masterojito que los hubica con left en las coordenadas 0, 200 y 800
  #6 (permalink)  
Antiguo 15/01/2010, 19:46
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: hacer divs de 3 columnas y darle espacio a ellos

Cita:
yo prefiero trabajar con posiciones absolutas y darles posiciones a mi gusto.
:S...

sera mejor que te pases aqui
http://araudi.net/

yo acostumbro algo mas sencillo aver... supongamos que tenemos solo

.column{
width:200px;
float:left;
}

y queremos 3 columnas? que su contenedor tiene 600px aver... es facil la ecuacion no?...
Código HTML:
Ver original
  1. <div class="contenedor">
  2.     <div class="column">
  3.         <p>columna uno</p>
  4.     </div>    
  5.     <div class="column">
  6.         <p>columna dos</p>
  7.     </div>    
  8.     <div class="column">
  9.         <p>columna tres</p>
  10.     </div>    
  11. </div>
y listo...

tambien podemos usar clases diferentes a cada columna para diferenciarlas
Código HTML:
Ver original
  1. <div class="contenedor">
  2.     <div class="column_izquierda">
  3.         <p>columna uno</p>
  4.     </div>    
  5.     <div class="column_centro">
  6.         <p>columna dos</p>
  7.     </div>    
  8.     <div class="column_derecha">
  9.         <p>columna tres</p>
  10.     </div>    
  11. </div>

y agruparlas en el css
Código CSS:
Ver original
  1. .column_izquierda, .column_centro, .column_derecha{
  2.     width:200px;
  3.     float:left;
  4. }
y luego manipular las clases independiente mente... yo creo que es mas facil y menos codigo
  #7 (permalink)  
Antiguo 15/01/2010, 20:15
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: hacer divs de 3 columnas y darle espacio a ellos

muchas gracias por su ayuda. modificando lo que aportaron daPhyre, masterojitos y alexk, hice las 3 columnas de esta manera:

Código CSS:
Ver original
  1. #footer{
  2.     font-family: Arial, Helvetica, sans-serif;
  3.     font-size: 10px;
  4.     width:960px;
  5.     height:22px;
  6.     margin:0px auto;
  7. }
  8.  
  9. #footer_izquierda{
  10.    width:216px;
  11.    height:auto;
  12.    margin:0 0 0 5px;
  13.    float:left;
  14.    padding:3px;
  15. }
  16.  
  17. #footer_derecha{
  18.     width:134px;
  19.     height:auto;
  20.     margin:0 10px 0 0;
  21.     float:right;
  22.     padding:3px;
  23. }
  24.  
  25. #footer_principal{
  26.     width:604px;
  27.     height:auto;
  28.     margin:0 5px 0 350px !important;
  29.     padding:2px;
  30. }

Código HTML:
Ver original
  1. <div id="footer">
  2.     <div id="footer_izquierda"><a href="#" class="enlacewebmail">Webmail</a></div>
  3.     <div id="footer_derecha">Powered by INTERCOM</div>
  4.     <div id="footer_principal">Copyright 2009</div>
  5. </div>

pero hay un problema. al momento de mostrarlo en el ie7, el id #footer_principal se va hacia abajo, es decir, no se muestra en la parte superior, mientras que en ie6 sale bien.

deseo mostralo de esa manera:



que el texto copyright 2009 se centre.

me podran ayudar en ello ?.

saludos.

Última edición por esaenz22; 15/01/2010 a las 20:16 Razón: correccion.
  #8 (permalink)  
Antiguo 16/01/2010, 03:16
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: hacer divs de 3 columnas y darle espacio a ellos

Hola:

Al div footer_principal dale margin:o auto;

Saludos.

  #9 (permalink)  
Antiguo 16/01/2010, 14:48
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: hacer divs de 3 columnas y darle espacio a ellos

gracias por responder jomaruro. eso hare.

saludos.
  #10 (permalink)  
Antiguo 16/01/2010, 15:15
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: hacer divs de 3 columnas y darle espacio a ellos

lo modifique en el id del div footer_principal jomaruro, pero no se ve bien en ie7, mientras que en el ie6, se ve bien.

Código CSS:
Ver original
  1. #footer_izquierda{
  2.    width:216px;
  3.    height:auto;
  4.    margin:0 0 0 5px;
  5.    float:left;
  6.    padding:3px;
  7. }
  8.  
  9. #footer_derecha{
  10.     width:134px;
  11.     height:auto;
  12.     margin:0 10px 0 0;
  13.     float:right;
  14.     padding:3px;
  15. }
  16.  
  17. #footer_principal{
  18.     width:604px;
  19.     height:auto;
  20.     margin:0px auto;
  21. }

la imagen que adjunte:



debo mostrarlo asi igual.

me podran ayudar en ello.

saludos.

Última edición por esaenz22; 16/01/2010 a las 15:19 Razón: correccion.
  #11 (permalink)  
Antiguo 16/01/2010, 15:38
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: hacer divs de 3 columnas y darle espacio a ellos

Hola:

Tienes razón, prueba con text-align:center. De todas formas me surge una duda ¿lo quieres centrado con respecto al div que lo contiene o con respecto a la página?

Saludos.

  #12 (permalink)  
Antiguo 16/01/2010, 15:42
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: hacer divs de 3 columnas y darle espacio a ellos

te refieres al contenedor jomamuro o al div footer que contiene las 3 columnas ?

saludos.
  #13 (permalink)  
Antiguo 16/01/2010, 16:03
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: hacer divs de 3 columnas y darle espacio a ellos

Hola:

Me refiero a si quieres el texto "Copyright 2009" centrado en el div footer_principal o con respecto a la página.

Saludos.

  #14 (permalink)  
Antiguo 16/01/2010, 16:25
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: hacer divs de 3 columnas y darle espacio a ellos

que este centrado en el div footer_principal.

saludos.
  #15 (permalink)  
Antiguo 16/01/2010, 18:33
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: hacer divs de 3 columnas y darle espacio a ellos

Hola:

Entonces te funcionará con text-align:center puesto en los estilos del footer_principal.

Saludos.

  #16 (permalink)  
Antiguo 16/01/2010, 19:05
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: hacer divs de 3 columnas y darle espacio a ellos

no jomaruro. le puse el text-align:center y no funciono.

alguna solucion ?

edito. le dejo el estilo y lo que estoy maqueteando. en realidad, se lo basico de css, pero quiero aprender mas.

Código CSS:
Ver original
  1. body {
  2.     font-family: Arial, Helvetica, sans-serif;
  3.     font-size: 13px;
  4.     background-color: #FFFFFF;
  5. }
  6.  
  7. #contenedor{
  8.     width:960px;
  9.     height:780px;
  10.     margin:0px auto;
  11. }
  12.  
  13. #cabecera{
  14.     width:960px;
  15.     height:141px;
  16.     margin:0px auto;
  17.     border:#666666 1px solid;
  18. }
  19.  
  20. #espacio1{
  21.     width:960px;
  22.     height:11px;
  23.     margin:0px auto;
  24. }
  25.  
  26. #espacio2{
  27.     width:960px;
  28.     height:14px;
  29.     margin:0px auto;
  30. }
  31.  
  32. #cuerpo{
  33.     width:960px;
  34.     height:327px;
  35.     margin:0px auto;
  36.     border:#666666 1px solid;
  37. }
  38.  
  39. #detalles{
  40.     width:960px;
  41.     height:234px;
  42.     margin:0px auto;
  43.     border:#666666 1px solid;
  44. }
  45.  
  46. #column_izquierda {
  47.     width:216px;
  48.     height:226px;
  49.     float:left;
  50.     border:#666666 1px solid;
  51. }
  52. #column_derecha {
  53.     width:738px;
  54.     height:233px;
  55.     float:right;
  56.     border:#666666 1px solid;
  57. }
  58.  
  59. /* sufijos
  60. -top (superior), -bottom (inferior), left (izquierda) y right (derecha): */
  61.  
  62. #column_derecha ul li{
  63.     float: left;
  64.     width: 40&#37; ;!important
  65.     list-style-type:none;
  66.     margin:5px;
  67.     margin-left:2px;
  68. }
  69.  
  70. #espacio3{
  71.     width:960px;
  72.     height:19px;
  73.     margin:0px auto;
  74. }
  75.  
  76. #footer{
  77.     font-family: Arial, Helvetica, sans-serif;
  78.     font-size: 10px;
  79.     width:960px;
  80.     height:auto;
  81.     margin:0px auto;
  82.     border:#666666 1px solid;
  83. }
  84.  
  85. /* sufijos
  86. -top (superior), -bottom (inferior), left (izquierda) y right (derecha): */
  87.  
  88. #footer_izquierda{
  89.    width:216px;
  90.    height:auto;
  91.    margin:0 0 0 5px;
  92.    float:left;
  93.    padding:2px;
  94. }
  95.  
  96. #footer_derecha{
  97.     width:134px;
  98.     height:auto;
  99.     margin:0 0 0 10px;
  100.     float:right;
  101.     padding:2px;
  102. }
  103.  
  104. #footer_principal{
  105.     width:604px;
  106.     height:auto;
  107.     text-align:center;
  108. }

Código HTML:
Ver original
  1. <div id="contenedor">
  2.   <div id="cabecera"></div>
  3.   <div id="espacio1"></div>
  4.   <div id="cuerpo"></div>
  5.   <div id="espacio2"></div>
  6.   <div id="detalles">
  7.     <div id="column_izquierda"> <img src="imagenes/producto_destacado.jpg" /> </div>
  8.     <div id="column_derecha">
  9.         <ul>
  10.           <li><img src="imagenes/encapsulados.jpg" border="0" /></li>
  11.           <li><img src="imagenes/industriales.jpg" border="0" /></li>
  12.           <li><img src="imagenes/iluminacion.jpg" border="0" /></li>
  13.         </ul>
  14.     </div>
  15.   </div>
  16.   <div id="espacio3"></div>
  17.   <div id="footer">
  18.     <div id="footer_izquierda"><a href="#" class="enlacewebmail">Webmail</a></div>
  19.     <div id="footer_derecha">Powered by INTERCOM</div>
  20.     <div id="footer_principal">Copyright 2009</div>
  21.   </div>
  22. </div>

saludos.

Última edición por esaenz22; 16/01/2010 a las 19:08 Razón: correccion.
  #17 (permalink)  
Antiguo 16/01/2010, 19:12
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: hacer divs de 3 columnas y darle espacio a ellos

es muy sencillo lo que necesitas y con medidas fijas asi que te recomiendo usar lo que te puse usando clases diferentes para que el centro sea mas grande y con texto centrado... y listo
  #18 (permalink)  
Antiguo 16/01/2010, 20:14
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: hacer divs de 3 columnas y darle espacio a ellos

lo he modificado alexk con las clases, pero aun asi no se acomoda al boceto.

saludos.
  #19 (permalink)  
Antiguo 17/01/2010, 04: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
Mensaje Respuesta: hacer divs de 3 columnas y darle espacio a ellos

Hola:

Prueba cambiando lo que te indico en rojo (aunque tendrás que adaptar las medidas):

Código:
<div id="footer">
<div id="footer_izquierda"><a href="#" class="enlacewebmail">Webmail</a></div>
<div id="footer_principal">Copyright 2009</div>
<div id="footer_derecha">Powered by INTERCOM</div>
</div>

Código:
#footer{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    width:960px;
    height:auto;
    margin:0px auto;
    border:#666666 1px solid;
    overflow:auto;
}
 
/* sufijos 
-top (superior), -bottom (inferior), left (izquierda) y right (derecha): */
 
#footer_izquierda{
   width:216px;
   height:auto;
   margin:0 0 0 5px;
   float:left;
   padding:2px;
}
 
#footer_derecha{
    width:134px;
    height:auto;
    margin:0 0 0 10px;
    float:right;
    padding:2px;
}
 
#footer_principal{
    width:604px;
    height:auto;
    text-align:center;
    float:left;
}
Saludos.

  #20 (permalink)  
Antiguo 17/01/2010, 09:12
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: hacer divs de 3 columnas y darle espacio a ellos

gracias por la ayuda jomamuro.

alexk coloco antes un pequeño codigo y bueno lo acomode a las medidas de las 3 columnas. se agradece tu ayuda.

otra consulta. quiero mostrar 3 imagenes en columnas utilizando las etiquetas <ul> y <li>.

quiero mostrarlo de esa manera.



hice el codigo css para listar las imagenes en columnas.

Código CSS:
Ver original
  1. #columna {
  2.     width:738px;
  3.     height:226px;
  4.     float:left;
  5.     border:#666666 1px solid;
  6. }
  7. /* sufijos
  8. -top (superior), -bottom (inferior), left (izquierda) y right (derecha): */
  9.  
  10. #columna ul li {
  11.     display:inline;
  12.     float: left;
  13.     width: 278px;
  14.     list-style-type:none;
  15. }

al momento de mostrarlo en el ie6 y ie7, se muestra de esta manera.



me puede ayudar en ello jomamuero ?.

saludos.

Última edición por esaenz22; 17/01/2010 a las 09:21 Razón: correccion.
  #21 (permalink)  
Antiguo 17/01/2010, 11:58
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: hacer divs de 3 columnas y darle espacio a ellos

Hola:

¿Y como quieres que se muestre?

Saludos.

  #22 (permalink)  
Antiguo 17/01/2010, 13:30
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: hacer divs de 3 columnas y darle espacio a ellos

coloque una imagen.

Edito. no he colocado la imagen correctamente porque coloque otra imagen que me mostraba las imagenes incorrectamente.

como le decia, quiero mostrar 3 imagenes en columnas utilizando las etiquetas <ul> y <li>.

deseo mostrarlo de esa manera ?.



hice el codigo css para listar las imagenes en columnas.

Código CSS:
Ver original
  1. #columna {
  2.     width:738px;
  3.     height:226px;
  4.     float:left;
  5.     border:#666666 1px solid;
  6. }
  7. /* sufijos
  8. -top (superior), -bottom (inferior), left (izquierda) y right (derecha): */
  9.  
  10. #columna ul li {
  11.     display:inline;
  12.     float: left;
  13.     width: 278px;
  14.     list-style-type:none;
  15. }

al momento de mostrarlo en el ie6 y ie7, se muestra de esta manera.



me puede ayudar en ello ?.

saludos.

Última edición por esaenz22; 17/01/2010 a las 13:33 Razón: correccion.
  #23 (permalink)  
Antiguo 17/01/2010, 14:13
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: hacer divs de 3 columnas y darle espacio a ellos

Hola:

Sigo sin saber que es lo que quieres.

¿Deseas que las tres imágenes esten una al lado de la otra y una de ellas se te pone debajo? Eso es porque el ancho total de las imágenes + padding + margin + border (si los hubiera) es mayor que el div que las contiene.

Si no es eso, ya lo explicarás.

Saludos.

  #24 (permalink)  
Antiguo 17/01/2010, 14:25
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: hacer divs de 3 columnas y darle espacio a ellos

esta es la imagen que quiero mostrarlo de esta manera:



hice el codigo css.

Código CSS:
Ver original
  1. #columna {
  2.     width:738px;
  3.     height:226px;
  4.     float:left;
  5.     border:#666666 1px solid;
  6. }
  7. /* sufijos
  8. -top (superior), -bottom (inferior), left (izquierda) y right (derecha): */
  9.  
  10. #columna ul li {
  11.     display:inline;
  12.     float: left;
  13.     width: 278px;
  14.     list-style-type:none;
  15. }

al momento de mostrarlo en el ie6 y en el ie7, la imagen se pone debajo.



a que se debe eso, sera por el ancho de las imagenes, el padding, el margin de las imagenes que el div columna los contiene ?.

me puede ayudar en ello por favor jomaruro ?

saludos.

Última edición por esaenz22; 17/01/2010 a las 18:17 Razón: correccion.
  #25 (permalink)  
Antiguo 17/01/2010, 19:58
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: hacer divs de 3 columnas y darle espacio a ellos

Creo que sería que la suma de todos hacen que el tercero vaya a la segunda fila. Si no quieres que ocurra esto por ningún motivo, es posible que un overflow:hidden al UL pudiera servir. Es posible que requiera una altura predeterminada. Suerte.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #26 (permalink)  
Antiguo 18/01/2010, 15:30
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: hacer divs de 3 columnas y darle espacio a ellos

Hola:

Es lo que te he dicho antes, el ancho de las imágenes + padding + margin + border es mayor que el div que las contiene.

Para solucionarlo puedes aumentar el ancho del div, reducir el tamaño de las imágenes o reducir el padding, etc.

Saludos.

  #27 (permalink)  
Antiguo 20/01/2010, 08:11
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: hacer divs de 3 columnas y darle espacio a ellos

gracias por responder jomamuro. pero eso ya depende del boceto jomamuro ?.

bueno. para que me entienda, yo hice divs de 2 columnas. luego de eso, el ancho que contiene el div para las imagenes tiene de ancho de 737 px y las 3 imagenes tienen de tamaños 251 x 201 (excepto el tercero que tiene de tamaño 233 x 201).

al momento de mostrarlo en el ie7, las imagenes se desplazan a la derecha. coloque marginf-left 5 ó 10px pero aun asi no funciona.

Código CSS:
Ver original
  1. #columna {
  2.     width:737px;
  3.     height:226px;
  4.     float:left;
  5.     border:#666666 1px solid;
  6. }
  7. /* sufijos
  8. -top (superior), -bottom (inferior), left (izquierda) y right (derecha): */
  9.  
  10. #columna ul li {
  11.     display:inline;
  12.     float: left;
  13.     width: 251px;
  14.     list-style-type:none;
  15. }

cual es mi error ?. quiero que se vea bien en ie6 y en el ie7.

saludos.

Última edición por esaenz22; 20/01/2010 a las 08:14 Razón: correccion.
  #28 (permalink)  
Antiguo 20/01/2010, 21:16
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: hacer divs de 3 columnas y darle espacio a ellos

ya lo solucione. lo que sucedio es que las imagenes tenian diferentes tamaños, asi que investigando, solo he colocado margin:0 y padding:0 para que sea equitativo.

gracias por su ayuda.

saludos.

Etiquetas: columnas, espacio
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 10:35.