Solved

MasterPage images not picked up by subfolder pages in ASP.Net application

Posted on 2008-06-09
16
1,629 Views
Last Modified: 2011-10-19
Greetings all

I have a master page (in root directory) that references a CSS file, in a subfolder, and an image (also in a subfolder), and is called by pages in various subfolders (see attached file for folder structure).

As my source (attached snippet) stands, the default page displays the image correctly, but all others display a blank.

Any thoughts?
SNIPPET 1:  MASTER SOURCE
 

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Scribble_Master_01.master.cs" Inherits="Scribble_Master_01" %>
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

    <title>Scribbler Master 01</title>

    

    <link rel="stylesheet" type="text/css" 

    href="CSS_Sheets/Scribble.css" />

    

</head>
 

<body id="MasterBody" runat="server">
 

<form id="form1" runat="server" style="height: 100%;">

     

<div id="container">

<!-- Container div - everything must be inside here. -->
 

	<div id="header">

		<!-- Header start -->

			 <h1>Scribblers</h1>

			 <img id="headerPic" src = "Graphics/Book02.jpg" />

          <center>

             <ul id='menu'>            

                <li ><a href='<%=ResolveUrl("Default.aspx")%>' id='menuHome' >Home</a></li>

                <li ><a href='<%=ResolveUrl("~/Pages_Story_Script/Stories.aspx")%>' id='menuStories' >Stories</a></li>

                <li ><a href='<%=ResolveUrl("~/Pages_Story_Script/Scripts.aspx")%>' id='menuScripts' >Scripts</a></li>

                <li ><a href='<%=ResolveUrl("~/Pages_Competition/Competitions.aspx")%>' id='menuCompetitions'  >Competitions</a></li>

                <li ><a href='<%=ResolveUrl("~/Pages_Member/Members.aspx")%>' id='menuMembers' >Members</a></li>

                <li ><a href='<%=ResolveUrl("~/Pages_General/Contact.aspx")%>' id='menuContacts' >Contact</a></li>

                <li ><a href='<%=ResolveUrl("~/Pages_General/Links.aspx")%>' id='menuLinks' >Links</a></li>       

                                      

             </ul>

          </center>

          

	<!-- Header end -->

	</div>

	<div id="body">

    <!-- Body start -->

	    <div id="dummy" style="position:relative; height: 135px"></div>

		

		

		<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">

        </asp:contentplaceholder>
 

        

        <!-- Give a little space -->

        <div style="height:10px"></div>

        

    <!-- Body end -->

	</div>

	

	<div id="footer">

		<!-- Footer start -->

		  <hr align="center" color="Black" width="75%" />

          <label class="smallerFontSize">Copyright Scribblers @ 2008</label>                          
 

		<!-- Footer end -->

	</div>
 

<!-- End of Container div. -->	

</div>    

   

</form>
 

</body>

</html>

Open in new window

FolderStruct.jpg
0
Comment
Question by:allanmark
  • 8
  • 5
  • 3
16 Comments
 
LVL 18

Assisted Solution

by:ChetOS82
ChetOS82 earned 75 total points
ID: 21745841
Since it is the web browser that resolves the image location, not the master page on the server, those images are being resolved from the sub folder.  The easiest way to fix this is to make the images relative to the root always (by putting a forward slash in front of the path).
0
 

Author Comment

by:allanmark
ID: 21745987
Did this:        <img id="headerPic" src = "/Graphics/Book02.jpg" />  -- result = no image on default page.
0
 
LVL 33

Accepted Solution

by:
raterus earned 175 total points
ID: 21746064
Try this,

    <link rel="stylesheet" type="text/css"
    href='<%= ResolveUrl("~/CSS_Sheets/Scribble.css") %>' />
0
 
LVL 18

Assisted Solution

by:ChetOS82
ChetOS82 earned 75 total points
ID: 21746072
Ok, I bet when you debug through VS the URL of the page is not http://localhost:1234/default.aspx, but rather http://localhost:1234/Scribbles/default.aspx.  If you were to go to the site outside VS, it would work.  You need to tell VS not to build your site in a subdirectory.  To do this, simply click on your website project in the Solution Explorer, "D:\\...\Scribbles\" in your image above.  Then press F4.  You should see a "Virtual Directory" option, just set it to a forward slash.
0
 

Author Comment

by:allanmark
ID: 21746207
raterus  -- tried it  -- seemed to loose all the background and image formatting.

ChetOS82: --  Changed (see attached VPath). Image now appears, but menu is split over 2 lines (see attached Menu).
VPath.jpg
0
 

Author Comment

by:allanmark
ID: 21746219
Ooops ... finger trouble! See attached menu dump.
Menu.jpg
0
 
LVL 18

Expert Comment

