En su primera parte veíamos como incluir el HTML necesario para crear un header con múltiples funciones, veamos ahora el CSS básico para poder posicionar esos bloques creados.

El resultado que obtendremos con estos cambios podremos apreciarlo en Elementos de la página



Primero definimos el bloque principal que incluye los demás bloques

<div id='header-wrapper'>

resto de bloques....

</div> <!-- end header-wrapper -->

#header-wrapper {
background: url(URL DE LA IMAGEN DE CABECERA) no-repeat top;
width: 980px;
margin: 0 auto;
}

Hemos incluido la imagen de cabecera(background), le hemos dado el ancho que tendrá(width) y lo posicionamos centrado(margin).

Ahora los bloques

/* Busqueda */
#busqueda {
padding: 15px;
float: right;
margin: 0 50px 0 0;
}
.texto {
background:transparent !important;
border-style:none !important;
color: #898989;
width: 105px;
overflow:hidden;
}

/* Suscribe */
#suscribe {
width: 230px;
float: right;
overflow:hidden;
margin: 0 15px 0 0;
list-style:none;
}
#rss, #rssmail{
width: 55px;
float: left;
padding: 0 0 0 5px;
}
#rsscount{
width: 88px;
padding: 0 0 0 10px;
float: left;
}


/* Title */
#title {
width: 670px;
height: 100px;
float: left;
margin: 30px 0 0 0 ;
}

/* Twitter */
#twitter {
width: 285px;
height: 110px;
float: right;
margin: 40px 0 0 0;
}

/* menu */
#menu {
float: left;
width: 550px;
margin: 35px 0 0 0;
padding: 5px 10px 0 10px;
font-size:12px;
font-weight: bold;
text-align:center;
text-transform:uppercase;
}

#menu ul {
margin: 0 auto;}

#menu li {
padding: 7px;
float:left;
border-right: 2px solid #898989;
list-style:none; }


Realmente las propiedades importantes de estos bloques son el ancho(width) y el alto(height) que queramos que tengan, su posición(float), que aparezcan a la izquierda o derecha y por ultimo, los márgenes(margin) con respecto a otros elementos.

Como veis realmente no son necesarias muchas propiedades para posicionar y darle forma a los bloques.

Con esto podremos ir a nuestra página de añadir elementos y rellenar estos bloques con la ayuda de los elementos de Blogger.
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también