Ajustando el HEADER: el Título y la descripción se ajustan a un nuevo grafico

Al cambiar el grafico de fondo de nuestra cabecera de página, nos encontramos con que el título y la descripción del Blog, ya no cuadran:




Necesitamos entonces cambiar su ubicación en la plantilla.

Aqui tenemos las sección completa de código CSS que define la cabecera de nuestra plantilla.

Buscamos y vemos que el párrafo que se ocupa de definir el estilo del Título del blog es #h1.title

Cómo queremos mover hacia la derecha el texto la opción a cambiar es margin

Cómo funciona "margin": puede tener 4 valores correspondientes con las distintas coordenadas en el sentido de las agugas del reloj, es decir ARRIBA - DERECHA - ABAJO - IZQUIERDA. Y marca la distancia entre el límite exterior de un objeto y el resto de objetos.



Vemos que tenemos:

margin: 0 1% .1em;

Es decir: 0 de margen superior, un 1% del tamaño de nuestro objeto titulo de distancia hacia la derecha, y .1 del tamaño de fuente que tenga el objeto título. Si la fuente son 24pt, p.ej. .1em serán 2,4 puntos o pixels.

Añado el margen izquierdo de 200 pixeles, porque la imagen tiene 300px de ancho pero al tener el fondo transparente 200px son suficientes para librar la silueta del dibujo

margin: 0 1% .1em 200px;

Si quisieramos mover la descripción acudimos al párrafo

#header .description

y trabajariamos en la linea "margin" igualmente. Podeis verlo en ZAPATERO Presidente, y nos van dando por PONIENTE