AVISO IMPORTANTE

Si quieres un menú como este de los botones, pincha en el que tiene un interrogante. Te llevará a la página de donde saqué el código y si tienes algún problema o duda, su creador te ayudará a resolverlo.

Normas de obligado cumplimiento si me envias un mail pidiendo ayuda/consejo

1ª .- Adjunta SIEMPRE la dirección del blog en el que tengas el problema y procura escribir bien la dirección.

2ª .- Intenta explicar LO MAS CLARAMENTE POSIBLE tu problema.
No pagarás más por escribir más palabras.

3ª . - Si has de contestarme usa la opción RESPONDER.
No abras un nuevo hilo de mensajes.

4ª .- No me envies NUNCA la plantilla si no te la pido.

5ª .- No me envies NUNCA la contraseña.
NO PIENSO ENTRAR A MODIFICARTE NADA.

SI ME DEJAS LA PREGUNTA EN UN COMENTARIO
1º .- Si tienes más de un blog dime en cual está el problema.
2º .- Habilita el perfil para que pueda entrar a ver el blog.
3º .- Si el blog es privado tampoco podré verlo. Invítame.

Y por último: Si quieres que te conteste por mail, envíame la pregunta por mail, mi dirección está en la sidebar, en el botón de arriba que tiene un sobre y en casi todos mis blogs.

El triple footer (2ª parte) Otra manera de ponerlo.

domingo, 15 de junio de 2008

Hace tiempo hice esta entrada en la que explicaba un truco que había visto en El escaparate de Rosa, para poner 3 columnas al pie del blog. Copié y pegué el código tal como ella lo daba, y que yo había usado sin problemas para ponerlo aquí y en otro blog.

Hoy he querido colocar dos de esas columnas en la Galería de premios, para poner los premios que son más grandes que la medida de la sidebar y he colocado el código, eliminando el de la tercera para que solo quedaran dos.

Pero no quedaba bien.
El contenido de cada columna se integraba en el footer normal, ya que lo tengo tuneado para que tengan fondo y borde, tanto el contenedor como los elementos que contenga.

He ido haciendo pruebas con los códigos y finalmente he logrado mi objetivo.

El doble footer está encima del footer, mantiene las distancias necesarias y tiene las mismas propiedades que el footer. Puedes verlo en directo aquí.

Las modificaciones que he hecho son las siguientes (por si estás interesad@ en hacer algo parecido):

En primer lugar he modificado el código original del footer, que era así:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
</b:section>
</div>


y lo he dejado así:

<div id='footer-wrapper'>
<div id='footer-bottom'>
<b:section class='footer' id='col-bottom'
preferred='yes'>

</b:section>
</div></div>

Si te fijas, tan solo he añadido la 2ª línea, la identidad del footer normal, llamándolo footer-bottom, para diferenciarlo de los que iba a poner después y el /div de cierre.

A continuación he creado una nueva zona, encima de esta, en la que he colocado el código de las columnas, dos en este caso, y, a diferencia del código original para esta zona, que hay en la entrada que he mencionado, he quitado las definiciones de estilo.
La nueva zona ha quedado así:
<div id='footer-wrapper1'>
<div id='footer-columna-contenedor'>

<div id='footer2'>
<b:section class='footer' id='col1'
preferred='yes'>

</b:section></div>

<div id='footer3'>
<b:section class='footer' id='col2'
preferred='yes'>

</b:section></div>
</div></div>


La primera línea define el contenedor.
La segunda define la zona.
El primer grupo que le sigue define una de las columnas. Al decirle que pertenece a la clase del footer (section class) sé que las propiedades que tenga el footer en el CSS las tendrá también la columna. He mantenido las identidades que tenía en el código original, pero, como he dicho, eliminando las definiciones de estilo.
El segundo grupo define la otra columna.

Entonces en el CSS he modificado la definicion del footer añadiendo bottom a su nombre. (En su momento ya había modificado esta zona para que el footer se viera como yo quería).

#footer-bottom {
clear:both;
background:url(la direccion del fondo) repeat;
border: 10px ridge $borderColor;
margin-top: 10px;
padding-bottom: 10px;
padding-top:0px;
_padding-top:6px; /* IE Windows target */
}
#footer-bottom p {
line-height:1.5em;
font:$sidebarFont;
}


Luego he añadido las definiciones de la nueva zona así:

#footer-columna-contenedor{
clear:both;
}

(Con esto he logrado que, en los dos navegadores, las columnas ocupen su sitio)

Y las definiciones de cada columna:

#footer2 {
float:$startSide;
width: 500px;
background:url(dirección) repeat;
border: 10px ridge $borderColor;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 10px;
padding-top:10px;
_padding-top:6px; /* IE Windows target */
}
#footer2 p {
line-height:1.5em;
font: $sidebarFont;
}

#footer3 {
float:$endSide;
width: 500px;
background:url(dirección) repeat;
border: 10px ridge $borderColor;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 10px;
padding-top:10px;
_padding-top:6px; /* IE Windows target */
}
#footer3 p {
line-height:1.5em;
font: $sidebarFont;
}

Como puedes ver he copiado las del footer, ahora footer-bottom, en cada una de las dos columnas, añadiendo a cada una la medida, posición, y retocando, donde ha hecho falta, los padding o los margin para separarlas entre si y del resto.
Los elementos que contienen, ya tenían sus propias definiciones, que se las puse al hacer el blog, así:

.footer .widget {
background:url(la dirección del fondo del elemento);
border: 5px ridge $borderColor;
margin-top:6px;
margin-$endSide:15px;
margin-bottom:12px;
margin-$startSide:15px; padding: 4px;
text-align: center;
font: $sidebarFont;
}

De paso, le he añadido definiciones propias al título de los elementos así:


.footer h2 {
margin: 0 0 10px 0;
padding:5px;
color:$sidebarHeaderColor;
font: $footerFont;
text-align: center;
border: 2px outset $borderColor;
}

Y he creado una fuente para el título de los elementos, (el h2), ya que al ser más grandes que los de la sidebar, necesitaban una fuente mayor.
Para la fuente de los elementos había usado la de la sidebar para darle homogeneidad al conjunto, pues de origen el footer no la tiene definida.

Si quieres poner tres columnas, basta con añadir el código de la tercera.
En el HTML copiando el de la segunda, modificando los números que serían footer4 col3 y pegándolo debajo, antes de los dos /div seguidos de cierre de zona.
Luego copias las definiciones del CSS de la segunda y las pegas debajo cambiandole el número y, por supuesto el ancho de cada una.
ADVERTENCIA:
Las medidas que ves aquí, tanto los width (ancho) como las que hay en padding y margin, corresponden a las de mi blog, que mide 1100 píxels de ancho total.

Imprime esta entrada

2 comentarios. ¿Quieres añadir el tuyo?

  1. Princesa Caramelo ha dicho
  2. Hola Eulalia.

    Super tu blog felicidades.

    Dos cosas por fa:

    1.- Agregue la segunda sidebar gracias a ti y me quedo fantastica solo que en elementos de entrada la tercera sidebar se ve abajo de las entradas, aunque al ver el blog se vea todo bien, ¿como puedo arreglar eso?

    2.- En las tres columnas del footer los tiulos y texto son por default blancos y quiero cambiarlos a negro sin afectar la cabecera del blog. ¿Cómo lo hago?

    Auxilio.
    Utilizo pla plantilla Rounders 2
    Gracias de antemano
    mi blog es: carameloychocolate.blogspot.com

  3. Eulalia ha dicho
  4. Hola Princesa:
    Respondo:
    1.- No importa. Si el blog se ve bien, como veas el layout no es preocupante. En la mayoría de plantillas no tiene arreglo, al menos que yo sepa.

    2.- Tienes dos opciones; o añades una variable para el color del texto del footer o bien, en el código del triple footer, donde pone section class='footer' cambia este footer por sidebar y los elementos se verán igual que los de la sidebar.
    Saludos

google-site-verification: google6804ea8a89fbde9f.html
Plantilla creada por laeulalia basada en la harbor de blogger.