Columnas en CSS

RolandGarros84 · #1 (**permalink**) 06/10/2009, 11:41

Hola a todos necesito dividir un texto contenido en un div en 6 columnas iguales sin usar mas divs por ejemplo:

<div style"seiscolumnas">
kdsjskjndk sjnksjfnk sjndfk jsndf kjsnd fkjnskd fjnksjdfnk sjfdnkjsndf kjnskd fjnksjfnkjsndfkjnsdkfjnskdfnk sjfnksjndfkjsndk fjnskjfnk
</div>

y que me aparezca dividido automaticamente, esto con el fin de que las columnas tengan la misma altura y obviamente se vaya incrementando a medida que se ingrese mas texto

ya me han dicho:

<div class="col1"> texto 1</div>
<div class="col2"> texto 2</div>
.
.
<div class="col6">texto 6</div>

pero no es lo que necesito muchas gracias y espero que me puedan ayudar

kseso? · #2 (**permalink**) 06/10/2009, 11:51

Si lo que quieres hacer es tomar un texto de una BD (por ejemplo) y presentarlo en varias columnas, vas a necesitar algo más que css.

Css no es un lenguaje de programación, así que para cortar ese texto necesitarás programar (php, quizás algún js...) y una vez que lo tengas "cortado" y etiquetados los seis trozos, ya podrás utilizar css para presentarlo.

Un saludo

P.D.: bienvenido

RolandGarros84 · #3 (**permalink**) 06/10/2009, 11:53

Esto es lo mas cercano que tengo pero necesito que no solo sea de <li> sino que sea texto general para combinar con <h> y <p> además que el salto sea vertical sin embargo si alguien necesita este codigo es muy funcional:

<html>
<style>
UL.col3
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 15px 0px;
WIDTH: 100%;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none
}

UL.col3 LI
{
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
FLOAT: left;
PADDING-BOTTOM: 2px;
WIDTH: 30%;
PADDING-TOP: 2px
}

</style>
<body>
<ul class="col3"><li>texto1</li>
<li>texto2</li>
<li>texto3</li>
<li>texto4</li>
<li>texto5</li>
<li>texto6</li>
<li>texto7</li>
</ul>
</body>
</html>

RolandGarros84 · #4 (**permalink**) 06/10/2009, 11:59

Cita:

Iniciado por kseso?

Si lo que quieres hacer es tomar un texto de una BD (por ejemplo) y presentarlo en varias columnas, vas a necesitar algo más que css.

Css no es un lenguaje de programación, así que para cortar ese texto necesitarás programar (php, quizás algún js...) y una vez que lo tengas "cortado" y etiquetados los seis trozos, ya podrás utilizar css para presentarlo.

Un saludo

P.D.: bienvenido

Hola muchas gracias, mira lo que pasa es que lei un articulo que decia que se podia dividir un bloque de texto en columnas usando solo CSS pero el codigo que encontre no funciona se encuentra en este link:

http : // www . w3 . org / TR / css3-multicol /

y segun el articulo usando ese codigo

div {
column-width: 15em;
column-gap: 2em; /* shown in yellow */
column-rule: 4px solid green;
padding: 5px; /* shown in blue */
}

pero no se si es una version avanzada de CSS o algo asi porque no reconoce "column -width"

kseso? · #5 (**permalink**) 06/10/2009, 12:07

Eso es css3, pero ten la garantía que más del 70% de usuarios no lo verán.

Aquí tienes más información al respecto
http://www.quirksmode.org/css/multicolumn.html
http://www.alistapart.com/articles/css3multicolumn
column + css3

RolandGarros84 · #6 (**permalink**) 06/10/2009, 12:19

Oye muchas gracias tienes razón voy a buscar otra alternativa