Trivia: Conceptos CSS

[messer]

Es que logre separarlos en 3 columnas pero con un margen entre ellas amplio y pues entre lineas si le quedaban como 5 px.. seguire intentando

[Nathan_1979]

No te compliques messer,
Lo de la separación entre columnas podía a ver sido otro número por decir algo. 50px por ejemplo. Quiero ver soluciones!

Postea tu solución a ver

PD: Antes que nada pedir disculpas, pues se me olvidaron colocar elementos p
Ahora lo he probado y si funciona. Sry , ya esta editado

[PedroRodas]

div p{float:left; width:30%}?????

[DragonX]

Iniciado por Nathan_1979

Código PHP:

  <div id="prueba"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> 
<p>Donec id sem. In hac habitasse platea dictumst. Quisque a sem. Sed id felis. Nam quam orci,  
dictum sed, suscipit mollis, imperdiet in, erat. Ut accumsan libero sit amet est. Mauris  ligula.</p> 
<p> Donec elit ipsum, convallis quis, elementum porta, luctus vel, nisi. Praesent  
nec magna. Etiam non mauris. Vestibulum vitae nibh ut est fringilla luctus. Quisque ut 
 leo. Integer sed ante. Aenean sapien felis, aliquet id, dapibus ut, faucibus ut, magna.</p> 
 <p>Praesent justo eros, lobortis et, malesuada at, varius vel, urna. Donec  
ullamcorper. Sed libero sem, commodo a, euismod a, cursus fermentum, sapien. Cras 
 fringilla.</p> 
</div>  
   

Que 2 propiedades usaríais para colocar este texto a 3 columnas y con una separación de 5 px.

#prueba p{width:30%;float:left;margin:0 5px;}

[Nathan_1979]

Jeje la cosa es más sencilla Pedro,
y solo con 2 propiedades DragonX

Genial mas soluciones!!

Os rendís??

[DragonX]

solo con dos propiedades????...........ta difícil

[kseso?]

#prueba p{width:30%; white-space:pre-line;}

¿?

[Nathan_1979]

Iniciado por DragonX

solo con dos propiedades????...........ta difícil

me empieza a gustar esto de preguntar

[PedroRodas]

pero si adema acabo de darme cuenta de que son 4 parrafos, quillo dilo ya que me toi queando pillao

[DragonX]

kseso? creo que es pre-wrap y no pre-line

a ver.....y si no me rindo!

#prueba p{width:30%; white-space:pre-wrap;}

[Raulmmmm]

Es que hay 4 p... y son 3 columnas... ¿Es un error o es que hay que hacerlo con 4 p?

Si no es un error... esta es la solución:

Código:

#prueba p{ display: table-cell; margin: 0 5px; }

A ver si se me ocurre alguna pregunta (si acierto).

[DragonX]

Raulmmmm excelente!!!!! anda perfectamente!

[Nathan_1979]

Yo lo tengo funcionando asi:

1 Columna:
2 parrafos.


2Columna:
1 parrafo


3Columna:
1 parrafo


Con una separación de 50px por poner algo.

[Nathan_1979]

Eyyy raulmmmm pero tienes 4 columnas ! Oops!

Yo pensaba de otra forma pero como sois unos gurus... :D

Código PHP:

  #prueba {
    -moz-column-count:3;
    -moz-column-gap:5px;
}  
   

http://www.w3.org/TR/css3-multicol/#the-multi-column
Sencillo no?

[Raulmmmm]

Nathan no conocía esas propiedades... son de CSS3, ¿no?.

Bueno, allá va mi pregunta:
¿Con qué propiedad se quita el borde de puntitos que sale cuando pinchas en un enlace?

[kseso?]

Iniciado por DragonX

kseso? creo que es pre-wrap y no pre-line

a ver.....y si no me rindo!

#prueba p{width:30%; white-space:pre-wrap;}

pre-wrap: se respetan los espacios en blanco y las nuevas líneas, pero ajustando
cada línea al espacio asignado para ese contenido.
pre-line: elimina los espacios en blanco y respeta las nuevas líneas, pero ajustando cada línea al espacio asignado para ese contenido.

[DragonX]

outline:none;

[DragonX]

Iniciado por kseso?

pre-wrap: se respetan los espacios en blanco y las nuevas líneas, pero ajustando
cada línea al espacio asignado para ese contenido.
pre-line: elimina los espacios en blanco y respeta las nuevas líneas, pero ajustando cada línea al espacio asignado para ese contenido.

Gracias!

[messer]

Pues no es por echar a perder la cuestion pero hay 4 columnas en el codigo de Raulmmmm me da un resultado parecido si coloco: width:200px; float:left;

Oooops!! como que escribi tarde.

[Raulmmmm]

Correcto DragonX . La próxima será más difícil.

[Nathan_1979]

Iniciado por Raulmmmm

Nathan no conocía esas propiedades... son de CSS3, ¿no?.

, estoy ahora viendo cosas sobre CSS3 para que no pille cuando venga jejeje

[Nathan_1979]

Cierto messer, ya lo dije en un post mas arriba.

Pero me precipite al dar mi solución.

[kseso?]

# {visibility: hidden;}

[Nathan_1979]

{
border:1px solid #000;
}

Lo veis?

[Mikmoro]

Quería hacer una puntualización con respecto a la pregunta de Nathan_1979:

cuando dije que ni siquiera era capaz de imaginar una solución era cierto, porque en ese momento no había párrafos en el div que puso, y por eso no imaginaba cómo demonios iba a romper las columnas.

Ahora al ver las soluciones propuestas que hablan de párrafos, miro otra vez y aparecen por arte de magia unas <p>.

La verdad es que me estaba haciendo la cabeza chirivitas con cómo harías las columnas sin párrafos, sólo un bloque de texto.

Y ya de paso, me he perdido. ¿De quién es el turno?

Mikel.

[kseso?]

Hola Mikel
le toca a

[Nathan_1979]

Mikmoro:

Iniciado por Nathan_1979

PD: Antes que nada pedir disculpas, pues se me olvidaron colocar elementos p
Ahora lo he probado y si funciona. Sry , ya esta editado

[Mikmoro]

Es que como verás mi respuesta es de esta mañana (para mi), a las 10,34, y la edición a las 4 de la tarde. Por eso me he conetado hace un ratillo y estaba flipando con las respuestas.

Pues me has hecho alucinar un buen rato.

Mikel.

[DragonX]

¿cuál de estos es erroneo?

a) - display:hidden;
b) - display:none;
c) - display:visible;
d) - display:illine;
e) - todas
f) - ninguna de las anteriores

[Nathan_1979]

d) Seria--> display:inline;
c) Seria --> visibility: visilbe;