?
Solved

Relative addressing from CSS

Posted on 2011-02-23
5
Medium Priority
?
292 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 11

Expert Comment

by:level9wizard
ID: 34963388
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
ID: 34963440
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
ID: 34963782
"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 2000 total points
ID: 35030681
[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
ID: 35031942
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

770 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