Siguemos con nuestra exploración de las propriedades que se encuentran dentre de los { } en el css de cualquiera pagína Web. Primero...

• Los fondos
  • background-color: define la color del fondo, gracias al nombre de la color, o a su codigo hexadecimal. Ejemplos: [ background-color: white; ] [ background-color: #FFFF00; ]
  • background-image: para poner una ímagen en el fondo del blog, o de cualquiera parte del blog. Por supuesto, la ímagen debe estar almacenada, porque te servirás de su dirección. Ejemplo: [ background-image: url(http://idata.over-blog.com/2/32/21/32/deco/36.jpg); ]
  • background-repeat: para definir la repetición de la ímagen. Con "repeat-none", no se repetirá; con "repeat-x", se repetirá horizontalmente, y con "repeat-y", verticalmente. Si no pones nada, la ímagen se repetirá para cobrir todo el fondo. Ejemplo: [ background-image: url(http://idata.over-blog.com/2/32/21/32/deco/36.jpg); background-repeat: repeat-x; ]
  • background-attachment: para "fijar" el fondo cuando haces avanzar el texto. Si no pones nada, el fondo moverá con el resto del blog. Ejemplo: [ background-image: url(http://idata.over-blog.com/2/32/21/32/deco/36.jpg); background-repeat: repeat-x; background-attachment: fixed; ]
  • background-position: para definir la posición de la ímagen en relación al rincón superior de la izquierda de la pantalla. Hay dos maneras de definir la posición de la ímagen: con "top", "bottom", "left", "right" y las combinaciones "top right", "bottom left", etc... o con valores en pixels o percentajes, todavía en relación con el rincón superior a la izquierda de la pantalla. Ejemplos: [ background-position: top right; ] < la ímagen será "pegada" contra el rincón superior, a la derecha de la pantalla. [ background-position: 900px 100px; ] < el lado izquierdo de la ímagen será a 900px del lado izquierdo de la pantalla, y el lado superior será a 100px de la parte superior de la pagína Web.
  • background: para reunir todas estas propriedades en una sola línea. Ejemplo: [ background: white url(http://idata.over-blog.com/2/32/21/32/deco/36.jpg) fixed no-repeat 900px 100px; ]
• Los margenes
  • margin: para definir las valores de la margenes para alejar los elementos del blog los unos de los otros. Es también posible definir los margenes separadamente (con "margin-top", "margin-right", "margin-bottom" y "margin-left"), pero no es una sintaxis correcta. Es mejor definir las cuatro margenes en la propriedad "margin". Cuando la propriedad contiene cuatro valores, corresponden respectivamente a las margenes superior, derecha, inferior y izquierda; dos valores corresponden a las margenes superior y inferior, y derecha y izquierda. Margenes se expresan en pixels, percentajes o ems. Ejemplos: [ margin: 0 0 50px 10px; ] [ margin: 0 5%; ]
    Dos observaciones: después de un 0, no necesitas poner una unidad (px, em, %...). Pero la unidad es obligatorio después de toda otra valor.
    [ margin: auto; ] centrará el elemento, cual que sea la resolución de pantalla.

   Un menú se compone de dos partes. Una parte en html, y una en css.
   La parte en html es una lista, y se crea con el botón "Lista desordenada" del editor de Overblog :

• Uno
• Dos
• Tres
• Cuatro

    Ahora, un clic en el botón "html" (que se encontra en la "edición avanzada" del editor)... :

<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
</ul>

    <ul></ul> es la etiqueta que señala una lista. Y <li></li> es la etiqueta para cado elemento de esta lista. Es importante comprender como una lista está "construida" en html si quieres crear un menú despegable (lo que verremos una próxima vez).

    Volvemos en modo "normal" para insertar enlaces en cado elemento de la lista, con un clic en el bóton... "insertar un enlace".

• Uno
• Dos
• Tres
• Cuatro

    Y ahora, conoces cuatro de mis otros blogs
    El html esta ahora el siguiente :

<ul>
<li><a href="http://ladydomi.over-blog.com/" target="_blank">Uno</a></li>
<li><a href="http://la-route-des-sables.over-blog.com/" target="_blank">Dos</a></li>
<li><a href="http://coins-et-recoins.over-blog.com/" target="_blank">Tres</a></li>
<li><a href="http://trucs.en.vrac.over-blog.net/" target="_blank">Cuatro</a></li>
</ul>

    La etiqueta <a></a> señala un enlace. Y target="_blank" señala que el enlace se abrirá en una nueva pestaña.

    Ahora, tenemos que dar el menú un nombre. ¿ Porqué ? Cuando quieres llamar la atención de una persona en un grupo, llamas su nombre, ¿ no ? Es lo mismo : para que el trozo de css que vamos a poner funcione, el html del menú debe "llamarlo".
    Vamos a insertar el nombre del menú en la etiqueta <ul>, directamente en modo html :

<ul id="menu1">
<li><a href="http://ladydomi.over-blog.com/" target="_blank">Uno</a></li>
<li><a href="http://la-route-des-sables.over-blog.com/" target="_blank">Dos</a></li>
<li><a href="http://coins-et-recoins.over-blog.com/" target="_blank">Tres</a></li>
<li><a href="http://trucs.en.vrac.over-blog.net/" target="_blank">Cuatro</a></li>
</ul>

    No olvides los " " y no pongas espacios... dicho de otro modo, respeta la sintaxis del html. Cuanto al nombre del menú, no debe contener espacios o caracteres "extraños" (no ú, no ñ, no #... solo letras sin acentos, y números).

    Aquí son las cuatros lineas de css que son necesarias para personalizar el menú :

#menu1 {display:table; padding:0; margin:0px auto; list-style:none; white-space:nowrap;}
#menu1 li {display:table-cell; margin:0; padding:0;}
#menu1 li a {float:left; font-size:100%; height:290%; line-height:290%; letter-spacing:1px; margin: 0; padding:0px 15px; text-decoration:none; color:#CD3333; background-color:#000000; border: 2px solid #FFFFFF; }
#menu1 li a:hover { color:#000000; background-color: #CD3333;}

    Vés que el nombre de tu menú es en cada de las líneas del css. Te aconsejo dejar las dos primeras tal cual (a meno que sepas un poco de css), pero puedes personalizar las color y background-color de las líneas #menu1 li a (la aparencia de cado elemento) y #menu1 li a:hover (lo mismo, pero cuando el ratón pasa encima).

• Uno
• Dos
• Tres
• Cuatro

     Importante : si escogiste un tema con un css no modificable (Typograph, Technologic, Scrap'it, Ethnic, Season...), tendrás que poner el css de tu menú en el html, en una otra etiqueta : <style type="text/css">. Suponiendo que quiero utilizar esté menú tal cual, tendré que copiar y pegar esté codigo en modo html :