GustavoDiazs

Martes, 07 de junio de 2005

Cambio V

Redes Previos:
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í:

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:

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:

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

Saludos.

Por: Gustavo Diaz Salazar | CSS | Comentarios (0) | Referencias (0)