Volver al Foro de Diseño de páginas Web

CSS dos columnas de tres filas de texto .. debe ser fácil ¿verdad?

  • e.s.guardian
  • Newbie
  • Newbie
  • No Avatar
  • Registrado: Mar 14, 2007
  • Mensajes: 8
  • Status: Offline

Nota Agosto 21st, 2008, 3:45 pm

Así que no han estado aquí en un rato. Recientemente tomó un trabajo de diseño web en caso de desempleo por un poco. Admito Im un poco oxidado .. Tengo un div en el sitio que, básicamente, casas de 6 áreas de corta de texto que voy a utilizar para la barra de navegación a un boletín informativo. Yo no tengo esta diseñado, sin embargo, todo lo que tengo es un ejemplo de imagen de lo que soy tratando de lograr. Imagen

Im preguntándose qué css yo uso, esto es lo que creo que debería ser pero no puedo parecer para que funcione con fuera de desbordamiento y el cambio de tamaño de cada div. Necesito cada div a ser comparable a una fila de una tabla de por sí. ¿Existe una manera más fácil de hacer esto? Necesito el div fuera (previewdiv) que se 472px de ancho y 275px de altura, y necesito tener el 6 divs interior con su texto en ellos.
Básicamente, sólo necesito saber cómo hacer esto correctamente de modo que cuando el texto se añade o suprime los divs no cambian de tamaño. Cualquier ayuda???
Código: [ Select ]
 
        <div class="previewdiv">
        <div class="row1"></div>
        <div class="row2"></div>
        <div class="row3"></div>
        <div class="row4"></div>
        <div class="row5"></div>
        <div class="row6"></div>    
      </div>
 
  1.  
  2.         <div class="previewdiv">
  3.         <div class="row1"></div>
  4.         <div class="row2"></div>
  5.         <div class="row3"></div>
  6.         <div class="row4"></div>
  7.         <div class="row5"></div>
  8.         <div class="row6"></div>    
  9.       </div>
  10.  



Código: [ Select ]
 
@charset "UTF-8";
 
.previewdiv {
    position:absolute;
    left:23px;
    top:311px;
    width:472px;
    height:275px;
    z-index:1;
    background-color: #FFFFFF;
    padding: 5px;
}
 
.row1 {
    position:relative;
    width:235px;
    height:auto;
    float:left;
}
 
.row2 {
        position:relative;
        width:235px;
        height:auto;
        float:left;
 
}
 
.row3 {
       position:relative;
       width:235px;
       height:auto;
       float:left;
 
}
.row4 {
       position:relative;
       width:235px;
       height:auto;
       float:left;
}
 
.row5 {
       position:relative;
       width:235px;
       height:auto;
       float:left;
}
 
.row6 {
       position:relative;
       width:235px;
       height:auto;
       float:left;
}
 
 
  1.  
  2. @charset "UTF-8";
  3.  
  4. .previewdiv {
  5.     position:absolute;
  6.     left:23px;
  7.     top:311px;
  8.     width:472px;
  9.     height:275px;
  10.     z-index:1;
  11.     background-color: #FFFFFF;
  12.     padding: 5px;
  13. }
  14.  
  15. .row1 {
  16.     position:relative;
  17.     width:235px;
  18.     height:auto;
  19.     float:left;
  20. }
  21.  
  22. .row2 {
  23.         position:relative;
  24.         width:235px;
  25.         height:auto;
  26.         float:left;
  27.  
  28. }
  29.  
  30. .row3 {
  31.        position:relative;
  32.        width:235px;
  33.        height:auto;
  34.        float:left;
  35.  
  36. }
  37. .row4 {
  38.        position:relative;
  39.        width:235px;
  40.        height:auto;
  41.        float:left;
  42. }
  43.  
  44. .row5 {
  45.        position:relative;
  46.        width:235px;
  47.        height:auto;
  48.        float:left;
  49. }
  50.  
  51. .row6 {
  52.        position:relative;
  53.        width:235px;
  54.        height:auto;
  55.        float:left;
  56. }
  57.  
  58.  
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Agosto 21st, 2008, 3:45 pm

  • righteous_trespasser
  • Scuffle
  • Genius
  • Avatar de Usuario
  • Registrado: Mar 12, 2007
  • Mensajes: 6228
  • Loc: South-Africa
  • Status: Offline

Nota Agosto 21st, 2008, 11:51 pm

Así que lo que tenemos ahora no funciona? Tal vez usted podría cambiar la CSS para el texto siguiente:
Código: [ Select ]
.previewdiv {
position:absolute;
left:23px;
top:311px;
width:472px;
height:275px;
z-index:1;
background-color: #FFFFFF;
padding: 5px;
}
.row1,.row2,.row3,.row4,.row5,.row6{
width:235px;
height:auto;
float:left;
}
  1. .previewdiv {
  2. position:absolute;
  3. left:23px;
  4. top:311px;
  5. width:472px;
  6. height:275px;
  7. z-index:1;
  8. background-color: #FFFFFF;
  9. padding: 5px;
  10. }
  11. .row1,.row2,.row3,.row4,.row5,.row6{
  12. width:235px;
  13. height:auto;
  14. float:left;
  15. }

Me tomé la "position: relative" porque yo no veo un punto para que esté allí...
Let's leave all our *plum* where it is and go live in the jungle ...
  • e.s.guardian
  • Newbie
  • Newbie
  • No Avatar
  • Registrado: Mar 14, 2007
  • Mensajes: 8
  • Status: Offline

Nota Agosto 22nd, 2008, 8:19 am

