Pulling CSS and JS from base folder - css

I have an index file that's store on my server under a public_html folder so it can be accessed publicly.
That address is http://example.com/randomlocation/anotherlocation/index.html
on the server that would look like public_html/randomlocation/anotherlocation/index.html
The problem however is that my css, js, and img files to display the page and run it are located on another level outside of the public html section and I'm having trouble specifying the relative or base path to get there, which would be something like:
home/site/folder/randomfolder/anotherfolder/location/styles.css
For Example:
<link rel="stylesheet" href="http://example.com/randomfolder/another folder/assets/css/emojione.min.css"/>
<link rel="stylesheet" href="/home/examplesite/folder/folder/folder/folder/assets/css/styles.css" />
Doesn't seem to work. I've tried all variations of "/" relative paths and can't figure out what I'm missing to be able to pull those files.

Generally when a server has a public_html folder, the server is configured so that only files inside that folder will be accessible publicly via the web. (This way, you can have things like server configs and private files outside of public_html and people won't be able to get to them by just putting the url in their browser.)
In other words, you should move your css/js/images into public_html. You can put them in subdirectories to stay organized, but they should all be under public_html somewhere.

That is purposely not allowed as it would pose a huge security problem on the server. Take a look at this SO question for a possible work around.
php link to image file outside default web directory

Related

ASP classic include files in parent directory with plesk on godaddy

I know that you need to enable parent paths in order to include files in a parent directory, however I have no way of enabling this property on godaddy's plesk hosting. Is there any way around this or do I just need to upload the include files into each and every directory on my site.
The idea of the include files was that I would have less that needed maintaining, and if I need to upload them into every folder then I certainly don't have less to maintain.
Thank you for the help.
You can include files that are "higher up" in the folder hierarchy, you just can't use the file="../../" syntax. Instead, use "virtual" instead of "file" and specify the full path relative to the site's root:
<!-- #include virtual="/path/to/includes/filename.inc" -->
This has the added advantage of always being the same path, regardless of where you're including it, so you can copy & paste to your heart's content.
Of course, this will require editing every page that has includes in it, but since you were going to do that anyway, I gather this is not an issue.
Here is the way to allow parent path in plesk shared hosting, for example: godaddy
Go to Virtual Directories
Find Directory Properties under Tools section, click on it
Tick Allow to use parent paths checkbox under Application settings section
Hope this helps.

external CSS sheet not loading to hosting

I'm having trouble making my CSS external stylesheet work in my actual hosting. It all works fine when I open the files from my Finder (I'm using a mac), but the stylesheet does not seem to load to my server properly. All other html files load fine and are visible when you visit my website in any browser,this is my website and the File Manager on my cPanel indicates that the CSS folder and external stylesheet file have been successfully uploaded for enough time that the style features should display. I tried clearing my browsing history and reopening my browser.
My link tag is and I have tried it using aswell as with just "css/socialpolarities.css". I've checked to make sure the spelling is right on the path and corresponds to the actual file.
Is the answer to just put all the style files in the public_html folder and then just change the path on all my html files? Or am I missing something?
I'm also using LiquidWeb if that means anything
The file css/socialpolarities.css seems to exist, but is void of content.
try looking at your local file to make sure it is indeed the one with the css code, then upload it to the same folder and override the original one.
You may have had an upload error.
I got it! The problem was actually that I needed to put the css file in the home directory, for some strange reason. My path from my html files definitely specified that the css files were in a css directory so I'm not sure if it's something I did wrong or whether the cPanel just sucks. Regardless, it works so I won't mess with it. Now time to copy all of my webfont files into my home directory...this is going to be messy lol.
Check your permission. They should be 755. You can search about permissions on internet. I changed the permissions and it worked fine.

How to handle stylesheet links when local and server directory structures don't match

