Problema con imágenes al editar un theme

Problema con imágenes al editar un theme

de Sebastian Montero -
Número de respuestas: 6

Estuve modificando un theme de moodle y agrege una serie de imagenes en el encabezado (headermain) de la pagina (parte superior donde está el título y el cuadro de selección de idioma etc). El problema es que cuando cambia el tamaño de la página, ya sea por un zoom o un simple minimizar, los logos en conjunto con la barra de selección de idiomas se me van para abajo del header. Lo mismo sucede si alguien se loguea con un nombre largo.

Lo que quiero lograr es que me mantenga todo en el headermain independientemente del tamaño de la página. De última que me habilite una barra de desplazamiento en el eje x (al menos para esta página).

Si alguien me puede hechar una mano con esto se lo agradecería.

Promedio de valoraciones: -
En respuesta a Sebastian Montero

Re: Problema con imágenes al editar un theme

de Sebastian Montero -

Ya puede solucionar el problema (en parte) con un método poco ortodoxo dada mi ignorancia en el tema. Simplemente fije el min-width en el "body" del layout.css, de la siguiente manera:

/* Core */

body {
    margin: 5px;
    min-width:1100px;     /*agregado por mi*/
}

 Si alguien sabe de una mejor solución se lo agradecería.

Promedio de valoraciones: -
En respuesta a Sebastian Montero

Re: Problema con imágenes al editar un theme

de Xavier Paz -
No es mala solución, ya que fuerzas a que el elemento body tenga una anchura mínima, pero eso no siempre se cumplirá. Una posibilidad es aumentar el tamaño del elemento headermain, otra sería reducir el tamaño de las imágenes y por último, podrías poner las imagenes como fondo del elemento headermain, como parte de una imagen larga, alineada hacia el lado que quieras.

¿Podrías poner una imagen de la cabecera para poder hacernos una idea de como queda y como debería quedar?
Promedio de valoraciones: -
En respuesta a Xavier Paz

Re: Problema con imágenes al editar un theme

de Sebastian Montero -

Hola Xavier gracias por contestar. Acá te envió una imagen de como queda el Header.

Cómo es eso que me decís acerca de poner las imagenes como fondo del elemento headermain, como parte de una imagen larga, alineada hacia el lado que quiero????.

Adjunto cabecera.jpg
Promedio de valoraciones: -
En respuesta a Sebastian Montero

Re: Problema con imágenes al editar un theme

de Xavier Paz -
El truco de la imagen de fondo es crear una imagen de, digamos 2000px de largo, con todos esos elementos que tienes en la cabecera incluidos dentro de la misma.

Después no tienes más que añadir la propiedad background al headermain, y especificar la imagen que quieres, en este caso la de 2000px, alineada hacia el lado donde se encuentra los elementos. Ejemplo:

headermain {
background:#000 url(pix/headermain_bg.png) top left no-repeat;
}
De esta manera, los elementos que antes ocupaban parte del headermain ahora están en el fondo y no estorban a la disposición del resto de elementos, como el menú de idioma y el logininfo

El que la imagen tenga una anchura tan grande es porque así, en caso de que el tamaño de la cabecera varíe, esta seguirá teniendo imagen de fondo.
Promedio de valoraciones:Útil (1)