Floats

Para conseguir una navegacion agradable es conveniente colocar botones o pestanas horizontamente, como en esta pagina. Esto se hace por medio de floats.
La instruccion

float: left;

hara que se alineen de izquiera a derecha, en vez de formar una lista hacia abajo.

	ul#navigation {
		padding: 0;
		margin: 0;
		list-style: none;
		background: transparent url("images/nav-bg.gif") repeat-x scroll 0 50%;
	}
		#navigation li {
			float: left;
		}
			#navigation li a {
				float: left;
				border-right: 1px solid #FFF;
				padding: 10px 15px;
				font-weight: bold;
				color: #000;
			}
			#navigation .active a, #navigation .active a:hover {
				background: transparent url("images/nav-bg-active.gif") repeat-x bottom left;
			}

			#navigation li a:hover {
				background: transparent url("images/nav-bg-roll.gif") repeat-x bottom left;
						}

Uf… No entiendo nada! Vamos paso a paso para entender como damos formato a la lista de tres links:
Comenzamos de cero:

Si no dieramos este style a los enlaces, estos se mostrarian tal que asi. Hay diferencia no?

Inicio
Includes
Floats

Ahora, despues de este primer parrafo de codigo

	ul#navigation {
		padding: 0;
		margin: 0;
		list-style: none;
		background: transparent url("images/nav-bg.gif") repeat-x scroll 0 50%;
	}

esto es lo que ocurre, le hemos quitado los puntos que aparecen antes de cada palabra de la lista.

Inicio
Includes
Floats

Tras el segundo parrafo de codigo

	ul#navigation {
		padding: 0;
		margin: 0;
		list-style: none;
		background: transparent url("images/nav-bg.gif") repeat-x scroll 0 50%;
	}
		#navigation li {
			float: left;
		}

esto es lo que ocurre

Inicio
Includes
Floats

Tras el tercer parrafo de codigo

	ul#navigation {
		padding: 0;
		margin: 0;
		list-style: none;
		background: transparent url("images/nav-bg.gif") repeat-x scroll 0 50%;
	}
		#navigation li {
			float: left;
		}
			#navigation li a {
				float: left;
				border-right: 1px solid #FFF;
				padding: 10px 15px;
				font-weight: bold;
				color: #000;
			}

esto es lo que ocurre

Inicio
Includes
Floats

Tras los dos ultimos parrafos conseguimos el efecto rollover

	ul#navigation {
		padding: 0;
		margin: 0;
		list-style: none;
		background: transparent url("images/nav-bg.gif") repeat-x scroll 0 50%;
	}
		#navigation li {
			float: left;
		}
			#navigation li a {
				float: left;
				border-right: 1px solid #FFF;
				padding: 10px 15px;
				font-weight: bold;
				color: #000;
			}
			#navigation .active a, #navigation .active a:hover {
				background: transparent url("images/nav-bg-active.gif") repeat-x bottom left;
			}

			#navigation li a:hover {
				background: transparent url("images/nav-bg-roll.gif") repeat-x bottom left;
						}

esto es lo que ocurre