Solved

Relative addressing from CSS

Posted on 2011-02-23
5
290 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 500 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

Technology Partners: 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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

691 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