Columnas dinamicas en CSS

Posteado el 05. Nov, 2010 por tuto in Desarrollo Web, Jquery

En este link podrás ver lo que haremos en este tutorial. Basicamente veremos como hacer columnas utilizando CSS

PASO 1
Creamos una carpeta nueva dentro de la cual vamos a crear una carpeta llamada imágenes en la cual vamos a colocar todas las imágenes que vamos a utilizar para nuestro tutorial.

Columnas dinamicas CSS

PASO 2
Vamos a Adobe Dreamweaver y creamos un nuevo documento HTML

Columnas dinamicas CSS

PASO 3
Debajo de la etiqueta Final Crisis vamos a colocar el siguiente código html4strict

Code block

<link rel="stylesheet" type="text/css" href="css/estilo.css">	
 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
 
	$('ul.prodlist li:nth-child(26n+1)').css({'float' : 'right'});
 
});
</script>

Columnas dinamicas CSS

PASO 4
Con el comando Ctrl + S guardamos nuestro documento con el nombre de final_crisis.html

Columnas dinamicas CSS

PASO 5
Vamos al menú File – New y creamos un nuevo documento CSS.

Columnas dinamicas CSS

PASO 6
Copiamos el siguiente código CSS dentro del documento

Code block

body {font: normal 10px Verdana, Geneva, sans-serif; font-size: 10px;line-height: 1.8em;}
h1 {
	font: 4em normal Georgia, 'Times New Roman', Times, serif;
	text-align:center;
	padding: 20px;
	margin: 0;
}
h1 small{
	font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing: 1.5em;
	display: block;
}
.container {margin: 0 auto; width: 960px; font-size: 1.2em; }
ul.prodlist {
	margin: 0; padding: 0;
	list-style: none;
}
ul.prodlist li {
	margin: 10px; padding: 0;
	float: left;
}
ul.prodlist li img {float: left;}
ul.prodlist li:nth-child(26n+1) {float: right;}
img {border: none;}

Columnas dinamicas CSS

PASO 7
Ahora con el comando Ctrl + S guardamos nuestro documento dentro de la capeta css que se encuentra dentro de la carpeta final crisis con el nombre de estilo.css

Columnas dinamicas CSS

PASO 8
Regresamos a nuestro documento HTML y dentro de las etiquetas copiamos el siguiente código html4stict

Code block

<div class="container">
 
	<h1>Columnas Dinamicas con CSS<small>tutori<a href="http://www.tutorialesenlaweb.com" style="color: rgb(51, 51, 51); text-decoration: none;">ales en la web</a></small></h1>
 
	<ul class="prodlist">
        <li style="float: right;"><a href="http://www.tutorialesenlaweb.com"><img src="imagenes/1.jpg" alt="" title="1"></a></li>
        <li><a href="http://www.designbombs.com/fashion/es-skateboarding/"><img src="imagenes/2.jpg" alt="" title="2"></a></li>
        <li><a href="http://www.designbombs.com/fashion/es-skateboarding/"><img src="imagenes/3.jpg" alt="" title="3"></a></li>
        <li><a href="http://www.designbombs.com/fashion/es-skateboarding/"><img src="imagenes/4.jpg" alt="" title="4"></a></li>
        <li><a href="http://www.designbombs.com/fashion/es-skateboarding/"><img src="imagenes/5.jpg" alt="" title="5"></a></li>
        <li><a href="http://www.tutorialesenlaweb.com"><img src="imagenes/6.jpg" alt="" title="6" /></a></li>
        <li><a href="http://www.tutorialesenlaweb.com"><img src="imagenes/7.jpg" alt="" title="7"></a></li>
        <li><a href="http://www.tutorialesenlaweb.com"><img src="imagenes/8.jpg" alt="" title="8"></a></li>
        <li><a href="http://www.tutorialesenlaweb.com"><img src="imagenes/9.jpg" alt="" title="9"></a></li>
        <li><a href="http://www.tutorialesenlaweb.com"><img src="imagenes/10.jpg" alt="" title="10"></a></li>
        <li><a href="http://www.tutorialesenlaweb.com"><img src="imagenes/11.jpg" alt="" title="11"></a></li>
        <li><a href="http://www.tutorialesenlaweb.com"><img src="imagenes/12.jpg" alt="" title="12"></a></li>
        <li><a href="http://www.tutorialesenlaweb.com"><img src="imagenes/13.jpg" alt="" title="13"></a></li>
  </ul>
</div>

Columnas dinamicas CSS

PASO 9
Por ultimo dentro de la carpeta final crisis creamos una carpeta llamada js dentro de la cual copiamos el archivo js que adjunto en este tutorial.