4 enero 2010 in XHTML/CSS by dacho

Bueno seguimos avanzando con la penultima leccion del curso, Manos a la obra :)

Bueno ya vimos en la leccion anterior un ejemplo de como los divs sirven para encapsular elementos en forma de cajas y tambien vimos un repaso de los elementos mas utilizados a la hora de crear una pagina web.

Ahora lo que haremos sera incluir un ejemplo de una web con dos columnas a modo de ejemplo y luego veremos porque se forma en dos columnas, la explicacion a esto es uno de los temas que mas dolores de cabeza da al principio a quienes quieren maquetar “sin tabla”, la explicacion de como funcionan las propiedades float:right/left y clear:both;

Una introduccion basica al float

Como hemos visto en todos los ejemplos generalmente los elementos de html se colocan uno abajo del otro, es decir, si uno coloca una imagen y luego un texto en un documento HTML, el resultado que obtendra es una imagen y abajo de la misma el texto. Este efecto pasa con la mayoria de los elementos en HTML.

La explicacion de porque sucede esto es que cada elemento viene con una configuracion predeterminada, y los elementos que se ubican uno debajo del otro tienen seteado por defecto la propiedad float como none.

Esto hace que los elementos se comporten de esa manera, ahora la pregunta seria ¿como hacer para que se compoten de otra forma?

La propiedad float nos permite ubicar elementos a la derecha o izquierda en vez de colocarse siempre abajo del anterior, por ejemplo para ubicarlo a la derecha, se logra seteando con float: right desde el css al elemento. Y que se coloque a la izquiera es con float: left… Aunque parezcan sencillas las cosas asi como se dicen a la hora de diseñar hay varios problemas que se presentan con este modelo, pero todo tiene solucion. La mejor forma de aprender es con experiencia diseñando una y otra vez y cuando sale un problema arreglarselas de alguna forma para solucionarlo!

Por ello veremos como hacer una web cuya forma sea de un encabezado con un menu como columna izquierda y algun contenido como columna derecha, aqui el codigo, como siempre y esta vez mas que nunca, prueben agregar cosas, quitar propiedades a ver que sucede, agregar nuevas y experimentar:

