Imágenes y multicolumnas en css3

Dalvenjha · #1 (**permalink**) 12/11/2010, 08:35

Hola tengo una consulta, veamos si alguien me puede dar una mano =D

Estoy usando css3 para generar columnas en un párrafo, pero en el mismo div pongo una imagen flotada, sin embargo no se me ocurre como podría hacer que la imagen ocupe más de una columna, dejo el código y la dirección donde se ve online el problema:

Código HTML:

<!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=utf-8" />
<title>Untitled Document</title>
<style>
body {
	color:#666;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
}
#wrapper {
	width:600px;
	margin:auto;
}
#columnaWrapper {
	-moz-column-count: 3;
  -moz-column-gap: 2em;  
   -webkit-column-count: 3;
   -webkit-column-gap: 2em;
   width:600px;
}
</style>
</head>

<body>
<div id="wrapper">		
<div id="columnaWrapper">
<div style="float:left;">
		<img src="imagen.jpg" />	   
	</div>
<p>Suspendisse eu purus orci. Nulla facilisis aliquet tincidunt. Maecenas feugiat, eros at venenatis lobortis, lorem odio rutrum mauris, luctus dictum odio neque et leo. Fusce ut nulla at nulla pretium pulvinar eu in magna? Curabitur molestie libero sed arcu imperdiet dignissim egestas est faucibus. Aliquam tempus eleifend massa vitae tincidunt. Donec odio nulla, scelerisque nec cursus quis, faucibus et nibh? Maecenas placerat elit sit amet leo imperdiet dignissim. Sed malesuada risus quis nisl molestie ut vulputate justo lacinia? Nunc urna nulla, cursus non tempor nec; egestas vel lorem. Duis aliquet consectetur erat, sit amet eleifend enim gravida sit amet. Nunc lacinia, erat sit amet fermentum venenatis, orci mi tincidunt ligula, non lacinia dolor felis eget risus. Pellentesque auctor ante ac purus porta id gravida erat convallis. Curabitur ut tincidunt metus. Praesent iaculis congue mattis. Phasellus consectetur, tortor nec gravida pharetra, diam nisl lacinia sem, ut imperdiet neque leo id ante. Phasellus vel tellus nec velit hendrerit consectetur!</p>
<p>Ut a odio tortor, vitae placerat nunc. Cras id augue libero. Fusce ullamcorper dignissim dolor, at iaculis metus imperdiet ac. Phasellus dapibus, ipsum in mollis porta, leo elit varius arcu, in cursus purus mauris nec enim. Aliquam eget libero sit amet leo porttitor mollis quis sit amet nibh. Morbi rutrum aliquet fermentum. Nulla facilisi. Nam facilisis iaculis odio, et convallis nisl rhoncus vel. Etiam consequat, dolor in mattis faucibus, elit tortor gravida enim, sed varius tortor nisi eget enim. Donec non diam id eros elementum consectetur ut sed sapien. Proin sapien sem, ornare placerat cursus eget, pellentesque sed lectus. Sed et augue purus. Phasellus viverra dictum metus in varius. Pellentesque convallis sollicitudin molestie. Etiam gravida, nibh sit amet faucibus bibendum, lectus mi hendrerit mauris, eu rutrum massa dolor scelerisque orci? Sed in hendrerit ipsum?</p>
<p>Nam urna felis, ultricies vel ultricies et; elementum vitae purus. Cras venenatis quam eu turpis tincidunt placerat! Donec aliquet justo at dui consequat id mollis nunc pulvinar! Proin semper volutpat nisi, quis consequat lorem lobortis sagittis! Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum tincidunt risus ut diam iaculis et aliquam arcu consectetur? Nunc ornare ultrices ipsum, vitae mollis augue ornare eu! Cras quis lectus quis elit fermentum condimentum egestas quis erat! Quisque interdum purus non libero aliquet tincidunt. Suspendisse ligula augue, convallis in mollis non, sodales ac sem. Etiam tincidunt ultrices tempus. Aliquam sed ornare lorem! In luctus pharetra erat, vitae porta sem ullamcorper ac! Sed in ligula ac felis aliquet facilisis quis in justo. Sed mattis sodales lacus non scelerisque. Pellentesque commodo, velit sit amet volutpat molestie, augue nisl pretium ante, quis varius tortor lectus quis mauris. Proin vitae orci eu justo aliquet dapibus. Sed nunc sem, feugiat at elementum quis, consequat non diam. Pellentesque sit amet massa id velit rhoncus faucibus.<br />
</p>
</div>
</div><!--#wrapper-->
</body>
</html>

http://buenaondaperu.org/concurso/columnis/

Ahí la dirección

kseso? · #2 (**permalink**) 12/11/2010, 13:25

la propiedad que debería controlar ese comportamiento es:

Código CSS:

Ver originalcolumn-span: all;

