Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Relative addressing from CSS

Posted on 2011-02-23
5
Medium Priority
?
294 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

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.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

610 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