Solved

Relative addressing from CSS

Posted on 2011-02-23
5
285 Views
Last Modified: 2012-05-11
I know that style sheets reference images with respect to their own location. So in the figure below, the style declaration  has to go through ../../ to reach the image in _images.

It seems like there ought to be a way for the style sheet to make reference to the root directory of the site, so it could just say something like /_images/Upay-Logo3.jpg, but this doesn't seem to work.  Is there a way to reference the root directory from a style sheet?

Thanks
relative-paths.png
0
Comment
Question by:steva
  • 3
  • 2
5 Comments
 
LVL 11

Expert Comment

by:level9wizard
Comment Utility
You have to find out what is the document root for the web server - for example, if upay is your document root, then what you have above would work; however, if d:\Websites is your web root, then the path would be: /upay/_images/Upay-Logo3.jpg


'/' will take you to the root public_html/web folder, even though the actual server path might be something like /home/user/public_html/
0
 
LVL 11

Expert Comment

by:level9wizard
Comment Utility
PS - I wrote /upay/_images/Upay-Logo3.jpg, keep in mind on *nix systems this will be case sensitive so /Upay/_images/Upay-Logo3.jpg
0
 

Author Comment

by:steva
Comment Utility
"You have to find out what is the document root for the web server - for example, if upay is your document root, then what you have above would work."

I'm not following you.   What I have above is the relative ../../ and that always works.  What I want is a simpler method that refers to the root. For me, none of the below work

                                 /_images/...
                                 /upay/_images/...
                                 /d:/upay/_images/...

Keep in mind also that whatever I use for root has to work on my local system when I preview the page and also on the remote server after I upload the page.

0
 
LVL 11

Accepted Solution

by:
level9wizard earned 500 total points
Comment Utility
[steva]>>I'm not following you.

The web root will be different from server to server so you need to find out what yours is locally. There are many ways of doing this - if it's not obvious from your own server setup, you can print the web root thru a server side script. For example, in PHP you would do $_SERVER["DOCUMENT_ROOT"];


[steva]>>For me, none of the below work
                                 /_images/...
                                 /upay/_images/...
                                 /d:/upay/_images/...

/d:/upay is definitely wrong. Based on your screenshot above, I'm going to guess it's probably:
/websites/Upay/...
or
d:/websites/Upay/...


[steva]>> Keep in mind also that whatever I use for root has to work on my local system when I preview the page and also on the remote server after I upload the page.

That's going to be a matter of how your web-servers are configured, and with what root directory. For example, when I develop locally, my root path is "C:/wamp/www/" but on my live server it is /home/project/public_html/  (windows to linux). So if I wanted to move my files from local (having absolute paths) to live, I can expect things are going to break unless I make my remote server have the same webroot path.

This is why relative paths in these situations are more common, it allows us developers to move from development server to a live server seamlessly, without worrying about where that root directory is, but instead where each folder/asset is in relation to one another.
0
 

Author Closing Comment

by:steva
Comment Utility
Yes.  I was hoping that there was some symbol that would always go to the root,  whether the site came from the local or remote server.  But I guess not.  I'll just use relative addressing.

Thanks for the discussion.  I gave you the points.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

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... …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 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

15 Experts available now in Live!

Get 1:1 Help Now