by:ChetOS82
ID: 21746236
Not really sure about this.  Perhaps check the css for relative urls.
0
 
LVL 33

Expert Comment

by:raterus
ID: 21746255
When you tried my suggestion, can you post the HTML output the browser sees?
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:allanmark
ID: 21746447
raterus  -- please snippet1

ChetOS82:  Checkjed it out (attached SNippet 2) -- couldn't see anything odd (that is, nothing jumped out as obviously wrong - at least, to me)
SNIPPET 1:
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="ctl00_Head1"><title>

	Scribblers Home Page

</title><link rel="stylesheet" type="text/css" href="&lt;%= ResolveUrl(&quot;~/CSS_Sheets/Scribble.css&quot;) %>" /></head>
 

<body id="ctl00_MasterBody" class="home">
 

<form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm" style="height: 100%;">

<div>

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMDUyNjYzMjgPZBYCZg9kFgICAw8WAh4FY2xhc3MFBGhvbWVkZI0TAl0iTWsqC24ml3kDIXvtON2k" />

</div>
 

     

<div id="container">
 

<!-- Container div - everything must be inside here. -->
 

	<div id="header">

		<!-- Header start -->

			 <h1>Scribblers</h1>

			 <img id="headerPic" src = "/Graphics/Book02.jpg" />

          <center>

             <ul id='menu'>            

                <li ><a href='/Default.aspx' id='menuHome' >Home</a></li>
 

                <li ><a href='/Pages_Story_Script/Stories.aspx' id='menuStories' >Stories</a></li>

                <li ><a href='/Pages_Story_Script/Scripts.aspx' id='menuScripts' >Scripts</a></li>

                <li ><a href='/Pages_Competition/Competitions.aspx' id='menuCompetitions'  >Competitions</a></li>

                <li ><a href='/Pages_Member/Members.aspx' id='menuMembers' >Members</a></li>

                <li ><a href='/Pages_General/Contact.aspx' id='menuContacts' >Contact</a></li>

                <li ><a href='/Pages_General/Links.aspx' id='menuLinks' >Links</a></li>       

                                      

             </ul>
 

          </center>

          

	<!-- Header end -->

	</div>

	<div id="body">

    <!-- Body start -->

	    <div id="dummy" style="position:relative; height: 135px"></div>

		

		

		

    
 
 

        

        <!-- Give a little space -->

        <div style="height:10px"></div>

        

    <!-- Body end -->
 

	</div>

	

	<div id="footer">

		<!-- Footer start -->

		  <hr align="center" color="Black" width="75%" />

          <label class="smallerFontSize">Copyright Scribblers @ 2008</label>                          
 

		<!-- Footer end -->

	</div>
 

<!-- End of Container div. -->	

</div>    

   
 

</form>
 

</body>

</html>
 
 
 

SNIPPET 2:
 

html

{

margin:0;

padding:0;

height:100%;

}
 

body

{    

margin:0;

padding :0;

height:100%;

background: url(../Graphics/paper.gif); 

font: Verdana, "Minion Web", Helvetica, sans-serif;     

}
 

.home

{

}
 

.stories

{

}
 

.scriptss

{

}
 

.competitions

{

}
 

.memberss

{

}
 

.contacts

{

}
 

.linkss

{

}
 

#container 

{

min-height:100%;

position:relative;

}
 

#header

{        

    padding: 0px;

    width:100%;

    height:125px;    

    background-image: url(../Graphics/blspeck.jpg);

    left: 0px;

    top: 0px;

    position:fixed;        

    color:White;

    text-align:center;

    z-index:9;

}
 

#header h1

{

	margin:0;

	padding:5px 0 0 10px;

}
 
 

#MasterBody {

padding:5px;

padding-bottom:35px;

}
 

#default 

{width: 60%; margin-left:auto; margin-right:auto; position: relative;

 padding:4px; border: 2px solid black; 

}
 

#footer {

position:absolute;

bottom:0;

width:100%;

height:35px;			/* Height of the footer */

}
 

.smallerFontSize

{

   font-size: smaller;  

}
 

.labels

{font: smallerFontSize;

 position: absolute;

}
 

.TextBoxes

{

    font: smallerFontSize;

    background-color: LightGrey;

}
 

#headerPic 

{

position: absolute; top: 28px; left: 900px;

height: 75px;

width: 95px;

border-width: 5px;    

} 
 

#content1 

{width: 60%; margin-left:auto; margin-right:auto; position:relative; top: 200px;

 border:2px solid black; padding:10px; 

}
 

ul#menu { top: -30px; width: 40%; height: 38px; background: #FFF url(../Graphics/menu-bg.gif) top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0;}

ul#menu li { display: block; float: left; margin: 0 0 0 5px; }