Pero mucho me temo que es aún soportada e interpretada de aquella manera por los distintos navegadores.
Sólo hice unas pruebas muy rápidas en firefox 3.6 y chrome 7con el siguiente código:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Kseso? Jugando con css</title>
<style type="text/css">
 * {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
  }
div {
  background: #00B0F0;
  height: 350px;
  -moz-column-width: 20em;
  -moz-column-gap: 2em;             
  -moz-column-rule: 4px solid #FF6600;
  -webkit-column-width: 20em;
  -webkit-column-gap: 2em;              
  -webkit-column-rule: 4px solid #FF6600;
  padding: 5px;      
}
p { font-size: 14px; background: #CCFFFF;}
img {-moz-column-span: all; -webkit-column-span: all; width: 30em; margin-left: -5em;display:inline-block; float: left;}
</style>
</head>
<body>
    <div>
        <p>Lorem ipsum dolor sit amet consectetuer Lorem tincidunt et et interdum. Cursus Phasellus et Phasellus id Suspendisse nonummy id tempus orci vestibulum. Felis congue dui eget consectetuer. Sed Integer Donec lobortis pretium lacus. Pede ac lacinia netus eros neque sed non Nulla tortor urna. Ullamcorper netus ac amet orci odio Vivamus Lorem ultrices eget nibh. Aliquam Lorem Nulla orci tristique sem convallis.</p>
<p>Fusce magna lacinia tincidunt vitae consectetuer leo aliquet justo venenatis ante. Interdum sagittis Phasellus metus Vestibulum Vestibulum vitae nunc eu odio ullamcorper. Curabitur Vestibulum tincidunt laoreet Donec laoreet eget Ut Phasellus mauris eget. Facilisis ac nulla nisl Cum wisi dictum Nulla a aliquam nibh. Pretium augue justo a faucibus velit lacinia Vivamus et felis consequat. Ut wisi congue malesuada nunc sem Quisque parturient tortor pretium Curabitur. Congue Nullam.</p><img src="yugo.jpg" alt="alt" />
<p>Libero sit vitae quis Quisque a leo augue nunc et sit. Vitae libero malesuada Aenean nibh laoreet at at et lobortis justo. Pellentesque wisi consectetuer facilisis dolor mi parturient laoreet amet tincidunt tortor. Pede sit amet justo Donec et id In Aliquam malesuada elit. Integer lacus pretium accumsan Aenean at Vestibulum ante ut quis laoreet. </p>
<p>Dui Nullam commodo adipiscing orci cursus parturient venenatis convallis purus ligula. Tellus lobortis vel felis mauris Maecenas leo Nunc nascetur tortor Sed. Morbi ut neque eget nibh egestas mi nec orci justo metus. Vestibulum auctor dignissim tristique nulla ullamcorper Vestibulum sit consequat Donec tincidunt. Ipsum elit mauris leo sagittis vitae ipsum Curabitur sit lobortis sed. Lobortis Pellentesque laoreet Donec Ut.</p>
<p>Libero sit vitae quis Quisque a leo augue nunc et sit. Vitae libero malesuada Aenean nibh laoreet at at et lobortis justo. Pellentesque wisi consectetuer facilisis dolor mi parturient laoreet amet tincidunt tortor. Pede sit amet justo Donec et id In Aliquam malesuada elit. Integer lacus pretium accumsan Aenean at Vestibulum ante ut quis laoreet. </p>
<p>Dui Nullam commodo adipiscing orci cursus parturient venenatis convallis purus ligula. Tellus lobortis vel felis mauris Maecenas leo Nunc nascetur tortor Sed. Morbi ut neque eget nibh egestas mi nec orci justo metus. Vestibulum auctor dignissim tristique nulla ullamcorper Vestibulum sit consequat Donec tincidunt. Ipsum elit mauris leo sagittis vitae ipsum Curabitur sit lobortis sed. Lobortis Pellentesque laoreet Donec Ut.</p>
<p>Libero sit vitae quis Quisque a leo augue nunc et sit. Vitae libero malesuada Aenean nibh laoreet at at et lobortis justo. Pellentesque wisi consectetuer facilisis dolor mi parturient laoreet amet tincidunt tortor. Pede sit amet justo Donec et id In Aliquam malesuada elit. Integer lacus pretium accumsan Aenean at Vestibulum ante ut quis laoreet. </p>
<p>Dui Nullam commodo adipiscing orci cursus parturient venenatis convallis purus ligula. Tellus lobortis vel felis mauris Maecenas leo Nunc nascetur tortor Sed. Morbi ut neque eget nibh egestas mi nec orci justo metus. Vestibulum auctor dignissim tristique nulla ullamcorper Vestibulum sit consequat Donec tincidunt. Ipsum elit mauris leo sagittis vitae ipsum Curabitur sit lobortis sed. Lobortis Pellentesque laoreet Donec Ut.</p>
    </div>
</body>
</html>

Y esto es lo que hace cada uno:

Dalvenjha · #3 (**permalink**) 12/11/2010, 19:43

Eh! se ve interesante, lo probaré ahora mismo =D

Gracias!