Posicionamiento de bloques y elementos con CSS

Se define como una "capa" en CSS, a un elemento DIV que tiene posicionamiento CSS.
Los valores del atributo "position" son cinco: static, absolute, relative, fixed, e inherit.
Para ampliar esta información, en este enlace aquí tienes explicado detalladamente los diferentes valores que puede tener el atributo position en CSS.

Menú Pestañas Móviles

He descubierto esta mañana, navegando por la blogosfera, un perfecto tutorial, -código CSS y HTML incluído- de nuestro amigo y maestro "Oloman" en su blog "Oloblogger", en el que se explica la creación y diseño de una barra de menú con pestañas móviles.

A continuación dejó el enlace a este post/tutorial tan bueno, que es el siguiente: "Menú de Pestañas"; y también otro enlace al comentario que le hago a Oloman en la entrada de su post, que es el siguiente: "Comentario de Andybel en el post "Menú de Pestañas".

Sigo aprendiendo, y cada vez cojo algo más de velocidad en el proceso. Es gratificante y divertido.

Titular del Post: cambiar estilos

Para cambiar los estilos CSS del titular del post en la plantilla Mínima, hay que buscar en el código CSS la clase .post h3 o en la clase .post h3 a: hover y hacer lo siguiente:

Clase .post h3: Si queremos cambiar el color del titular del post, iremos a esta clase y simplemente cambiaremos el valor de la propiedad color con los consabidos valores #XXYYZZ.

Clase .post h3 a: hover: Si queremos añadir subrayado al titular del post cuando el ratón navegue sobre él, añadiremos la propiedad "text-decoration" y le daremos el valor "underline".
Si, además, también queremos cambiar el color del enlace cuando el ratón esté encima de éste; pues también deberemos cambiar el valor de la propiedad color como se dijo en el caso anterior.

En el aprendizaje de lo dicho en este post del Tester, tengo que reseñar que he tenido la siguiente anécdota:

Realizaba cambios en la plantilla y sin embargo no veía los efectos del cambio. Se debía a que NO GUARDABA CAMBIOS DE PLANTILLA y la vista previa no me ofrecía los cambios

Background fotográfico en plantilla Mínima

.-A LOS QUE SABÉIS: He de daros las gracias por vuestra inconmensurable ayuda a este pedazo de torpe que ha dado un paso después de intentarlo mil veces.

.-Gracias a vuestros comentarios he conseguido, eso sí poniendo yo algo de mi parte, colocar un fondo de background a mi gusto según una fotografía que tomé con mi propia cámara.

.-Después de utilizar la url que me aconsejáis -ELIMINANDO "-h" de la s1600"- he tenido que eliminar una parte de CSS que estaba por defecto y que impedía la carga de la foto en cuestión. Es éste:

.-Variable name="bgcolor" description="Page Background Color" type="color" default="#990000" value="#990000">/*color gris*/

.-Y después eliminar también la referencia background de la etiqueta body:$bgcolor;

.-A continuación he vuelto a definir el background con la url de la foto.

.-AHORA SURGE OTRO PROBLEMA: La fotografía está editada con el programa PAINT y el navegador la interpreta como un todo, es decir, incluyendo el trocito de fotografía al resto de la ventana en blanco; con lo cual, al colocarla como fondo de blog, hay grandes áreas blancas, no consiguiendo el efecto deseado.

.-¿Cómo editarla, la foto, para que sólo se tenga en cuenta el trocito que me interesa...?

.-Gracias de nuevo.

.-La respuesta la he obtenido yo mismo, poco después: Se va reduciendo la fotografía con los cursores del programa PAINT hasta que desaparezca la parte blanca de la foto y solamente nos quedemos con lo que nos interesa para el background.

.-P.D. Cómo dice Oloman, se aprende así muy lentamente; pero los conocimientos quedan fijados muy intensamente.

Quiero poner esta foto como fondo de página

Aquí sí que se ve la foto, la quiero poner como fondo de página en este mismo blog. ¿Qué parte del código de arriba debo usar y dónde lo debo colocar en el código CSS de esta plantilla Mínima de Blogger.

Gracias.

Ampliación de la amplitud del blog

Es ésta la primera práctica que hago de CSS y de HTML.
CSS significa Cascade Style Sheets u Hojas de Estilo en Cascada. El CSS de cualquier blog está entre las etiquetas "b:skin-apertura" y "/b:skin-de cierre". Se caracterizan por empezar por el símbolo #.
En cambio las líneas para modificar o añadir algún elemento están entre las etiquetas body-apertura y body-cierre de etiqueta.
En resumen, hemos modificado la plantilla Mínima de Blogger, haciendo lo siguiente:
1.-Hemos definido mejor el footer y hemos cambiado lo que sigue

#footer {
clear: both;
margin: 0 auto;
padding-top: 15px;
line-heigth: 1.6em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
width: 660px;
}

por esto otro, mejor definido en la estructura lógica del blog:

#footer-wrapper {
clear: both;
margin: o auto;
width: 660px;
}

#footer {
letter-spacing: .1em;
line-heigth: 1.6em;
padding-top: 15px;
text-align: center;
text-transform: uppercase;
}

Después, agregamos esto para que también quede definido el content-wrapper:

#content-wrapper {
position: relative;
width: 100%;
}

Y añadimos lo siguiente para que la navbar desaparezca:

#navbar {
display: none;
heigth: 0;
visibility: hidden;
}

Después de definir correctamente todo lo anterior, lo que queremos hacer es aumentar el contenido de los contenedores del blog, así:

#outer-wrapper {
width: 980px; /*cambiamos 660 por 980*/
}
#header-wrapper {
width: 980px; /*cambiamos 660 por 980*/
}
#footer-wrapper {
width: 980px; /*cambiamos 660 por 980*/
}

Ahora también debemos trasladar los 320 píxeles de más al contenedor de post y al de la sidebar:

#main-wrapper {
width: 560px; /*410+150=560*/
}
#sidebar-wrapper {
width: 390px; /*220+170=390*/
}

El resultado final que es el que ahora se puede ver en el blog Tester, es la misma estructura, pero aprovechando mejor el espacio en la ventana del monitor.

Bueno, para ser la primera práctica, no ha estado nada mal el resultado.

Creación del Andybel-Tester

Ante la creciente demanda por mi parte de adquirir conocimientos de CSS y HTML para poder literalmente "tunear" mis blogs de referencia, he decidio crear este "Andybel-Tester" como blog de pruebas y donde realizaré cambios de plantillas y las destriparé, para poder por fin aprender algo en esto de la personalización y optimización de los blogs.
Bueno, Tester, aquí te dejo empezando esta nueva etapa mía de bloguero que espero que me lleve a nuevos horizontes de conocimiento y también de satisfacción.