Header fullwidth descuadra el foro al cambiar de resolución

Jue Dic 27, 2018 8:34 am

Link del foro: http://www.laboratoriovegapunk.com/
Descripción del problema: El logo del foro está construído para que sea fullwidth, pero tengo un problema: si bien en mi resolución, 1920x1080, se ve perfectamente; al intentar verla en la otra resolución habitual, 1366x768, el ancho del foro se agranda. No sé muy bien cómo arreglarlo, y los tutoriales que he encontrado no me han sido de demasiada ayuda. Igual por aquí, con la experiencia en foroactivo, podéis darme una solución exacta. Gracias. Header fullwidth descuadra el foro al cambiar de resolución 3114844438

Header fullwidth descuadra el foro al cambiar de resolución 3114844438

EDIT: ¡El logo ya está bien! Por si alguien quiere crearlo, lo que hice fue crear un nuevo div en el overall_header detrás del conteneur_minwidth_IE y listo. Ahora el problema perdura, pero con otra cosa: la navbar tiene unas dimensiones demasiado grandes. Header fullwidth descuadra el foro al cambiar de resolución 3806464160

Header fullwidth descuadra el foro al cambiar de resolución 3806464160

Vie Dic 28, 2018 8:45 am

Vale, creo que me auto-contesto pero para decir que pueden cerrar el hilo. Explico lo que hice para los interesados en hacerlo fullwidth.

Al igual que cree un nuevo div para el encabezado, cree otro div también en el overall_header que incluyese a ese encabezado y a los navlinks, tal que así:

Código:: <div id="personalheader"><div id="encabezado"></a></div> <ul class="linklist navlinks{NAVBAR_BORDERLESS}"> <li>{GENERATED_NAV_BAR}</li> </ul></div> <div class="conteneur_minwidth_IE">

El siguiente paso es darles forma con el css, para lo cual, quitando el resto de cosas que pude haber puesto yo en mi foro, llega para hacerlos fullwidth con utilizar porcentajes. Quedaría así:

En mi caso, tuve también que ponerle al encabezado un margin-top para que cubriese todo desde el inicio de la web. Tal vez os pase lo mismo.

Código:: #encabezado { width: 100%; margin-top: -10px; } ul.linklist.navlinks { width: 100%; }

Con los márgenes podéis jugar vosotros. Tal vez lo queráis más arriba o más abajo. También, si cambiais de orden los divs y ponéis los navlinks sobre el encabezado, lo tendréis encima de éste.

Cito a @Roshio para pedirle que cierre, y de paso preguntárle si vería a bien que subiese un tutorial explicando cómo se hace esto. No sé si es algo que podría interesar... ¡Saludos!

Vie Dic 28, 2018 7:20 pm

Hola Rafa! Perdona que apenas pude ver tu mensaje, y entre al foro pero parece que ya lo tenias solucionado.

Igual solo comentarte que a veces cuando trabajas con los width o height en % (porcentajes) estos siempre se van a mover y a cambiar dependiendo de la resolución de pantalla en que se abra el foro (cosa que no podemos nosotros como diseñadores controlar en cada usuario), tristemente en foroactivo es un poco dificil hacer un skin 100% responsivo, es decir, que se adapte a cualquier pantalla automaticamente sin generar problemas. Por lo que yo prefiero asignarle a la mayoria de los elementos medidas en pixeles para que sin importar la medida de la pantalla estos se mantengan iguales. Lo que si puedo poner el % son imagenes de fondo, como la que esta aquí en Dix. Es cosa de ir probando en que elementos si es posible usar esto y en cuales no, pero bueno, ahi te dejo mi consejo.

Header fullwidth descuadra el foro al cambiar de resolución 2531292851

Header fullwidth descuadra el foro al cambiar de resolución 2531292851

Header fullwidth descuadra el foro al cambiar de resolución 3728603767

PD. El skin te quedo hermoso, ¡muchas felicidades! Header fullwidth descuadra el foro al cambiar de resolución 2764

Vie Dic 28, 2018 9:51 pm

Roshio escribió:Hola Rafa! Perdona que apenas pude ver tu mensaje, y entre al foro pero parece que ya lo tenias solucionado.

Igual solo comentarte que a veces cuando trabajas con los width o height en % (porcentajes) estos siempre se van a mover y a cambiar dependiendo de la resolución de pantalla en que se abra el foro (cosa que no podemos nosotros como diseñadores controlar en cada usuario), tristemente en foroactivo es un poco dificil hacer un skin 100% responsivo, es decir, que se adapte a cualquier pantalla automaticamente sin generar problemas. Por lo que yo prefiero asignarle a la mayoria de los elementos medidas en pixeles para que sin importar la medida de la pantalla estos se mantengan iguales. Lo que si puedo poner el % son imagenes de fondo, como la que esta aquí en Dix. Es cosa de ir probando en que elementos si es posible usar esto y en cuales no, pero bueno, ahi te dejo mi consejo.

PD. El skin te quedo hermoso, ¡muchas felicidades!

La verdad es que ha sido todo un reto poner el logo fullwidth, y aún así solo me he atrevido a adaptarlo como he podido a las dos resoluciones más habituales en el mundo (1920 y 1366), y todo con modificaciones y cambios de resolución en mi pantalla todo el tiempo. ¡Pero estoy contento con el resultado!

Creo que me animaré en los próximos días a explicar el proceso por si alguien quiere tomar la idea.

Y muchas gracias por lo de la skin. Sin Dix habría sido imposible que aprendiese a hacer el 80% del contenido, ¡eternamente agradecido!

Próx

Bridgerton

Luz vs Oscuridad

Paraíso Personal

Amor y Amistad

Conejo de Pascua

Header fullwidth descuadra el foro al cambiar de resolución