ul#menu li a { height: 38px; color: black; text-decoration: none; display: block; float: left; line-height: 200%; padding: 8px 15px 0; }

ul#menu li a:hover { color: red; background-color:Silver }

ul#menu li a.current{ color: Black; background: gray url(../Graphics/current-bg.gif) top left repeat-x; padding: 5px 15px 0; }
 

body.home a#menuHome,

body.stories a#menuStories,

body.scriptss a#menuScripts,

body.competitions a#menuCompetitions,

body.memberss a#menuMembers,

body.contacts a#menuContacts,

body.linkss a#menuLinks             

{

color: #fff;

background: #930;

}
 
 

SNIPPET 2
 

html

{

margin:0;

padding:0;

height:100%;

}
 

body

{    

margin:0;

padding :0;

height:100%;

background: url(Graphics/paper.gif); 

font: Verdana, "Minion Web", Helvetica, sans-serif;     

}
 

.home

{

}
 

.stories

{

}
 

.scriptss

{

}
 

.competitions

{

}
 

.memberss

{

}
 

.contacts

{

}
 

.linkss

{

}
 

#container 

{

min-height:100%;

position:relative;

}
 

#header

{        

    padding: 0px;

    width:100%;

    height:125px;    

    background-image: url(Graphics/blspeck.jpg);

    left: 0px;

    top: 0px;

    position:fixed;        

    color:White;

    text-align:center;

    z-index:9;

}
 

#header h1

{

	margin:0;

	padding:5px 0 0 10px;

}
 
 

#MasterBody {

padding:5px;

padding-bottom:35px;

}
 

#default 

{width: 60%; margin-left:auto; margin-right:auto; position: relative;

 padding:4px; border: 2px solid black; 

}
 

#footer {

position:absolute;

bottom:0;

width:100%;

height:35px;			/* Height of the footer */

}
 

.smallerFontSize

{

   font-size: smaller;  

}
 

.labels

{font: smallerFontSize;

 position: absolute;

}
 

.TextBoxes

{

    font: smallerFontSize;

    background-color: LightGrey;

}
 

#headerPic 

{

position: absolute; top: 28px; left: 900px;

height: 75px;

width: 95px;

border-width: 5px;    

} 
 

#content1 

{width: 60%; margin-left:auto; margin-right:auto; position:relative; top: 200px;

 border:2px solid black; padding:10px; 

}
 

ul#menu { top: -30px; width: 75%; height: 38px; background: #FFF url(Graphics/menu-bg.gif) top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0;}

ul#menu li { display: block; float: left; margin: 0 0 0 5px; }

ul#menu li a { height: 38px; color: black; text-decoration: none; display: block; float: left; line-height: 200%; padding: 8px 15px 0; }

ul#menu li a:hover { color: red; background-color:Silver }

ul#menu li a.current{ color: Black; background: gray url(Graphics/current-bg.gif) top left repeat-x; padding: 5px 15px 0; }
 

body.home a#menuHome,

body.stories a#menuStories,

body.scriptss a#menuScripts,

body.competitions a#menuCompetitions,

body.memberss a#menuMembers,

body.contacts a#menuContacts,

body.linkss a#menuLinks             

{

color: #fff;

background: #930;

}

Open in new window

0
 

Author Comment

by:allanmark
ID: 21746495
Sorry  ... SNippet 2 - wroiong posting  - the "../" were all changed to "/".
0
 
LVL 33

Expert Comment

by:raterus
ID: 21746536
allanmark,

can you post the code you used in your aspx page?,

In my sample I used a single-quote after the href= but you have a double quote here.  You need a single quote.

it should look like this

    <link rel="stylesheet" type="text/css" href='<%= ResolveUrl("~/CSS_Sheets/Scribble.css") %>' />

Believe me, if you can get this working it will work, because I use it all the time.
0
 

Author Comment

by:allanmark
ID: 21746758
Source attached. At the moment I am running with Virtual Dir set to "/" - changed from "/Scribble".



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="ctl00_Head1"><title>

	Scribblers Home Page

</title><link rel="stylesheet" type="text/css" href="CSS_Sheets/Scribble.css" /></head>
 

<body id="ctl00_MasterBody" class="home">
 

<form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm" style="height: 100%;">

<div>

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMDUyNjYzMjgPZBYCZg9kFgICAw8WAh4FY2xhc3MFBGhvbWVkZI0TAl0iTWsqC24ml3kDIXvtON2k" />

</div>
 

     

<div id="container">
 