The document root of my website is directly the server webroot (public_html), and not in a separate subdirectory. This creates a problem for me, because my local website is in a project folder (which is required by my editor, NetBeans), which means that href links to stylesheets need to be of the form:
/projectfolder/stylesheets/stylesheet.css
But on the server, since the website is directly in the webroot, the href url would have to be:
/stylesheets/stylesheet.css
When I asked my host about this, they said I would have to refactor my project to change all the stylesheet links. But I don't know; it seems kind of funny to have to refactor (then "unrefactor") the local website every time I want to upload it to the server. Any other solutions out there?
You don't have to use absolute paths to your stylesheets. Use relative paths instead. Then it won't matter where your files are hosted, so long as they stay in the same positions relative to each other.

IIS CustErr CSS Question

I'm trying to style the custom error pages in IIS7 with a linked CSS style sheet.
This works.
<html><head><title>404 - File or directory not found.</title>
<LINK href="http://stage.mysite.com/custErr/css/style.css" rel="stylesheet" type="text/css">
</head><body>Page Not Found</body></html>
I've created a virtual directory in mysite called custErr that contains the css and images needed.
But to make it easier to deploy I'd like to have it relative like this...
<html><head><title>404 - File or directory not found.</title>
<LINK href="../css/style.css" rel="stylesheet" type="text/css">
</head><body>Page Not Found</body></html>
After trying this I find that relative paths don't seem to work. In fact a style sheet in the c:\inetpub\custerr\en-US folder doesn't work either.
Where are these pages being served from?
Is there an easier way of doing this?
So I don't have to modify each and every absolute path for each environment?
I know this is a late reply but the reason why the relative paths don't work (I think) is because if you hosted a site such as www.myfavouritephotos.com and on visiting a directory on that site such as www.myfavouritephotos.com/images/ which is a directory in your website that doesn't have a default document like Default.aspx or whatever your site is set up as serving as a default page, IIS would return a HTTP Response of 404 for not finding a page to serve up or a 403 response because the user may not have the necessary rights to view the content of the directory under that url.
IIS by default would serve either the 404.htm or 403.htm file from within the c:\inetpub\custerr\en-US directory by default but when you replaced it with a custom htm file that replaces 404.htm, the relative path to the stylesheet you reference from that htm file would make a request at what the original url made to the server was so www.myfavouritephotos.com/images/(../css/style.css) which would result in an incorrect relative path so it may be able to be avoided by using a reference to a stylesheet with www.myfavouritephotos.com/css/style.css

How might i setup my ASP.NET project to find my files?

