Cambio VI

Previos:
Cambio I, Cambio II, Cambio III, Cambio IV, Cambio V.
Continuemos con la remodelación de el Blog, ahora como ven (aquí) las imágenes que colocamos no esta correctamente alineadas así que para ello colocaremos un clase para hace que este grupo de imágenes baje un poco. hay dos maneras, una es la clase que ya existe hacerla crecer horizontalmente, hasta alcanzar la altura necesaria, la segunda en poner una clase mas, con fines prácticos crearemos una clase mas para reafirmar como se hace.

Creamos un clase llamada margenencabezado la cual llevara estas características:

div#margenencabezado{
height: 7px;
}

aquí le indicamos que esta clase tendrá una altura de 36px la cual nos premitirá bajar un poco la clase que contiene el grupo de imágenes. Este código lo copiamos y pegamos a nuestra sección de style type="text/css" y en el código lo modificaremos de esta manera:

<div id="top">
<div id="margenencabezado">
</div>
<div id="logogustavo">
<img src="http://mx.geocities.com/gustavodiazs/reblog/ico1.gif" alt="ico pantalla ">
<img src="http://mx.geocities.com/gustavodiazs/reblog/ico2.gif" alt="ico palm ">
<img src="http://mx.geocities.com/gustavodiazs/reblogico3.gif" alt="ico movil ">
<img src="http://mx.geocities.com/gustavodiazs/reblog/ico4.gif" alt="ico notebook ">
<img src="http://mx.geocities.com/gustavodiazs/reblog/barra.gif" alt="separador ">
<img src="http://mx.geocities.com/gustavodiazs/reblog/logogustavo.jpg" alt="GustavoDiazS">>br>
</div>
</div≶

Ahora pondremos una clase más para colocar el texto "Blog personal de Gustavo Díaz, Un Blog Común." para ello nuevamente agregaremos en nuetro bloque de CSS una etiqueta con el siguiente nombre separador con las siguientes características:

div#separador{
height: 57px;
text-align: right;
color: #ffffff;
}

además de agregar este codigo marcado con rojo el esta zona:

<div id="top">
<div id="margenencabezado">
</div>
<div id="logogustavo">
<img src="http://mx.geocities.com/gustavodiazs/reblog/ico1.gif" alt="ico pantalla ">
<img src="http://mx.geocities.com/gustavodiazs/reblog/ico2.gif" alt="ico palm ">
<img src="http://mx.geocities.com/gustavodiazs/reblog/ico3.gif" alt="ico movil ">
<img src="http://mx.geocities.com/gustavodiazs/reblog/ico4.gif" alt="ico notebook ">
<img src="http://mx.geocities.com/gustavodiazs/reblog/barra.gif" alt="separador ">
<img src="http://mx.geocities.com/gustavodiazs/reblog/logogustavo.jpg" alt="GustavoDiazS">>br>
</div>
<div id="separador">
$<b>Blog personal de Gustavo Díaz, Un Blog Común.$</b>
</div>
</div≶

Así quedaría después de las modificaciones.

Saludos.