For example I have site http://localhost/site
In IIS I set that 404 error causes redirection to default.aspx
If I type something like http://localhost/site/nodirectory , (there are no such folder) all works perfectly.
But if I only add slah at end http://localhost/site/nodirectory/, page can't display css and images.
Images and css are located in their own folder. I tried different paths: "gfx/logo.gif", "/gfx/logo.gif"
Does anyone have some ideas about that?
If your css and images are relative paths, say ResolveClientUrl("~/gfx/logo.gif") this renders to the client as src="gfx/logo.gif", which the browser with a slash thinks is /nodirectory/gfx/logo.gif instead of just /gfx/logo.gif.
To resolve this, don't use .ResolveClientUrl(), use .ResolveUrl(), this will make the src render src="/gfx/logo.gif" The beginning / makes it definitive, it's that path from the root of the domain.
You'll see this same hebavior if you're doing paths that start with ../ or gfx/ yourself...make them relative to the application base so there's no chance of confusion.
There are a couple of options...
1)
In your HTML page, make the path to CSS and scripts relative...
"/scripts/myscript.js"
Where the scripts folder is the first folder after the root folder
2)
You can add the base tag to your page, which means ALL page resources will be treated as relative to the root location you specify...
<base href="http://www.mysite.com">
More info about these two options.
If you can, option 1 is perhaps a bit cleaner. You know explicitly the resources that you are affecting. Using the base tag will affect ALL relative paths on your page. Images, Links, Scripts, CSS et al. The second option works best if you developed your 404 page assuming it would be in the root folder, but it could actually be referenced from any non-existent directory. You just put your root address in the base tag and it will all behave exactly as you expect.
With either option, the images can be relative to the location of your CSS file.
Related
I programmed a page (read index.php) including front end and back end operations,and in between i included a link -<link rel="stylesheet" href="style.css" type="text/css">, but there is no effect on the front end application whether I put this css file in the same directory of index.php or delete it. But when I remove the link from the programming page then the front end page is affected. So, how do I conclude this situation? Please anybody help me. I don't understand how the css file works when it is not in the directory where programming page lies.
Based on the information given it sounds like the file is being included from a cache.
Deleting the file on the server wouldn't affect the page render since there is a locally cached version of the file but deleting the link would prevent the browser from loading the cached version.
Sometimes when working on your localhost you have to put the entire path of the CSS file, not just it's normal location as you do when on a live website. Copy your entire path in the href on the link tag and see if it works.
Normally, if the file is in the same place as your index, you put the href the same way it is written in your example above. If your CSS file is in another folder, you would put ../style.css instead. Writing like that, will move up one folder.
I have a strange problem with paths, this one works (on Windows):
<div style="background:url('folder1/image.gif')...
But this one won't work (no image shows up):
<div style="background:url('/folder1/image.gif')...
Still this page says exactly the opposite (not the first but the second version should work): Background not working for a div
Anybody knowing what the reason might be?
The first url is relative to the folder in server what your HTML is used to render the page.
Example, if you get:
www.mywebsite.com/index.html
it will look into: (example 2)
www.mywebsite.com/folder1/image.gif
but if you are in another folder like:
www.mywebsite.com/subfolder/index.html
It will look in:
www.mywebsite.com/subfolder/folder1/image.gif
If you use a '/' in the beggin, the path isn't more relative, it always look in the root website, like exemple 2 no matter where your html is located.
Depends on where your image and html file are located.
'folder1/image.gif' will search for a folder1 that is located in the same path as your html file (relative path).
'/folder1/image.gif' will search for a folder1 starting from the base location of your server (absolute path).
The first is a relative path, the second is an absolute path
Relative paths show the file path from the calling context. So if your html file is /source/website/test.html, a relative path of css/test.css will point to a file in /source/website/css/test.css
Absolute paths show relate to the whole path, so /css/test.css tries to find a file at the location /css/test.css
Most modern browsers allow you to inspect elements on a web page. On chrome (or other modern browser) open the console and look for errors, if the image url is wrong, the console will indicate it as an error, moreover you will get the broken-image icon if you have specified the wrong url
I have put the master page in the main directory and content page in a different folder in the same directory. When I try to debug the page, it does not show me any error but the images on the master page are not visible. The content page works fine if it is in the directory itself without any folders. Can anyone let me know if I am missing something here.
You're referencing images in the master page using relative paths, relative to the location of the master page.
Since the actual page is in a different folder, those relative paths are incorrect.
Instead, you should use absolute paths, or call the ResolveUrl function to generate absolute paths from application-relative paths.
I've done my searching and the topics haven't been of help.
I'm trying to have the background image of my header repeat across the X axis of the header div.
When I make CSS with a long URL such as
background-image:url('http://site.com/images/logo.png'); everything works fine
When I try to shorten the CSS to something such as ~/images/ or even having the CSS and site file already in the root folder and using /images/ I get nothing
background-image:url('~/images/logo.png')
background-image:url('/images/logo.png')
This is possibly because you're not shortening your URLs appropriately.
Assuming an absolute path of:
url('www.example.com/images/imageName.png');
A root-relative URL would be:
url('/images/imageName.png');
And a relative path (assuming your CSS file is in www.example.com/css/cssStylesheet.css) would be:
url('../images/imageName.png'); /* parent directory, then the images directory */
The ~ prefixed url format is unknown to me, though I suspect it's an ASP, or .NET, form? Though I'm unable to advise on that.
Questions that might be of use to you:
How do I turn a relative URL into a full URL?
Using relative URL in CSS file, what location is it relative to?
Absolute urls, relative urls, and...?
A URL containing "~" is something that's specific to ASP.NET, it's processed server-side and transformed into a "proper" URL such as http://mysite/my_virtual_directory/images/logo.png. Web Browsers don't have any way to do this as they don't know to what "~" refers.
You need to ensure that the URLs you use in your CSS file are "understandable" by the browser, so either have them "fully qualified" (http://mysite/my_virtual_directory/images/logo.png) or starting from the "beginning" (/my_virtual_directory/images/logo.png).
These are the three ways in which the same image has been referenced to in my project in 2-3 different files:
url(<% =QDAAB.Constants.SiteURL %>images/Docs/Plan/myImage.jpg)
url(~/images/Docs/Plan/myImage.jpg);
url(../images/Docs/Plan/myImage.jpg);
I am a bit confused about this relative, absolute path thingy. How do I refer to this image in such a way that no matter in what folder the image is located it is always displayed and never lost. Which of the above three references ways is right to achieve what I want? Or is there another way too to refer to an image?
Hope the question is clear.
I am beginner to .NET and have just begun trying out stuff.
Also what exactly do the above code lines mean? Like, what's this Constants.URL? What are "~" and ".." doing?
Here's where the image is being used in one of the pages. When I changed it to "../.." the image got displayed, earlier it wasn't.
<td align="center" style="background-image: url(../../images/Docs/Plans/myImage.jpg);
None of these will 'magically' find your image no matter in what folder the image is located. You will always have to give it some part of the path to the image in your links to have that image rendered.
However, out of these three, I would recommend the second line url(~/images/Docs/Plan/myImage.jpg); as the best way to accomplish what you need to do.
The '~' in .NET is a special character for the framework that starts your path at the root of your site. It essentially says, no matter what directory the request came from within the site, go to the root and start your path from there.
The '../' is standard HTML syntax meaning go up one directory and then start looking for your path.
So for instance, let's say your site is located at www.domain.com. And here is your folder structure
Images
Docs
Plan
CSS
Admin
SomeFolder
SomeFolderSubFolder
Default.aspx (your default document when you get to your site)
Examples
If you are in default.aspx, then the hand-coded URL to your images would be (/Images/Docs/Plan/myImage.jpg) as you are at the root of your site at this point.
If you are in SomeFolder, then the hand-coded URL to your images would be (../Images/Docs/Plan/myImage.jpg) since you have to go up 1 directory to get to the root of your site where the Images directory is located.
If you are in SomeFolderSubFolder, then the hand-coded URL to your images would be (../../Images/Docs/Plan/myImage.jpg) - as you would need to go up 2 directories to get to root of your site where your images folder is.
Now, by using the url(~/images/Docs/Plan/myImage.jpg); method, you do not have to worry about knowing how many directories deep you are in your site, it will always start looking from the site root. Each one of those examples above replaced with this line of code will always render out the image correctly.
EDIT
Ok, so you are trying this with in-line styles. You might/should be able to do this:
<td align="center" style="background-image: url(<%= Server.MapPath("~/images/Docs/Plans/myImage.jpg") %>);></td>
Or, there is nothing wrong with using the ../ method, you just need to keep in mind where you are at in your folder structure. Lastly, if you were to declare this style in your stylesheet instead of inline, it doesn't matter where the images are at in relation to the page, just where they are at in relation to the stylesheet FYI.
<td align="center" class="tdWithImages"></td>
styles.css
#tdWithImages{background-image: url(../Images/Docs/Plan/myImage.jpg);}