<html>
<head>
	<title>Pagina con dos columnas!</title>
	<style>
		body{background:#ddd; color: #1A1C1E;}
		#centro{width: 800px; margin: 10px auto 0 auto; border: 1px silver solid; background: #fef}
		#encabezado{width: 780; padding: 10px 10px 10px 10px; background: #669A00; color: #1A1C1E;}
		#columna{ width: 200px; float: left; background: #eee}
		#contenido{ width: 580px; float: left; background: #CCCCCC; padding: 5px 10px 5px 10px;}
		#pie{clear: both;}
	</style>
<head>
 
<body>
 
<div id="centro">
 
	<div id="encabezado"> 
	<h1>Restaurant LA VAQUITA</h1>
	<h3>Disfrute una exquisita parrillada, con la mejor atencion y un precio increible</h3>
	</div>
 
	<div id="columna">
		<ul>
			<li>Home</li>
			<li>Carta</li>
			<li>Quienes Somos</li>
			<li>Donde estamos y como llegar</li>
			<li>Contactenos</li>
		</ul>
	</div>
 
	<div id="contenido">
 
		<h2>Quienes Somos</h2>
		<p>LA VAQUITA es un lugar especial en donde podes disfrutar de una de las costumbres mas ricas de la Argentina, una rica parrillada.</p>
		<p>Un ambiente confortable, comodo y orientado a estar en el campo o una estancia, pero ubicado en pleno corazon de Capital Federal.</p>
 
		<h2>Nuestra Parrilla Libre</h2>
		<ul>
			<li>Asado</li>
			<li>Vacio</li>
			<li>Pollo</li>
			<li>Bondiola</li>
			<li>Arrollado de pollo</li>
			<li>Provoleta</li>
			<li>Pechito de cerdo</li>
			<li>Matambre a la pizza</li>
			<li>Chorizo</li>
			<li>Chinchulines</li>
			<li>Morcilla</li>
			<li>Riñon</li>
		</ul>
 
	</div>
 
	<div id="pie">
		<p>copyright ® 2010 - Curso de HTML <a href="http://www.blogdelaweb.com.ar">Blog de la Web</a></p>
	</div>
 
</div>
</body>
</html>

Nuevamente se aclara que en este ejemplo no se busca un diseño bello y atrativo, sino que solo las ubicaciones de los elementos, tambien aprovecho para avisar que en la proxima leccion crearemos esta pagina con todas su secciones completas y con un diseño un poco mas interesante que este. Pero antes que eso todavia faltan aprender otras cosillas.

Propiedades ID y CLASS

En el ejemplo anterior aparecieron dos elementos nuevos dentro de algunos tags (las propiedades id y class) como por ejemplo en

<div id="encabezado"> 
	<h1>Restaurant LA VAQUITA</h1>
	<h3>Disfrute una exquisita parrillada, con la mejor atencion y un precio increible</h3>
</div>

En el ejemplo de arriba lo que hace el identificador ID es proporcionarnos un metodo para instanciar un div en este caso el encabezado. ¿Para que sirve exactamente? bueno sirve para poder aplicarles propiedades css al elemento que se especifica, tambien es util cuando se trabaja por ejemplo con javascript pero eso es algo que aqui no lo veremos.

¿Como se instancia ese elemento desde el CSS? para instanciar el encabezado por ejemplo desde el CSS lo que hacemos el colocar # (numeral) + nombre del identificador, en nuestro ejemplo seria #encabezado{ aqui las propiedades del CSS que valen para el elemento con id = “Encabezado” }

Un ejemplo practico:

<html>
<head>
	<title>Aprendiendo que es la propiedad ID</title>
	<style>
 
             #rojo{ color: red; }
 
	</style>
<head>
 
<body>
    <p>Este es un texto</p>
    <p id="rojo">este es un texto con ID = "rojo"</p>
</body>
</html>

Como veran, el parrafo que contiene el ID=”rojo” se pone de color rojo porque se lo indicamos desde el CSS. Tambien podemos aclarar que elemento es es decir no solo colocar el #rojo sino que se puede colocar p#rojo lo que identifica mejor el elemento y nos permite saber mirando el codigo css que ese elemento es para un parrafo.

Los elementos ID deben ser unicos en la pagina, es decir, no puede haber dos elementos con el mismo ID en un mismo documento HTML. Si lo que deseamos es crear varios elementos que tengan un estilo de css en comun, el identificador necesariamente tiene que ser un CLASS, y la forma de instanciar un class desde CSS es con . (punto) + nombre del elemento, como en el siguiente ejemplo seria p.impar y p.par:

<html>
<head>
	<title>Aprendiendo que es la propiedad CLASS</title>
	<style>
             p.impar{ background: #eeeeee; }
             p.par{ background: #dddddd;  color: blue;}
	</style>
<head>
 
<body>
    <p class="impar">Este es nuestro parrafo numero 1 (impar)</p>
    <p class="par">Este es nuestro parrafo numero 2 (par)</p>
    <p class="impar">Este es nuestro parrafo numero 3(impar)</p>
    <p class="par">Este es nuestro parrafo numero 4(par)</p>
</body>
</html>

Basicamente esta es la mayor utilidad de estas dos propiedades MUY IMPORTANTES para el diseño de una pagina, ya que nos permite ponerles nombres a los elementos!. La utilizacion de estas propiedades funcionan para todos los elementos de html, es decir a todos los elementos les podemos colocar la propiedad ID o Class segun corresponda para poder instanciarlos, sean estos elementos divs, p, a, span, ul, li, etc…

La propiedad Clear

Esta propiedad sirve para limpiar el display de los floats anteriores, es decir para ser mas claro uno por ejemplo puede tener el caso de una presentacion deproductos en columnas de 3, entonces lo que se puede hacer es colocar divisores con un ancho del 33% y asignarles a todos un float: left, como siempre mejor que explicar es que lo vean ustedes mismos y revisen el codigo:

 
<html>
<head>
	<title>tres columnas de productos</title>
	<style>
		body{background:#ddd; color: #1A1C1E;}
		#centro{width: 800px; margin: 10px auto 0 auto; border: 1px silver solid; background: #fff}
		#encabezado{width: 780; padding: 10px 10px 10px 10px; background: #005682; color: white;}
		#contenido{ background: #F1F5F8; padding: 5px 5px 5px 5px;}
		#contenido div{width: 252px; float: left; background: white; margin: 4px 3px 0 0; height: 200px; border: 2px solid silver}
		#contenido div h2{text-align: center;}
	</style>
<head>
 
<body>
 
<div id="centro">
 
	<div id="encabezado"> 
	<h1>Listado de Productos</h1>
	</div>
 
	<div id="contenido">
 
	<div>
		<h2>Notebook Acer 5536</h2>
		<ul>
			<li>15.6 Pulgadas</li>
			<li>Athlon X2 2.1</li>
			<li>3gb Ram</li>
			<li>Disco 320Gb</li>
		</ul>
	</div>
 
	<div>
		<h2>Notebook Compac 515</h2>
		<ul>
			<li>14 Pulgadas</li>
			<li>Athlon X2 2.1</li>
			<li>2gb Ram</li>
			<li>Disco 160Gb</li>
		</ul>
	</div>
 
	<div>
		<h2>Notebook dell 1520</h2>
		<ul>
			<li>15 Pulgadas</li>
			<li>CORE2DUO 2.2</li>
			<li>2gb Ram</li>
			<li>Disco 160Gb</li>
		</ul>
	</div>
 
	<div>
		<h2>Notebook Toshiba L305</h2>
		<ul>
			<li>15 Pulgadas</li>
			<li>CORE2DUO 2.1</li>
			<li>4gb Ram</li>
			<li>Disco 250Gb</li>
		</ul>
	</div>
 
		<div>
		<h2>Notebook Acer 5526</h2>
		<ul>
			<li>17 Pulgadas</li>
			<li>Athlon X2 2.3</li>
			<li>4gb Ram</li>
			<li>Disco 320Gb</li>
		</ul>
	</div>
 
	<div>
		<h2>Notebook Compac 815</h2>
		<ul>
			<li>15,6 Pulgadas</li>
			<li>Athlon X2 2.04</li>
			<li>3gb Ram</li>
			<li>Disco 250Gb</li>
		</ul>
	</div>
 
	<div>
		<h2>Notebook Dell 1772</h2>
		<ul>
			<li>15 Pulgadas</li>
			<li>CORE2DUO 2.2</li>
			<li>4gb Ram</li>
			<li>Disco 320Gb</li>
		</ul>
	</div>
 
	<div>
		<h2>Notebook Toshiba M375</h2>
		<ul>
			<li>15,6 Pulgadas</li>
			<li>CORE2DUO 2.1</li>
			<li>3gb Ram</li>
			<li>Disco 500Gb</li>
		</ul>
	</div>
 
 
	</div>
 
</div>
</body>
</html>

A no desesperar si no entienden algo, lo que hice fue decirle por medio de CSS que todos los elementos div que se encuentran adentro de el div con id contenedor tengan ciertas propiedades, es decir para instanciar todos los divs de adentro de un elemento especifico lo que se hace es:

elemento#nombre elementos{} o elemento.nombre elementos{}

en este caso: div#contenido div{} /*nos dice las propiedades que les ponemos a TODOS los divs contenidos en div#contenido */

Por otro lado a cada elemento se asigno un ancho de 252px y les digo que tengan un float: left, lo que los ubica uno al lado del otro con un margen ademas para que se separen. Y la linea

contenido div h2{text-align: center;} nos dice que simplemente centremos los titulos de cada producto.

Bueno ademas de todo esto que dije antes quizas las personas que son muy observadoras se dieron cuenta que pusimos que el fondo de contenido sea de color #F1F5F8 y en realidad se ve de color #cccccc, PUES ESTO ES UN ERROR CLASICO QUE BUSQUE QUE SUCEDA, al colocar elementos en float y no cerrarlos con un Clear: both, entonces el div contenedor no se comportara normalmente estirandose todo lo que necesitamos, por el contrario quedara asi como lo estas viendo. La solucion es bastante sencilla, Quizas hay mejores, yo siempre he utilizado que al elemento siguiente que existe le colocamos un clear: both y el problema esta resuelto.

Si no hay elemento me invento un div de un pixel de ancho y le coloco el clear both, aunque hay otras soluciones yo siempre termine aplicando esta que no es la mas elegante de todas pero bueno.

Aqui la pagina con el problema resuelto:

<html>
<head>
	<title>tres columnas de productos</title>
	<style>
		body{background:#ddd; color: #1A1C1E;}
		#centro{width: 800px; margin: 10px auto 0 auto; border: 1px silver solid; background: #fff}
		#encabezado{width: 780; padding: 10px 10px 10px 10px; background: #005682; color: white;}
		#contenido{ background: #F1F5F8; padding: 5px 5px 5px 5px;}
		#contenido div{width: 252px; float: left; background: white; margin: 4px 3px 0 0; height: 200px; border: 2px solid silver}
		#contenido div h2{text-align: center;}
		#pie{clear: both; text-align: center; padding-top: 10px;}
	</style>
<head>
 
<body>
 
<div id="centro">
 
	<div id="encabezado"> 
	<h1>Listado de Productos</h1>
	</div>
 
	<div id="contenido">
 
	<div>
		<h2>Notebook Acer 5536</h2>
		<ul>
			<li>15.6 Pulgadas</li>
			<li>Athlon X2 2.1</li>
			<li>3gb Ram</li>
			<li>Disco 320Gb</li>
		</ul>
	</div>
 
	<div>
		<h2>Notebook Compac 515</h2>
		<ul>
			<li>14 Pulgadas</li>
			<li>Athlon X2 2.1</li>
			<li>2gb Ram</li>
			<li>Disco 160Gb</li>
		</ul>
	</div>
 
	<div>
		<h2>Notebook dell 1520</h2>
		<ul>
			<li>15 Pulgadas</li>
			<li>CORE2DUO 2.2</li>
			<li>2gb Ram</li>
			<li>Disco 160Gb</li>
		</ul>
	</div>
 
	<div>
		<h2>Notebook Toshiba L305</h2>
		<ul>
			<li>15 Pulgadas</li>
			<li>CORE2DUO 2.1</li>
			<li>4gb Ram</li>
			<li>Disco 250Gb</li>
		</ul>
	</div>
 
		<div>
		<h2>Notebook Acer 5526</h2>
		<ul>
			<li>17 Pulgadas</li>
			<li>Athlon X2 2.3</li>
			<li>4gb Ram</li>
			<li>Disco 320Gb</li>
		</ul>
	</div>
 
	<div>
		<h2>Notebook Compac 815</h2>
		<ul>
			<li>15,6 Pulgadas</li>
			<li>Athlon X2 2.04</li>
			<li>3gb Ram</li>
			<li>Disco 250Gb</li>
		</ul>
	</div>
 
	<div>
		<h2>Notebook Dell 1772</h2>
		<ul>
			<li>15 Pulgadas</li>
			<li>CORE2DUO 2.2</li>
			<li>4gb Ram</li>
			<li>Disco 320Gb</li>
		</ul>
	</div>
 
	<div>
		<h2>Notebook Toshiba M375</h2>
		<ul>
			<li>15,6 Pulgadas</li>
			<li>CORE2DUO 2.1</li>
			<li>3gb Ram</li>
			<li>Disco 500Gb</li>
		</ul>
	</div>
 
	</div>
 
	<div id="pie">
		<p>copyright ® 2010 - Curso de HTML <a href="http://www.blogdelaweb.com.ar">Blog de la Web</a></p>
	</div>	
</div>
</body>
</html>

Bueno ademas de para solucionar ese problema el clear both nos sirve para decirle que se termine algun float, es decir como habran visto el elemento se ubica a la izquierda siempre por lo que si uno quiere especificamente empezar de nuevo el listado no puede, otra vez un ejemplo:

 
<html>
<head>
	<title>tres columnas de productos</title>
	<style>
		body{background:#ddd; color: #1A1C1E;}
		#centro{width: 800px; margin: 10px auto 0 auto; border: 1px silver solid; background: #fff}
		#encabezado{width: 780; padding: 10px 10px 10px 10px; background: #005682; color: white;}
		#contenido{ background: #F1F5F8; padding: 5px 5px 5px 5px;}
		#contenido div{width: 252px; float: left; background: white; margin: 4px 3px 0 0; height: 200px; border: 2px solid silver}
		#contenido div h3{text-align: center;}
		#contenido h2{ clear: both; margin-left: 15px; padding-top: 15px;}
		#pie{clear: both; text-align: center; padding-top: 10px;}
	</style>
<head>
 
<body>
 
<div id="centro">
 
	<div id="encabezado"> 
	<h1>Listado de Productos</h1>
	</div>
 
	<div id="contenido">
 
	<h2>Notebooks Acer</h2>
 
	<div>
		<h3>Notebook Acer 5536</h3>
		<ul>
			<li>15.6 Pulgadas</li>
			<li>Athlon X2 2.1</li>
			<li>3gb Ram</li>
			<li>Disco 320Gb</li>
		</ul>
	</div>
 
	<div>
		<h3>Notebook Acer 5526</h3>
		<ul>
			<li>17 Pulgadas</li>
			<li>Athlon X2 2.3</li>
			<li>4gb Ram</li>
			<li>Disco 320Gb</li>
		</ul>
	</div>
 
 
	<h2>Notebooks Compac</h2>	
 
	<div>
		<h3>Notebook Compac 515</h3>
		<ul>
			<li>14 Pulgadas</li>
			<li>Athlon X2 2.1</li>
			<li>2gb Ram</li>
			<li>Disco 160Gb</li>
		</ul>
	</div>
 
 
	<div>
		<h3>Notebook Compac 815</h3>
		<ul>
			<li>15,6 Pulgadas</li>
			<li>Athlon X2 2.04</li>
			<li>3gb Ram</li>
			<li>Disco 250Gb</li>
		</ul>
	</div>
 
	<div>
		<h3>Notebook Compac 585</h3>
		<ul>
			<li>17 Pulgadas</li>
			<li>Athlon X2 2.3</li>
			<li>4gb Ram</li>
			<li>Disco 250Gb</li>
		</ul>
	</div>
 
 
	<div>
		<h3>Notebook Compac c415</h3>
		<ul>
			<li>14,6 Pulgadas</li>
			<li>Athlon X2 2.04</li>
			<li>3gb Ram</li>
			<li>Disco 250Gb</li>
		</ul>
	</div>
 
 
	<h2>Notebooks Dell</h2>
 
	<div>
		<h3>Notebook dell 1520</h3>
		<ul>
			<li>15 Pulgadas</li>
			<li>CORE2DUO 2.2</li>
			<li>2gb Ram</li>
			<li>Disco 160Gb</li>
		</ul>
	</div>
 
	<div>
		<h3>Notebook Dell 1772</h3>
		<ul>
			<li>15 Pulgadas</li>
			<li>CORE2DUO 2.2</li>
			<li>4gb Ram</li>
			<li>Disco 320Gb</li>
		</ul>
	</div>
 
 
 
	<h2>Notebooks Toshiba</h2>	
 
	<div>
		<h3>Notebook Toshiba L305</h3>
		<ul>
			<li>15 Pulgadas</li>
			<li>CORE2DUO 2.1</li>
			<li>4gb Ram</li>
			<li>Disco 250Gb</li>
		</ul>
	</div>
 
	<div>
		<h3>Notebook Toshiba M375</h3>
		<ul>
			<li>15,6 Pulgadas</li>
			<li>CORE2DUO 2.1</li>
			<li>3gb Ram</li>
			<li>Disco 500Gb</li>
		</ul>
	</div>
 
	</div>
 
	<div id="pie">
		<p>copyright ® 2010 - Curso de HTML <a href="http://www.blogdelaweb.com.ar">Blog de la Web</a></p>
	</div>	
</div>
</body>
</html>

Firjarse que en este ejemplo organice las notebooks por marca, y parece que todo es normal pero si se fijan cada vez que dice Notebooks es un H2 , si van al css veran que los H2 de adentro del div contenido tienen la propiedad Clear: both;, este es el momento de decir, ¿que pasa si lo saco?, pues yo les digo saquenlo y compruebenlo, de esta forma podran entender mejor para que sirve el Clear: both;

Bueno, Creo que esta leccion se hizo algo larga, por lo que la dejamos aca y como recomendacion les propongo que armen distintas estructuras webs, con los que se les ocurra y vallan viendo como solucionar los problemas, basicamente esto se aprende por el famoso metodo prueba y error, porque no vale la pena aprenderse todas las variaciones posibles, sino que a medida que se aparecen ver como resolverlas y con el tiempo uno se termina acostumbrando.

Por otra parte las propiedades float y clear estan incluidas para TODOS los elementos HTML y funcionan de igual forma que en los divs :)

Espero que nos veamos en la proxima leccion!

Siguiente Lección >>

>> Indice de Contenido <<

No hay entradas Relacionadas!.