3.10.09

222/365 » Tamaños y floats

¿Te gustaría leer este tutorial desde el inicio? 

Ayer usamos atributos de color para no perdernos mientras movemos nuestros divs de un lado a otro. Ahora vamos a organizar la estructura del sitio. Ya que este tutorial no se encarga de modificar los elementos XML de la plantilla (ya que Blogger hace esto por nosotros), solo vamos a trabajar en darle forma a nuestra plantilla. A partir de este momento, todo lo que voy a hacer es solo para darles un ejemplo de lo que usé para crear mi plantilla. Para una estructura de dos columnas y un header, hay un div de logo (generalmente le llaman header, recuerden que pueden ordenar su sitio como más les guste) justo después de abrir el body, y antes del container:

<div id='logo'>
</div>
Este div por su cuenta no hace mucho, mientras no le den forma. Intenten con algo así:
#logo {height:200px; 
background:url("http://www.urldeejemplo.com") no-repeat; 
clear:both;}

En mi caso, decidí hacer algo diferente. Ya que generalmente escribo posts demasiado cortos, y con el fin de llevarle la contraria al mundo, decidí aprovechar el espacio horizontal para mi header. Les explico un poco de lo que significan algunos de los atributos que van a ver:
  • margin es utilizado para crear márgenes fuera de los divs. En el caso específico que ven ahí, al colocar margin-left con margin-right para un elemento, hace que este quede centrado;
  • width sirve para el ancho del elemento, y height para su altura;
  • float sirve para definir hacia adónde los divs van a "flotar" cuando se les deja sueltos. Los divs que flotan hacia el mismo lado se ordenan, según su orden de declaración. En este caso, el div de content está antes que el del logo, por lo que ese se encuentra más a la izquierda.
  • clear es utilizado como un "salto de línea", es decir, para evitar que hayan elementos a los lados del elemento.
#navbar-iframe {height:0px;visibility:hidden;display:none;}
#container {width:910px; background-color:99BDAB; margin-left:auto; margin-right:auto; border-top: 4px solid black;}
#content {width:450px; float:left; background-color:#EDEFD1;}
#logo {width:150px; height:1000px; float:left; background-color:#CED59F;}
#sidebar {width:310px; height:1000px; background-color:#F06463; float:right;}
#footer {height:45px; background-color:black; overflow:auto; clear:both;}

Así, tengo un sitio que se ve así por el momento:

A partir de acá, la plantilla está básicamente organizada, y solo es cuestión de organizar los elementos, dar color y dar estilo al texto y uno que otro elemento en el sitio.

A partir de esto, ya están listos para hacer su plantilla con la forma que quieran.

¿Les gustaría tener una plantilla con un footer grande que tenga su blogroll u otras cosas? Solo crean otros divs dentro del footer. ¿Qué tal de tener un blog con dos, tres o cuatro columnas? Hay tantas opciones que pueden hacer de su plantilla única y especial. Pero mientras tanto, sigamos viendo cómo hice para terminar mi plantilla.

No hay comentarios :