edit I do not want to redirect pages, specific files etc. I would like to change the path where images, videos and other media are stored from the root source directory to the directory of my choosing. In this case c:/dev/prjfiles/prjname/public (c:/dev/prjfiles/prjname/ is my working directory) and i except when my html does img src="/pic.png" it will find the image in c:/dev/prjfiles/prjname/publi/pic.png. I need a working solution, i tried looking at how to set virtual directories and etc. I cant figure it out. Thus the bounty. I am generating the html, i am not writing asp:image runat="server" etc i am pulling data from a DB and outputing the html. The part that is still a WIP is the code that handles POST request. The html already exist but i cant have hundreds of files in site.com/here pollution my source directory (c:/dev/trunk/thisprj/thisprj/where my .aspx files are and i do not wish 500 .png/gif/jpg here)
I dont know how asp.net environments are usually set up. I am assuming i have a root path that is not available from the web, a bin/ where i may put my asp.net dll and a public where i stick in any files i want.
I would like to have my project files seperated from everything else. My JS, css and image files are in prjfiles/prjname/public with my sqlite db in prjfiles/prjname/ and extra binaries in prjfiles/prjname/bin.
The problem comes when i run my app and try to load an image. Such as /cssimg/error.png. My project does not find resource in my /public folder and i have no idea how to make it find them. How can i set my project up so it does?
NOTE: I set the working directory path so its at prjfiles/prjname/. In code i write ./bin/extrabin.exe and db.sqlite3 which access the files properly.
You might want to watch the getting started videos for ASP.NET
http://www.asp.net/get-started/
EDIT: More info added
As #Murph suggests, your assumptions are incorrect.
IIS takes care of blocking HTTP access to any important files and folders like your *.aspx.cs, and *.cs in the App_Code, any DLLs, anything under the App_Data directory and the web.config.
Content files, such as *.html, *.css, *.js, .gif, .jpg, .png are all served in the normal manner.
In this way, there is no need for a "public" folder.
I dont know how asp.net environments are usually set up. I am assuming i have a root path that is not available from the web, a bin/ where i may put my asp.net dll and a public where i stick in any files i want.
This is wrong assumption!
You have a root folder, which IS available in public. You set IIS or ASP.NEt Development Server to this folder.
(optional, but always needed) You have a web.config file in this root folder for configuration
You have a bin folder for your assemblies (each page or user control "include" compiles to a class)
(optional) You have App_Data as default folder for file-based DBs and/or other data files (say XML storage, ..)
(optional) You have an App_theme folder for styling and images. Read about ASP.NET themes.
(optional) You can add App_Code folder if you want to add classes to be compiled by the server.
You can create folders for scripts, etc...
Normally for complex logic, etc.. you create in a separate project outside the root and reference the result assembly in the bin folder.
Seriously, you cannot do ASP.NET work without an IDE or a manual. Visual Web Developer 2008 Express IDE is free and http://asp.net has tons of resources for getting started.
I don't know if I got the question right, but maybe you could try the <BASE> HTML tag.
HTML <base> Tag
"Specify a default URL and a default target for all links on a page"
There's a nice and simple example at W3Schools, check it out.
The negative side is that you need to put a <BASE> tag in each page you want.
It sounds like you should be able to create a virtual directory to do what you're asking -- but it's a very non-standard setup.
Keep in mind that IIS will prevent users from downloading DLLs and other project-level files, so you usually don't need to partition them off in a separate layer.
For example, just have a cssimg folder at the top level of your project, and skip the whole public folder thing.
I see where you're coming from. ASP.NET projects are set up a little differently from how you're treating them, but you can make them work like you want.
The root of an ASP.NET project IS publicly accessible. When you created your WebSite within Visual Studio, it created a default.aspx page right on the root. Are you hosting in IIS? If so, it's set up to serve up default.aspx by default. But I digress.
Here's how to make it work like you want (mostly):
Create a WebSite, then right-click the site and add a folder named "prjfiles". Right-click that folder and make another named "public". Create another subfolder of that one called "cssimg".
Now, if you want to use the image you mentioned, you'd reference it like this: "~/prjfiles/public/cssimg/error.png" (pathing starting with the root) or "./cssimg/error.png" if you're coming from a page in the public folder (relative pathing).
Really, though, you're doing too much work. Here's how to make it work with less effort:
Create your WebSite, right-click the project and add a folder called "cssimg".
Treat the root as you would the "public" folder- put your pages right there on the root or in subfolders, as needed. You can reference that same image file like this now: "./cssimg/error.png" (relative) or "~/cssimg/error.png" (start from root)
There's also another way to tell the engine where to look for resources, but it's for your css files. Inside the "head" tag, you can add a "style" element (with type="text/css") and inside that you can add something like this: #import '<%= ResolveUrl("~/prjfiles/public/cssimg/styles.css") %>';
Good luck!
If I correctly understood your problem, you're trying to find files which aren't physically stored on a filesystem folder, or stay on a different folder. You can deal with this problems by implementing a UrlRewrite mechanism.
I suggest you to read URL Rewriting in ASP.NET and, after, to take a look into this implementation: A Complete URL Rewriting Solution for ASP.NET 2.0.
If I understand all this correctly (please comment with any correction) right now all your files are together in the root directory and you use <img src="/img.png" /> and it works.
If this is the case, make another directory in the directory the images are in, say call that directory images and put the image files there. now use <img src="/images/img.png" />.
Done.

Resources