<!-- Container div - everything must be inside here. -->
 

	<div id="header">

		<!-- Header start -->

			 <h1>Scribblers</h1>

			 <img id="headerPic" src = "/Graphics/Book02.jpg" />

          <center>

             <ul id='menu'>            

                <li ><a href='/Default.aspx' id='menuHome' >Home</a></li>
 

                <li ><a href='/Pages_Story_Script/Stories.aspx' id='menuStories' >Stories</a></li>

                <li ><a href='/Pages_Story_Script/Scripts.aspx' id='menuScripts' >Scripts</a></li>

                <li ><a href='/Pages_Competition/Competitions.aspx' id='menuCompetitions'  >Competitions</a></li>

                <li ><a href='/Pages_Member/Members.aspx' id='menuMembers' >Members</a></li>

                <li ><a href='/Pages_General/Contact.aspx' id='menuContacts' >Contact</a></li>

                <li ><a href='/Pages_General/Links.aspx' id='menuLinks' >Links</a></li>       

                                      

             </ul>
 

          </center>

          

	<!-- Header end -->

	</div>

	<div id="body">

    <!-- Body start -->

	    <div id="dummy" style="position:relative; height: 135px"></div>

		

		

		

    
 
 

        

        <!-- Give a little space -->

        <div style="height:10px"></div>

        

    <!-- Body end -->
 

	</div>

	

	<div id="footer">

		<!-- Footer start -->

		  <hr align="center" color="Black" width="75%" />

          <label class="smallerFontSize">Copyright Scribblers @ 2008</label>                          
 

		<!-- Footer end -->

	</div>
 

<!-- End of Container div. -->	

</div>    

   
 

</form>
 

</body>

</html>

Open in new window

0
 
LVL 33

Expert Comment

by:raterus
ID: 21746815
Why did you change the Virtual Dir?.  No matter, my suggestion should still work, have you tried it?  It should not render like the "view source" sample you sent me, so I really wanted to see your code of what you tried.
0
 

Author Comment

by:allanmark
ID: 21746927
Attached MPage source - hoep this siw aht you're looking for - I'm getting myself knotted. With the code like this, it appears not to be picking up the CSS file - no formatting.
SNIPPET 1:
 

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Scribble_Master_01.master.cs" Inherits="Scribble_Master_01" %>
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

    <title>Scribbler Master 01</title>

       

     <link rel="stylesheet" type="text/css"

    href='<%= ResolveUrl("~/CSS_Sheets/Scribble.css") %>' />
 

    

</head>
 

<body id="MasterBody" runat="server">
 

<form id="form1" runat="server" style="height: 100%;">

     

<div id="container">

<!-- Container div - everything must be inside here. -->
 

	<div id="header">

		<!-- Header start -->

			 <h1>Scribblers</h1>

			 <img id="headerPic" src = "Graphics/Book02.jpg" />

          <center>

             <ul id='menu'>            

                <li ><a href='<%=ResolveUrl("Default.aspx")%>' id='menuHome' >Home</a></li>

                <li ><a href='<%=ResolveUrl("~/Pages_Story_Script/Stories.aspx")%>' id='menuStories' >Stories</a></li>

                <li ><a href='<%=ResolveUrl("~/Pages_Story_Script/Scripts.aspx")%>' id='menuScripts' >Scripts</a></li>

                <li ><a href='<%=ResolveUrl("~/Pages_Competition/Competitions.aspx")%>' id='menuCompetitions'  >Competitions</a></li>

                <li ><a href='<%=ResolveUrl("~/Pages_Member/Members.aspx")%>' id='menuMembers' >Members</a></li>

                <li ><a href='<%=ResolveUrl("~/Pages_General/Contact.aspx")%>' id='menuContacts' >Contact</a></li>

                <li ><a href='<%=ResolveUrl("~/Pages_General/Links.aspx")%>' id='menuLinks' >Links</a></li>       

                                      

             </ul>

          </center>

          

	<!-- Header end -->

	</div>

	<div id="body">

    <!-- Body start -->

	    <div id="dummy" style="position:relative; height: 135px"></div>

		

		

		<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">

        </asp:contentplaceholder>
 

        

        <!-- Give a little space -->

        <div style="height:10px"></div>

        

    <!-- Body end -->

	</div>

	

	<div id="footer">

		<!-- Footer start -->

		  <hr align="center" color="Black" width="75%" />

          <label class="smallerFontSize">Copyright Scribblers @ 2008</label>                          
 

		<!-- Footer end -->

	</div>
 

<!-- End of Container div. -->	

</div>    

   

</form>
 

</body>

</html>

Open in new window

0
 
LVL 33

Assisted Solution

by:raterus
raterus earned 175 total points
ID: 21750563
Well if you just want to get it working, remove what you currently have in the <head> tag and add this to Page_Load of the MasterPage

        Me.Header.Controls.Add(New LiteralControl("<link rel='stylesheet' type='text/css' href='" & ResolveUrl("~/CSS_Sheets/Scribble.css") & "' />"))
0
 

Author Closing Comment

by:allanmark
ID: 31465519
Many thanks!!!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now