05 junio 2005

Cambio V

RedesPrevios:
Cambio I, Cambio II, Cambio III, Cambio IV.
Continuemos con la remodelación de el Blog, ahora empezare a modificar el encabezado, primero quitaremos el marco gris al rededor de de la plantilla que implementamos, necesitamos eliminar una línea de la etiqueta wrap marcare con rojo la característica de esta etiqueta que eliminaremos; además modificaremos el ancho de la sección que usaremos para colocar la información de el blog, a un ancho definido en 760px, para que sea visible en la mayoría de las definiciones de tamaño de pantalla posibles, y lo marcaremos en azul; entonces quedara el código de esta manera:
div#wrap {
border: 0.4em solid #999;
width: 85%;
margin: 1em auto;
text-align: left;
}
div#wrap {
width: 760px;
margin: 1em auto;
text-align: left;
}
ahora si aboquémonos a el encabezado, para esto eliminemos todo lo que se encuentre dentro de las etiquetas top es decir lo que esta marcado con rojo:
<div id="top">
<p>Top section, things like logo go here</p>
</div>
bien ahora lo que sigue es determinar que se va a coloca en el encabezado he estado trabajando en esto y he determinado que sea algo así:

encabezado blog

como en el fondo ya esta la barra azul, segmentaremos la imagen y dejaremos solo la los elementos que queramos colocar en este caso serian:

logogustavo
boton
ico1ico2ico3ico4

Creamos una etiqueta que en este caso se llamara logogustavo a la cual le apicaremos las siguientes características:
div#logogustavo{
height: 83px;
text-align: right;
color: #ffffff;
}
haremos una sección de 83px de alto, el texto alinead a la derecha y con texto blanco; y este texto lo agregamos a nuestra hoja de estilo, ahora en la zona donde eliminamos el texto colocamos lo siguiente:
<div id="top">
<div id="logogustavo">
<img src="img/ico1.gif" alt="ico pantalla ">
<img src="img/ico2.gif" alt="ico palm ">
<img src="img/ico3.gif" alt="ico movil ">
<img src="img/ico4.gif" alt="ico notebook ">
<img src="img/barra.gif" alt="separador ">
<img src="img/logogustavo.jpg" alt="GustavoDiazS"><br>
</div>
</div>
Así quedaría después de las modificaciones.

Saludos.

3 comentarios:

Anónimo dijo...

como la haces de emocion gustavo.

jajaja.

Gustavo Diaz Salazar dijo...

despacio para que se valla asimilando la cosa, y no se pierdan en el relajo de cada cosa.

Saludos.

Anónimo dijo...

jajaja ok