• ¡Bienvenido a XenFácil!

    Estás viendo el sitio como Invitado. Para poder participar en este sitio

    y obtendrás privilegios adicionales, acceso a otras áreas y mucho mas.

    ¡Es gratis!


    ¿Ya eres miembro? Inicia sesión

Ayuda Banner Responsive en Header

lms

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
En la plantilla llamada ad_bannerMio.css, pones
Insertar CODE, HTML o PHP: 
#bannerMio { max-width: 468px; max-height: 60px;float:right; }
.bannerMio { width: 468px; height: 60px; }

<xen:if is="@enableResponsive">
   @media(max-width: @maxResponsiveWideWidth) { #bannerMio { max-width:384;max-height:49px; }
#bannerMio img { max-width:384;max-height:49px; } }
   @media(max-width: @maxResponsiveMediumWidth) { #bannerMio { max-width:200px; }
#bannerMio img { max-width:200px; } }
   @media(max-width: @maxResponsiveNarrowWidth) { #bannerMio { max-width:115px; }
#bannerMio img { max-width:115px; } }
</xen:if>

Mira a ver.

Salud2
 
gariko

gariko

XenForoUser
Mensajes
95
Puntuación de reacciones
5
Puntos
8
Sitio web
www.sabiosdelpc.net
País
España
Versión de XenForo
Pues el banner se ha reducido mucho con respecto al logo, no se que decirte mi intención es que quedará todo en una misma línea para que la altura del header no ocupara tanto, pero que igual no se puede no lo sé.

Me gustaría que se viera así:

10-01-2014 11-59-53.jpg

Pero se vé así en la resolución de mi móvil de 4,7".

10-01-2014 12-00-11.jpg
 
lms

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Estoy viendo el modo de hacer que el logo se redimensione de forma proporcional al ancho.

Te comento en cuanto termine de hacer la comida y me pueda poner en esto.

Salud2
 
lms

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
En la plantilla llamada ad_bannerMio.css, pones
Insertar CODE, HTML o PHP: 
#bannerMio { max-width: 468px; max-height: 60px;float:right;vertical-align:middle; }
.bannerMio { width: 468px; height: 60px;vertical-align:middle; }
#bannerMio a.img { vertical-align:middle; }

<xen:if is="@enableResponsive">
   @media(max-width: @maxResponsiveWideWidth) { #bannerMio { max-width:384;max-height:49px;vertical-align:middle; }
#bannerMio a.img { max-width:384;max-height:49px;vertical-align:middle; } }
   @media(max-width: @maxResponsiveMediumWidth) { #bannerMio { max-width:175px;vertical-align:middle; }
#bannerMio a.img { max-width:175px;vertical-align:middle; } }
   @media(max-width: @maxResponsiveNarrowWidth) { #bannerMio { max-width:130px;vertical-align:middle; }
#bannerMio a.img { max-width:130px;vertical-align:middle; } }
</xen:if>

Mira a ver.

Salud2
 
gariko

gariko

XenForoUser
Mensajes
95
Puntuación de reacciones
5
Puntos
8
Sitio web
www.sabiosdelpc.net
País
España
Versión de XenForo
lms dijo:
En la plantilla llamada ad_bannerMio.css, pones
Insertar CODE, HTML o PHP: 
#bannerMio { max-width: 468px; max-height: 60px;float:right;vertical-align:middle; }
.bannerMio { width: 468px; height: 60px;vertical-align:middle; }
#bannerMio a.img { vertical-align:middle; }

<xen:if is="@enableResponsive">
   @media(max-width: @maxResponsiveWideWidth) { #bannerMio { max-width:384;max-height:49px;vertical-align:middle; }
#bannerMio a.img { max-width:384;max-height:49px;vertical-align:middle; } }
   @media(max-width: @maxResponsiveMediumWidth) { #bannerMio { max-width:175px;vertical-align:middle; }
#bannerMio a.img { max-width:175px;vertical-align:middle; } }
   @media(max-width: @maxResponsiveNarrowWidth) { #bannerMio { max-width:130px;vertical-align:middle; }
#bannerMio a.img { max-width:130px;vertical-align:middle; } }
</xen:if>

Mira a ver.

Salud2
Hacer clic para expandir...

Con este código el banner no se redimensiona. Eso sí queda a la misma altura pero no se ve bien, porque al no redimensionarse descuadra todo el foro.

Vuelvo a poner el de antes por si usuarios entran con algún dispositivo móvil, para que lo vean bien.
 
Última edición:
lms

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Insertar CODE, HTML o PHP: 
#bannerMio { max-width: 468px; max-height: 60px;float:right;vertical-align:middle; }
.bannerMio { width: 468px; height: 60px;vertical-align:middle; }
#bannerMio a img { vertical-align:middle; }

<xen:if is="@enableResponsive">
   @media(max-width: @maxResponsiveWideWidth) { #bannerMio { max-width:384px;max-height:49px;vertical-align:middle; }
#bannerMio img { max-width:384px;max-height:49px;vertical-align:middle; } }
   @media(max-width: @maxResponsiveMediumWidth) { #bannerMio { max-width:175px;vertical-align:middle; }
#bannerMio img { max-width:175px;vertical-align:middle; } }
   @media(max-width: @maxResponsiveNarrowWidth) { #bannerMio { max-width:130px;vertical-align:middle; }
#bannerMio img { max-width:130px;vertical-align:middle; } }
</xen:if>

¿Y ahora?

Salud2
 
Última edición:
lms

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Insertar CODE, HTML o PHP: 
#bannerMio { max-width: 468px; max-height: 60px;float:right;vertical-align:middle; }
.bannerMio { width: 468px; height: 60px;vertical-align:middle; }
#bannerMio a img { vertical-align:middle; }
<xen:set var="$anchoB">{xen:calc '468 / 100'}</xen:set>
<xen:set var="$altoB">{xen:calc '60 / 100'}</xen:set>

<xen:if is="@enableResponsive">
   @media(max-width: @maxResponsiveWideWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 80'}px;max-height:{xen:calc '{$altoB} * 80'}px;vertical-align:middle; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 80'}px;max-height:{xen:calc '{$altoB} * 80'}px;vertical-align:middle; } }
   @media(max-width: @maxResponsiveMediumWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 61'}px;vertical-align:middle; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 61'}px;vertical-align:middle; } }
   @media(max-width: @maxResponsiveNarrowWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 48'}px;vertical-align:middle; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 48'}px;vertical-align:middle; } }
   @media(max-width: 320px) { #bannerMio { max-width:{xen:calc '{$anchoB} * 32'}px;vertical-align:middle; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 32'}px;vertical-align:middle; } }
</xen:if>

¿Y ahora?

Salud2
 
gariko

gariko

XenForoUser
Mensajes
95
Puntuación de reacciones
5
Puntos
8
Sitio web
www.sabiosdelpc.net
País
España
Versión de XenForo
Así es como se ve ahora, con el complemento de logo Responsive actualizado y esta modificación del ad_bannermio.css. La verdad es que no queda bien del todo.

10-01-2014 23-07-29.jpg
 
lms

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Cierto. El problema es que tienes un logo muy ancho y un banner muy ancho. Cuando está en anchuras entre 0 y 320 se redimensiona al 32% de su tamaño.

¿Igual habría que hacerlo más pequeño? Aquí en xenfacil, ces que no ocurre ya que el logo es menor.

¿Me puedes decir qué dimensiones tienen tu logo y tu banner?

Salud2
 
gariko

gariko

XenForoUser
Mensajes
95
Puntuación de reacciones
5
Puntos
8
Sitio web
www.sabiosdelpc.net
País
España
Versión de XenForo
El logo es de 407 x 70 px y el banner 468 x 60 px

El banner es un tamaño estándar, el logo si tengo que cambiar el tamaño dime que medidas y lo intento.

Otra opción que se me ocurre es que el banner se oculte en dispositivos móviles, es decir que no se vea, no sé, son ideas.

La que quede mejor.
 
Última edición:
lms

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Insertar CODE, HTML o PHP: 
#bannerMio { max-width: 468px; max-height: 60px;float:right;vertical-align:middle; }
.bannerMio { width: 468px; height: 60px;vertical-align:middle; }
#bannerMio a img { vertical-align:middle; }
<xen:set var="$anchoB">{xen:calc '468 / 100'}</xen:set>
<xen:set var="$altoB">{xen:calc '60 / 100'}</xen:set>

<xen:if is="@enableResponsive">
  @media(max-width: @maxResponsiveWideWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 61'}px;max-height:{xen:calc '{$altoB} * 61'}px;vertical-align:middle; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 61'}px;max-height:{xen:calc '{$altoB} * 61'}px;vertical-align:middle; } }
  @media(max-width: @maxResponsiveMediumWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 48'}px;max-height:{xen:calc '{$altoB} * 48'}px;vertical-align:middle; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 48'}px;max-height:{xen:calc '{$altoB} * 48'}px;vertical-align:middle; } }
  @media(max-width: @maxResponsiveNarrowWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 38'}px;max-height:{xen:calc '{$altoB} * 38'}px;vertical-align:middle; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 38'}px;max-height:{xen:calc '{$altoB} * 38'}px;vertical-align:middle; } }
  @media(max-width: 320px) { #bannerMio { max-width:{xen:calc '{$anchoB} * 25'}px;max-height:{xen:calc '{$altoB} * 25'}px;vertical-align:middle; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 25'}px;max-height:{xen:calc '{$altoB} * 25'}px;vertical-align:middle; } }
</xen:if>

¿Y ahora?

Con lo puesto (y la actualización del responsive logo), tendrás un banner de 150px x 19px y un logo de 130px x 22.5px a una resolución de 321px hasta 480 px y de la mitad si la pantalla tiene de ancho menos de 320px:
  1. ancho de pantalla de 320px: logo 99px + banner 114px = ancho de 223px sobre máximo de 320px de ancho (69,69%)
  2. ancho de pantalla de 480px: logo 155px + banner 178px = ancho de 333px sobre máximo de 480px de ancho (69,38%)
  3. ancho de pantalla de 610px: logo 195px + banner 225px = ancho de 420px sobre máximo de 610px de ancho (68,85%)
  4. ancho de pantalla de 800px: logo 248px + banner 285px = ancho de 533px sobre máximo de 800px de ancho (66,63%)
  5. ancho de pantalla de 1280px: logo 407px + banner 468px = ancho de 875px sobre máximo de 1280px de ancho (68,36%)
Los porcentajes son muy parecidos.

Salud2
 
gariko

gariko

XenForoUser
Mensajes
95
Puntuación de reacciones
5
Puntos
8
Sitio web
www.sabiosdelpc.net
País
España
Versión de XenForo
lms dijo:
Rich (BB code): 
#bannerMio { max-width: 468px; max-height: 60px;float:right;vertical-align:middle; }
.bannerMio { width: 468px; height: 60px;vertical-align:middle; }
#bannerMio a img { vertical-align:middle; }
<xen:set var="$anchoB">{xen:calc '468 / 100'}</xen:set>
<xen:set var="$altoB">{xen:calc '60 / 100'}</xen:set>

<xen:if is="@enableResponsive">
   @media(max-width: @maxResponsiveWideWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 61'}px;max-height:{xen:calc '{$altoB} * 61'}px;vertical-align:middle; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 61'}px;max-height:{xen:calc '{$altoB} * 61'}px;vertical-align:middle; } }
   @media(max-width: @maxResponsiveMediumWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 48'}px;vertical-align:middle; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 48'}px;vertical-align:middle; } }
   @media(max-width: @maxResponsiveNarrowWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 38'}px;vertical-align:middle; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 38'}px;vertical-align:middle; } }
   @media(max-width: 320px) { #bannerMio { max-width:{xen:calc '{$anchoB} * 25'}px;vertical-align:middle; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 25'}px;vertical-align:middle; } }
</xen:if>

¿Y ahora?

Salud2
Hacer clic para expandir...

Al guardar este código da error en la línea 16 pero no se por qué, no veo ningún error.

Me he fijado o creo que sólo has cambiado los números de las redimensiones, lo he hecho yo en la plantilla de antes y junto con el complemento de logo, la verdad que ahora ya se ve mucho mejor, creo que se puede dar ya por bueno.

Dime el código corregido que no dé error, no sea que se me haya colado algo a mí al cambiarlo directamente en la plantilla.
 
Última edición por un moderador:
lms

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Cierto, da error, pero no veo donde faltaba una comilla de cierre. He puesto esto (que lo admite sin errores):
Insertar CODE, HTML o PHP: 
#bannerMio { max-width: 468px; max-height: 60px;float:right;vertical-align:middle; }
.bannerMio { width: 468px; height: 60px;vertical-align:middle; }
#bannerMio a img { vertical-align:middle; }
<xen:set var="$anchoB">{xen:calc '468 / 100'}</xen:set>
<xen:set var="$altoB">{xen:calc '60 / 100'}</xen:set>

<xen:if is="@enableResponsive">
  @media(max-width: @maxResponsiveWideWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 61'}px;max-height:{xen:calc '{$altoB} * 61'}px;vertical-align:middle; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 61'}px;max-height:{xen:calc '{$altoB} * 61'}px;vertical-align:middle; } }
  @media(max-width: @maxResponsiveMediumWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 48'}px;max-height:{xen:calc '{$altoB} * 48'}px;vertical-align:middle; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 48'}px;max-height:{xen:calc '{$altoB} * 48'}px;vertical-align:middle; } }
  @media(max-width: @maxResponsiveNarrowWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 38'}px;max-height:{xen:calc '{$altoB} * 38'}px;vertical-align:middle; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 38'}px;max-height:{xen:calc '{$altoB} * 38'}px;vertical-align:middle; } }
  @media(max-width: 320px) { #bannerMio { max-width:{xen:calc '{$anchoB} * 25'}px;max-height:{xen:calc '{$altoB} * 25'}px;vertical-align:middle; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 25'}px;max-height:{xen:calc '{$altoB} * 25'}px;vertical-align:middle; } }
</xen:if>
En el mensaje de arriba he cambiado el código por este de aquí y que no da error.

Salud2
 
gariko

gariko

XenForoUser
Mensajes
95
Puntuación de reacciones
5
Puntos
8
Sitio web
www.sabiosdelpc.net
País
España
Versión de XenForo
Ya se ve bastante bien, aunque no sé por qué no se ve todo en una misma línea y con eso bajaría la altura del header, imagino que no será nada sencillo que se ajuste en todas sus posibilidades.

11-01-2014 12-25-53.jpg
 
lms

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Prueba con esto:
Insertar CODE, HTML o PHP: 
#bannerMio { max-width: 468px; max-height: 60px;float:right;vertical-align:middle;line-height:60px; }
.bannerMio { width: 468px; height: 60px;vertical-align:middle; }
#bannerMio a img { vertical-align:middle; }
<xen:set var="$anchoB">{xen:calc '468 / 100'}</xen:set>
<xen:set var="$altoB">{xen:calc '60 / 100'}</xen:set>

<xen:if is="@enableResponsive">
  @media(max-width: @maxResponsiveWideWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 61'}px;max-height:{xen:calc '{$altoB} * 61'}px;vertical-align:middle;line-height:{xen:calc '{$altoB} * 61'}px; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 61'}px;max-height:{xen:calc '{$altoB} * 61'}px;vertical-align:middle; } }
  @media(max-width: @maxResponsiveMediumWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 48'}px;max-height:{xen:calc '{$altoB} * 48'}px;vertical-align:middle;line-height:{xen:calc '{$altoB} * 48'}px; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 48'}px;max-height:{xen:calc '{$altoB} * 48'}px;vertical-align:middle; } }
  @media(max-width: @maxResponsiveNarrowWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 38'}px;max-height:{xen:calc '{$altoB} * 38'}px;vertical-align:middle;line-height:{xen:calc '{$altoB} * 38'}px; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 38'}px;max-height:{xen:calc '{$altoB} * 38'}px;vertical-align:middle; } }
  @media(max-width: 320px) { #bannerMio { max-width:{xen:calc '{$anchoB} * 25'}px;max-height:{xen:calc '{$altoB} * 25'}px;vertical-align:middle;line-height:{xen:calc '{$altoB} * 25'}px; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 25'}px;max-height:{xen:calc '{$altoB} * 25'}px;vertical-align:middle; } }
</xen:if>

Salud2
 
lms

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Prueba con esto:
Insertar CODE, HTML o PHP: 
#bannerMio { max-width: 468px; max-height: 60px;float:right;vertical-align:middle;margin-top:5px; }
.bannerMio { width: 468px; height: 60px;vertical-align:middle; }
#bannerMio img { vertical-align:middle; }
<xen:set var="$anchoB">{xen:calc '468 / 100'}</xen:set>
<xen:set var="$altoB">{xen:calc '60 / 100'}</xen:set>

<xen:if is="@enableResponsive">
  @media(max-width: @maxResponsiveWideWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 61'}px;max-height:{xen:calc '{$altoB} * 61'}px; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 61'}px;max-height:{xen:calc '{$altoB} * 61'}px; } }
  @media(max-width: @maxResponsiveMediumWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 48'}px;max-height:{xen:calc '{$altoB} * 48'}px; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 48'}px;max-height:{xen:calc '{$altoB} * 48'}px; } }
  @media(max-width: @maxResponsiveNarrowWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 38'}px;max-height:{xen:calc '{$altoB} * 38'}px; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 38'}px;max-height:{xen:calc '{$altoB} * 38'}px;vertical-align:middle; } }
  @media(max-width: 320px) { #bannerMio { max-width:{xen:calc '{$anchoB} * 25'}px;max-height:{xen:calc '{$altoB} * 25'}px; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 25'}px;max-height:{xen:calc '{$altoB} * 25'}px;vertical-align:middle; } }
</xen:if>

Salud2
 
lms

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
He incluido el banner en el complemento. Se configura en opciones. Mira a ver así.

5.png

Salud2
 
Última edición:
gariko

gariko

XenForoUser
Mensajes
95
Puntuación de reacciones
5
Puntos
8
Sitio web
www.sabiosdelpc.net
País
España
Versión de XenForo
Bien se ve mas o menos o igual que la ultima vez que te comente, lo dejamos así que tampoco te quiero volver loco, ya se ve bastante bien, me quedo con el complemento para banners en formato de imagen y las plantillas para cuando sea en flash.

Porque si el banner fuese en flash se vería no ?, porque ahora que pienso igual no se vería bien, ya la estamos liando.

Muchas gracias.
 
Hay que estar conectado o registrado para responder aquí.
Arriba