Problema con imagenes en master page

miguelajh · #1 (**permalink**) 21/09/2011, 15:56

Salu2.

Salu2. Pues.. resulta que tengo un problema que me trae loco.
Tengo una Master Page, en donde tengo un componente tipo menu, la imagen de la empresa y un fondo.
Realmente es sencillo. Todo funciona. Excepto la imagen y el fondo.
Para que puedan entenderme, les explico la estructura de mi sitio:
En el Root, tengo la página de inicio y la Master Page y 2 carpetas, reportes e imgs.
En la carpeta llamada reportes es donde están las demás páginas que acceso.

En la imgs.. obvio, las imágenes.

Bueno, pues resulta que en la master page, tengo declarada la imagen de fondo de la siguiente manera:
<body style="background-image:url(~/../imgs/azul_black_sky2.png); background-repeat:repeat-x; background-color: #FFFFFF; margin:0px;height:100%;overflow: auto;" scroll="yes">

y el logo tipo, lo tengo de la siguiente manera:
<img src="~/../imgs/Logo_H_CHICO.png" />

Ahora, cuando acceso a la página principal, que se llama default.aspx ahi si veo la imagen de fondo y el logo Pero, si llamo a una de las páginas que está en la carpeta /reportes entonces no veo nada de imagen de fondo, ni de logo....

Según yo, con el ~/../ estoy forzando a que busque en el root y de ahi en la carpeta imgs...... alguien me puede explicar algo de esto o que estoy haciendo mal?....
gracias por su apoyo...

PDTA: estoy usando vs-2005 c#. (si, ya se que es algo viejo, pero es lo que hay aqui).

AWesker · #2 (**permalink**) 21/09/2011, 16:19

Saludos,
~/../ no funciona con la virgulilla (~), esta se utiliza para referencias ASP.

Sería:

Código HTML:

 
<body style="background-image:url('imgs/azul_black_sky2.png'); background-repeat:repeat-x; background-color: #FFFFFF; margin:0px;height:100%;overflow: auto;" scroll="yes">

y la otra parte:

Código HTML:

 
<img src="imgs/Logo_H_CHICO.png" />

Probalo y nos avisas.

miguelajh · #3 (**permalink**) 21/09/2011, 16:43

mm nop, resulta que nop, tampoco así funcionó.

OJO, recuerden que con lo que yo tenia, la página principal que está en el raiz, si trae las imagenes de fondo y el logo.
Sin embargo si voy a una que está en otra carpeta, ya no puede ver...
Si ven, cuando pongo
~/../
si me lo acepta y me deja ver la imagen.
Se supone que cuando cambio de nivel de carpeta.. de esa manera también le estoy diciendo que la imagen está en raiz .. se supone.

miguelajh · #4 (**permalink**) 22/09/2011, 09:51

Salu2.
He resuelto el problema del LOGO, "solo" ese.

Es el tema del url rebasing, es un tema que no conocía.
Ahora bien, he resuelto el tema de la imagen del logo, con lo siguiente:
<img id="imgLogo" src="~/imgs/Logo_H_CHICO.png" runat="server" />

Lo único que cambié, es
1.- Agregar el id
y
2.- agregar runat="server"

y ya con eso.

Ahora bien, tengo todavia que resolver el detalle de la imágen de fondo que tengo en la etiqueta del body declarado de la siguiente manera:

<body style="background-image:url(~/imgs/azul_black_sky2.png);

esa no funciona así... mmm.. no se ... he probado incluso así:

<body style="background-image:url('<%= BaseURL %>/imgs/azul_black_sky2.png')

sin embargo en la primera sintaxis, se ve en la primera pagina, cuando cambio a otra pagina que está en otra carpeta ya no se ve.

y con la segunda sintaxis.. no se ve.. ejeje.

miguelajh · #5 (**permalink**) 22/09/2011, 09:55

por cierto.. el render generado de cuando uso baseurl es:
<body style="background-image:url('<%= BaseURL %>/imgs/azul_black_sky2.png');
asi que no respeta el <%=.............

AWesker · #6 (**permalink**) 22/09/2011, 10:35

No le puse atención a la estructura que manejas. Como en estos momentos tengo suficiente tiempo libre, simulé tu proyecto y le hice unas modificaciones para que no tengas muchos problemas en cuanto a las referencias de los directorios.

Primero una imagen fehaciente:

Lo que hice fue esto:
Cree un nuevo directorio llamado Estilo. Dentro de este coloqué la carpeta de imágenes (imgs) y un archivo css (archivo de hoja de estilos)

En la master, agregué la referencia dentro de las viñetas de head:

Código:

 
<link href="~/Estilo/Estilos.css" rel="stylesheet" type="text/css" />

En el archivo css (llamado Estilos) agregué esto:

Código:

 
body
{
    background-image:url(imgs/azul_black_sky2.png); 
    background-repeat:repeat-x; 
    background-color: #FFFFFF; 
    margin:0px; height:100%;
    overflow: auto;
}
#LogoImg
{
   background-image:url('imgs/Logo_H_CHICO.png');
   background-repeat:no-repeat;
   background-color:White;
   height:75px;
   width:100%;
}

Y la master me quedó así:

Código:

 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<link href="~/Estilo/Estilos.css" rel="stylesheet" type="text/css" />
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body >
    <form id="form1" runat="server">
    <div>
        <div id="LogoImg" style="background-color:White;">
        </div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Si te fijas bien, en lugar de un control Image, usé un div. Esta es mi sugerencia.

Saludos...

miguelajh · #7 (**permalink**) 29/09/2011, 18:14

Salu2.

Pues primero que nada agradezco a todos por su ayuda.

Sin embargo quiero decirles que no pude solucionarlo de ninguna de estas formas.

Primero que nada quiero decirles que en partes funcionaba en parte no.

Así que lo que hice fué que cree una pagina maestra en el raiz.
Luego hice otra pagina maestra dentro de la carpeta donde tenia la mayoria de paginas de reporte, he hice que heredara de la página maestra del principio.
Y solo en la "heredada" agregué en el body de nuevo, la imagen.

Y pues así ya funcionó.

Espero que a alguien le pueda funcionar esto.

Gracias a todos!!!!.