Esto no arreglar, aunque lo hizo limpiar el legnth de mi CSS. ¿Hay algo mal con sólo poner una tabla con 2 columnas y 3 filas dentro de mi div contenedor? También estoy pensando en probar a hacer un niño de contenedores que tiene sólo 3 filas y otro para los últimos 3 y con los 3 últimos posición relativa mediante el establecimiento real y parte superior izquierda parámetros.... No puedo pensar en otra cosa...
  • neksus
  • Mastermind
  • Mastermind
  • Avatar de Usuario
  • Registrado: Sep 10, 2004
  • Mensajes: 2194
  • Loc: Canada
  • Status: Offline

Nota Agosto 22nd, 2008, 8:22 pm

¿Cuál es la causa de que el uso de tablas?
  • e.s.guardian
  • Newbie
  • Newbie
  • No Avatar
  • Registrado: Mar 14, 2007
  • Mensajes: 8
  • Status: Offline

Nota Agosto 23rd, 2008, 6:05 am

nada...y eso es lo que terminó haciendo y que funciona perfectamente
  • neksus
  • Mastermind
  • Mastermind
  • Avatar de Usuario
  • Registrado: Sep 10, 2004
  • Mensajes: 2194
  • Loc: Canada
  • Status: Offline

Nota Agosto 23rd, 2008, 11:18 am

Que bueno. Especialmente si usted está planeando en usarlo como un e-mail plantilla.
  • videoediting-direct
  • Beginner
  • Beginner
  • No Avatar
  • Registrado: Jul 28, 2008
  • Mensajes: 53
  • Loc: United Kingdom
  • Status: Offline

Nota Agosto 25th, 2008, 2:27 am

Código: [ Select ]
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.previewdiv {
    position:absolute;
    left:23px;
    top:311px;
    width:472px;
    height:275px;
    z-index:1;
    background-color: #FFFFFF;
    padding: 5px;
    }
    
.previewdiv div{
    height:200px;
    width:200px;
    }
    
.row1 {
    float:left;
    clear:both;
    }
    
.row2 {
    float:left;
    clear:both;
    }
    
.row3 {
    float:left;
    clear:both;
    }
    
.row4 {
    float:right;
    clear:both;
    }
    
.row5 {
    float:right;
    clear:both;
    }
    
.row6 {
    float:right;
    clear:both;
    }
    
.Header {
    color:#996600;
    font-weight:bold;
    clear:both;
    }
</style>
</head>

<body>
    <div class="previewdiv">
    <div class="row1"><span class="Header">Kindergarten Enrollment</span><br />ghfhfsdsdsds</div>

    <div class="row2"><span class="Header">Kindergarten Enrollment</span><br />gfgfg</div>
    <div class="row3"><span class="Header">Kindergarten Enrollment</span><br />gfgfg</div>
    <div class="row4"><span class="Header">Kindergarten Enrollment</span><br />gfgfgfdsdsdsds</div>
        <div class="row5"><span class="Header">Kindergarten Enrollment</span><br />fgfgfsdsdsdsd</div>
    <div class="row6"><span class="Header">Kindergarten Enrollment</span><br />fgfgfgsdsdsdsds</div> 
</div>

</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. .previewdiv {
  8.     position:absolute;
  9.     left:23px;
  10.     top:311px;
  11.     width:472px;
  12.     height:275px;
  13.     z-index:1;
  14.     background-color: #FFFFFF;
  15.     padding: 5px;
  16.     }
  17.     
  18. .previewdiv div{
  19.     height:200px;
  20.     width:200px;
  21.     }
  22.     
  23. .row1 {
  24.     float:left;
  25.     clear:both;
  26.     }
  27.     
  28. .row2 {
  29.     float:left;
  30.     clear:both;
  31.     }
  32.     
  33. .row3 {
  34.     float:left;
  35.     clear:both;
  36.     }
  37.     
  38. .row4 {
  39.     float:right;
  40.     clear:both;
  41.     }
  42.     
  43. .row5 {
  44.     float:right;
  45.     clear:both;
  46.     }
  47.     
  48. .row6 {
  49.     float:right;
  50.     clear:both;
  51.     }
  52.     
  53. .Header {
  54.     color:#996600;
  55.     font-weight:bold;
  56.     clear:both;
  57.     }
  58. </style>
  59. </head>
  61. <body>
  62.     <div class="previewdiv">
  63.     <div class="row1"><span class="Header">Kindergarten Enrollment</span><br />ghfhfsdsdsds</div>
  65.     <div class="row2"><span class="Header">Kindergarten Enrollment</span><br />gfgfg</div>
  66.     <div class="row3"><span class="Header">Kindergarten Enrollment</span><br />gfgfg</div>
  67.     <div class="row4"><span class="Header">Kindergarten Enrollment</span><br />gfgfgfdsdsdsds</div>
  68.         <div class="row5"><span class="Header">Kindergarten Enrollment</span><br />fgfgfsdsdsdsd</div>
  69.     <div class="row6"><span class="Header">Kindergarten Enrollment</span><br />fgfgfgsdsdsdsds</div> 
  70. </div>
  72. </body>
  73. </html>
  • seularts
  • Graduate
  • Graduate
  • Avatar de Usuario
  • Registrado: Ene 02, 2007
  • Mensajes: 147
  • Loc: Romania
  • Status: Offline

Nota Agosto 28th, 2008, 2:42 pm

¿Por qué no intentar lo siguiente:
. previewdiv (
width: 400px;
overflow: auto;
)
. células (
position: relative;
float: a la izquierda;
width: 200px;
)

<div class="previewdiv">

<div class="cell"> cell1 </ div>
<div class="cell"> cell2 </ div>
<div class="cell"> cell3 </ div>
<div class="cell"> cell4 </ div>

</ div>

ver cómo funciona esto:)

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 8 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 103 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC