Imagenes encima de Pie de pagina o footer

[smash.imq]

Buenas, Me gustaría si pudiera ser que alguien me ayudara...

 

Estoy intentando hacer una cosa, es un poco dificil de explicar, asi que es mejor que lo explique con imagenes... 

 

a ver... he intentado añadir unas imágenes justo encima del footer, en un principio quiero que se vea así:

 

 

y he editado los archivos footer.tpl y global.css.

 

En el footer.tpl he añadido esto:

 

<div id="bloque-logos" class="show-for-large-up"> <div class="row"> <div class="large-3 columns"> <p>PAGO SEGURO</p> <ul class="small-block-grid-3"> <li><img src="http://www.protemania.com/themes/minimal_16_theme/img/footerlogos/paypal_logo.png" alt="Pago Seguro con Paypal"></li> <li><img src="http://www.protemania.com/themes/minimal_16_theme/img/footerlogos/visa_logo.png" alt="Pago Seguro con Visa"></li> <li><img src="http://www.protemania.com/themes/minimal_16_theme/img/footerlogos/mastercard_logo.png" alt="Pago Seguro con Mastercard"></li> </ul> </div> <div class="large-5 columns"> <p>TRANSPORTE</p> <ul class="small-block-grid-4"> <li><img src="http://www.protemania.com/themes/minimal_16_theme/img/footerlogos/nacex_logo.png" alt="Transporte rápido con Nacex"></li> <li><img src="http://www.protemania.com/themes/minimal_16_theme/img/footerlogos/mrw_logo.png" alt="Transporte rápido con MRW"></li> <li><img src="http://www.protemania.com/themes/minimal_16_theme/img/footerlogos/correos_logo.png" alt="Transporte rápido con Correos"></li> </ul> </div> <div class="large-4 columns"> <p>COMPRA SEGURA</p> <ul class="small-block-grid-5"> <li><a href="https://www.confianzaonline.es/empresas/protemania.htm" target="_blank"><img src="http://www.protemania.com/themes/minimal_16_theme/img/footerlogos/confianza_logo.png" alt="¡Somos comercio de confianza!"></a></li> </ul> </div> </div> </div>

 

y en el global.css he añadido esto:

 

#bloque-logos {

background-color:white;

padding:22px}

 

#bloque-logos {

font-size:14px;

color:#909090;

margin-left:15px;

margin-top:12px;

margin-bottom:5px}

 

#bloque-logos{

padding:0px !important}

 

lo unico que he conseguido es que se me vea así:

 

 

Que tengo que añadir (o quitar) para conseguir que se vea tal cual quiero?? 

 

Utilizo prestashop 1.6.0.5 y la web es www.protemania.com 

 

Si necesitas algún tipo de info mas pedirla, me urge un poco (BASTANTE)....

Edited May 28, 2015 by smash.imq (see edit history)

[smash.imq]

Nadie sabe como hacerlo? Me es bastante urgente!!

[arpablos]

Nadie sabe como hacerlo? Me es bastante urgente!!

 

Probaría a poner una tabla HTML de 3 columnas sin borde (ya sabes <table> <tr> <td>...) y luego la propiedad de las imágenes de ese div con un float:left;

#bloque-logos img {
  float: left;
}

Suerte!

[smash.imq]

Probaría a poner una tabla HTML de 3 columnas sin borde (ya sabes <table> <tr> <td>...) y luego la propiedad de las imágenes de ese div con un float:left;

#bloque-logos img {
  float: left;
}

Suerte!

Pues no tengo ni idea jajja, esto lo he ido "pescando de otras paginas que veia mas o menos, pero no tengo ni idea de codigo....

 

Me puedes explicar mas especificamente?

 

Gracias!!

[eleon]

Pues no tengo ni idea jajja, esto lo he ido "pescando de otras paginas que veia mas o menos, pero no tengo ni idea de codigo....

 

Me puedes explicar mas especificamente?

 

Gracias!!

 

Te está diciendo que en el archivo "global.css" añadas al final:

#bloque-logos img {
  float: left;
}

De esta manera las imágenes se colocarán una detrás de otra. Yo además añadiría en el footer, inmediatamente después de las imágenes:

<p class="clear"></p>

Y en el global.css:

#bloque-logos p.clear {
  clear: both;
}

Para que la estructura volviera a su cauce. Un cordial saludo.

[smash.imq]

Te está diciendo que en el archivo "global.css" añadas al final:

#bloque-logos img {
  float: left;
}

De esta manera las imágenes se colocarán una detrás de otra. Yo además añadiría en el footer, inmediatamente después de las imágenes:

<p class="clear"></p>

Y en el global.css:

#bloque-logos p.clear {
  clear: both;
}

Para que la estructura volviera a su cauce. Un cordial saludo.

 

Buenas, he puesto en practica todo lo que me habeis comentado, algo ha hecho, pero no como yo esperaba... es dificil de explicar, pongo una img así es mas sencillo que me entendais.

 

 

Ahora se ve así, como hago para que se alineen los textos a la misma altura??

 

Ahora mismo el global.css:

 

#bloque-logos {

background-color:white;

padding:22px}

 

#bloque-logos {

font-size:14px;

color:#909090;

margin-left:15px;

margin-top:12px;

margin-bottom:5px}

 

#bloque-logos{

padding:0px !important}

 

#bloque-logos img {

  float: left;

}

 

#bloque-logos p.clear {

  clear: both;

}

 

Gracias de nuevo!

Edited May 29, 2015 by smash.imq (see edit history)

[smash.imq]

aparte, me acabo de dar cuenta que, no se por que motivo, se sube hacia arriba cuando hay espacios mayores, explico a través de imagen:

 

 

Necesito que SIEMPRE este justo por encima del pie de pagina, no que se vaya moviendo, como lo hago?

 

Ayuda para el anterior y persistente problema?

[arpablos]

aparte, me acabo de dar cuenta que, no se por que motivo, se sube hacia arriba cuando hay espacios mayores, explico a través de imagen:

 

Sin título-1.jpg

 

Necesito que SIEMPRE este justo por encima del pie de pagina, no que se vaya moviendo, como lo hago?

 

Ayuda para el anterior y persistente problema?

 

No es preciso ser un experto de HTML y CSS para tocar un tema en Prestashop, pero si al menos tener unas nociones.

 

Se te sube hacia arriba porque ese código no lo tendrás en el footer seguramente, o lo tendrás posicionado en una zona que no corresponde.

 

Deberías crear una tabla HTML de 3 columnas con cada una de las secciones en una de ellas. Empieza por ahí y luego ya pasarías a centrar lo que te queda. Siento no haberte contestado antes, pero estaba trabajando.

 

Échale un vistazo a esto.

[smash.imq]

No es preciso ser un experto de HTML y CSS para tocar un tema en Prestashop, pero si al menos tener unas nociones.

 

Se te sube hacia arriba porque ese código no lo tendrás en el footer seguramente, o lo tendrás posicionado en una zona que no corresponde.

 

Deberías crear una tabla HTML de 3 columnas con cada una de las secciones en una de ellas. Empieza por ahí y luego ya pasarías a centrar lo que te queda. Siento no haberte contestado antes, pero estaba trabajando.

 

Échale un vistazo a esto.

 

Ya había pensado en hacerlo como una tabla, pero el problema es que, al verlo en el movil se descuadra MUCHO...

 

como se puede hacer para crear 3 tablas "responsive"? es decir, que cuando salga en el pc, se vean una detras de otra pero cuando abras desde el movil, se vea una encima de la otra?

 

es que no se explicarme muy bie... ya lo habreis notado jajaja

[eleon]

En tema de imágenes y tablas no hace ni tocar la parte responsive, basta con utilizar porcentajes en el CSS. Te pongo un ejemplo, si tienes 5 imágenes cada una debe ocupar como máximo la quinta parte del ancho:

#bloque-logos img {
  max-width: 20%;
}

Se adaptará al tamaño de la ventana del dispositivo desde el cual se está accediendo.

 

Ahora, si quieres que al abrirlo desde el móvil se vea una encima de la otra si hace falta programarlo de manera adaptativa:

@media only screen and (max-width: 1029px) { //Aquí pones el tamaño de la ventana a la cual quieres que afecte este estilo
	#bloque-logos img { max-width: 98%; } //Aquí la regla a aplicar para este tamaño
}

Un cordial saludo.

[smash.imq]

al final lo he solucionado como me dijo arpablos creando una tabla. al final el footer entero quedó así:

 

{if !$content_only}

 

<p class="clear"></p>

</div><!-- #center_column -->

<div id="bloque-logos" 

<html>

<body>

 

<table style="width:100%">

 

  <tr>

    <td>PAGO SEGURO</td>

    <td>TRANSPORTE</td>

    <td>COMPRA SEGURA</td>

</td>

  <tr>

    <td><img src="http://www.protemania.com/themes/minimal_16_theme/img/footerlogos/paypal_logo.png" alt="Pago Seguro con Paypal"><img src="http://www.protemania.com/themes/minimal_16_theme/img/footerlogos/visa_logo.png" alt="Pago Seguro con Visa"><img src="http://www.protemania.com/themes/minimal_16_theme/img/footerlogos/mastercard_logo.png" alt="Pago Seguro con Mastercard"></td>

    <td><img src="http://www.protemania.com/themes/minimal_16_theme/img/footerlogos/nacex_logo.png" alt="Transporte rápido con Nacex"><img src="http://www.protemania.com/themes/minimal_16_theme/img/footerlogos/mrw_logo.png" alt="Transporte rápido con MRW"><img src="http://www.protemania.com/themes/minimal_16_theme/img/footerlogos/correos_logo.png" alt="Transporte rápido con Correos"></td>

    <td><a href="https://www.confianzaonline.es/empresas/protemania.htm" target="_blank"><img src="http://www.protemania.com/themes/minimal_16_theme/img/footerlogos/confianza_logo.png" alt="¡Somos comercio de confianza!"></td>

  </tr>

</table>

 

</body>

</html>

</div>

{if isset($right_column_size) && !empty($right_column_size)}

<div id="right_column" class="col-xs-12 col-sm-{$right_column_size|intval} column">{$HOOK_RIGHT_COLUMN}</div>

{/if}

</div><!-- .row -->

</div><!-- #columns -->

</div><!-- .columns-container -->

<!-- Footer -->

<div class="footer-container">

<footer id="footer"  class="container">

<div class="row">{$HOOK_FOOTER}</div>

</footer>

</div><!-- #footer -->

</div><!-- #page -->

{/if}

{include file="$tpl_dir./global.tpl"}

</body>

</html>

 

Y el global quedó así:

 

 

#bloque-logos {

background-color:white;

padding:22px

}

 

#bloque-logos {

  font-size: 14px;

  color: #909090;

  margin-left: 0px;

  margin-top: 0px;

  margin-bottom: -25px;

  }

 

#bloque-logos{

padding:0px !important

}

 

#bloque-logos img {

  float: left;

}

 

#bloque-logos p.clear {

  clear: both;

}

 

Muchas gracias a todos por la ayuda prestada! dejo abierto el tema por si alguien quiere añadir algo o ve que se pueda mejorar. lo unico que no he conseguido es que se vean uno encima del otro en el movil, pero no me supone un problema, ya que tal cual se ve, no queda mal.

 

Gracias de nuevo a todos!

 

[arpablos]

 

al final lo he solucionado como me dijo arpablos creando una tabla. al final el footer entero quedó así:

 

Y el global quedó así:

 

 

Muchas gracias a todos por la ayuda prestada! dejo abierto el tema por si alguien quiere añadir algo o ve que se pueda mejorar. lo unico que no he conseguido es que se vean uno encima del otro en el movil, pero no me supone un problema, ya que tal cual se ve, no queda mal.

 

Gracias de nuevo a todos!

 

 

 

Me alegro de que te funcionase. Para el tema de la vista móvil tendría que crear una parte específica para responsive en el CSS con media queries. Busca por Google, no es demasiado complicado

[tiendatutorial]

Este video te puede servir