I am working on a local project at the minute, I am using some background CSS images the file route is
/Volumes/Macintosh HD/Users/William/Desktop/websites/webtest/images/plane.png
if i change the route to /webtest/images/plane.png will the person receiving see the images if I copy this whole project into a zipped up file with that route?
Sorry this is a NOOB question.
It also depends how your website is structured. Assuming that your project looks like this, the paths of your images should be relative to the folder:
website
webtest
images
plane.png
css
style.css
Your paths in style.css should look like:
.class {
background: url('../images/plane.png') 0 0 no-repeat;
}
No, the recieving person will probably have problems, I think.
It'll be better to use ./images/plane.png or only images/plane.png if the page is something like /Volumes/Macintosh HD/Users/William/Desktop/websites/webtest/index.php
because / will access the root of the current IP-address or domain. It also depends on the css files location if you're using one.
Hope it helps ;)
Related
I want to write some stylesheet and use some backgrounds in larger project, but I don't know path where the graphics will be in future in the project. So I want to only prepare it, and paths will be replaced then.
I don't want to move graphics or stylesheets. Project is on C: using xampp and graphics on D: Question is how can I import the graphics?
I tried something like
background: url("file://localhost/D:/brig/task/image.png");
background: url("file://D:/brig/task/image.png");
background: url("D://brig/task/image.png");
Can I use absolute path like this??
Firstly I suggest you to use a WYSIWYG editor like dreamweaver, visual studio or any for instance.
Then make a project folder with the name brig and put all the relevant directories, images, etc inside it relevantly. Then when you open your HTML or css in the editor, select your main project and then when you put the images inside your HTML or CSS via src or url respectively, it will automatically make it relative and fetch it from that place where you have originally stored in your project.
For instance,
background: url("../task/image.png");
This ../ means a relative path for one level up directories. So in future, when you put your graphic files on the same path, this will fetch the images via a relative path as mentioned.
Hope this helps.
Your css is able to get pictures as long the path is still working just by navigating with ../../../etc. It should work with other partitions on the server as good as normal url paths from web. If the partition is not on your server, just make a folder at your webroot. It's not advisable to outsorce too much of your website.
Users can't access your file system, so css doesn't work with it. If you want to use the graphics from you d: you need to move them to the c: in the folder of your site. It can be in a subfolder.
my problem i think is simply to do with my .css paths.
for example my file structure is as so:
(root folder) mysite:
-index.htm
-styles.css
within my index.htm code, i link to my style sheets with the following code:
/styles.css
Now, changing the pathway is not a solution, i need to keep it as above with the "/" to point it to the root first. As the webstie works perfectly online this way.
Is there anyway i can get the site to display my styles locally, some kind of setting?
I have messed for hours reading through the forums here, and playing with setting the root.
i just dont get why once i set the correct root it messes up the path to the style sheets. I am starting to think it is impossible to link a .css file with "/" in Aptana.
any help would be appreciated.
If you remove the / from "/styles.css" then index.html will load it correctly both locally and on your website.
You also might want to look into the html base tag:
http://www.w3schools.com/tags/tag_base.asp
This would allow your pages to always point to the css file that is live on the website.
You say that "changing the pathway is not a solution", please explain? A live example would be good too.
I'd like to create a div with a background image css:
#mydiv {
background-image:url('/public/images/foo.png');
background-repeat: repeat-x;
}
Now, I can't use routes in css, so as a result I have to use a relative path, or my app will break if installed at a non-root path.
Is there a way around this? Something like
background-image:url('#{publicFolder}/images/foo.png');
I did find this thread from a year ago that claims it's impossible. Is this still the case?
Edit: I know I can inline the css in the page, that's not really an acceptable solution, but rather a work around.
Since the play framework compiles all the files in /public, I used the following statement in the css to acces background images.
background: url("/assets/images/my-image-background.jpg");
It worked for me so far, not sure if it's a good practice though! Hope it can be of help.
Cheers.
The path always goes from your stylesheet. So why don't you use relative paths?
Example, your css is in /public/css/, so your path in your css file has to be ../images. That's it.
But maybe less.css has something similiar you're looking for.
The way around /is/ possible.
The problem is that CSS files are static, so Play! does not do anything on them - except serving them to the clients.
Just make your css files into views, write a generic controller that takes the filename as a parameter and they will be served as Play! Templates.
something in the lines of (beware: PSEUDOCODE!):
ROUTE:
get /css/{filename} Application.getCSS
CONTROLLER
class public void getCSS(filename)
{
renderTemplate(filename);
}
Then in your css you can use any groovy template feature you want.
The installation path is available as http.path in the conf
This will be very inefficient though, so you will have to add nginx or similar frontend to do some caching and set high expiration values for those files.
I'm not sure if it's worth doing it just to avoid relative paths!
I definitely think that the relative path is better suited generic deployment, and you are more likely to break things with this dynamic absolute approach.
A better overall deployment strategy
Anothe important point is that if you do like absolute URLs, there's no problem.
I actually do too.
But when I deploy my web applications (be them play!, django, pure wsgi, or whatever else) I always put a web frontend.
Usually nginx.
This means that your play framework will be an upstream server, and you can do everything you want with the URLs on your :80 port - and manage several services with subdomains or subfolders...
but when you access your play application on its own port(s) everything will be absolute.
Finally, if you were deploying Play! as a war I would have the feeling you have chosen the wrong framework or the wrong deployment pattern! But then your jboss or whatever other application webserver will do some magic on the subfolders...
take a look at conf/routes file.
in it you will find the following something like
# Map static resources from the /public folder to the /assets URL path
GET /assets/*file controllers.Assets.at(path="/public", file)
which means in order to access resources in the public folder,
you would use /assets in your url.
so in your css you do
url(/assets/images/myimage.png)
and it will work.
I have a style sheet where I include background images.
background: url(../Images/myImage.png);
problem is, pages from different directories use this css!
My CSS files are in a CSS folder, images in an Image folder, and my html pages are in many different folders depending on their content and meaning to the website.
All my pages inherit this css as it is the MAIN theme.
The path used in the above example is a relative path. And obviously, this path only works for some of the pages. ALL i need is to link the images in the css from the ROOT folder. Therefore every path is correct no matter where the file is in the folder structure!
I have tried:
~/Images/myImage.png
./Images/myImage.png
/Images/myImage.png
Images/myImages.png
I don't think a root folder selector exists... but I hope it does :/
/Images/myImage.png
this has to be in root of your domain/subdomain
http://website.to/Images/myImage.png
and it will work
However, I think it would work like this, too
images
yourimage.png
styles
style.css
style.css:
body{
background: url(../images/yourimage.png);
}
click here for good explaination!
All you need to know about relative file paths:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backward and starts there
Starting with "../../" moves two directories backward and starts there (and so on...)
To move forward, just start with the first subdirectory and keep moving forward
I use a relative path solution,
./../../../../../images/img.png
every ../ will take you one folder up towards the root. Hope this helps..
For example your directory is like this:
Desktop >
ProjectFolder >
index.html
css >
style.css
images >
img.png
You are at your style.css and you want to use img.png as a background-image, use this:
url("../images/img.png")
Works for me!
This problem that the "../" means step up (parent folder) link "../images/img.png" will not work because when you are using ajax like data passing to the web site from the server.
What you have to do is point the image location to root with "./" then the second folder (in this case the second folder is "images")
url("./images/img.png")
if you have folders like this
then you use url("./content/images/img.png"), remember your image will not visible in the editor window but when it passed to the browser using ajax it will display.
In the CSS all you have to do is put url(logical path to the image file)
I am reviewing a site and i see a lot of different conventions on reviewing how images are reference in CSS on a asp.net-mvc site.
including:
Full path:
.ddTitle span.arrow {
background: url('/content/images/dd_arrow.gif') no-repeat 0 0;
}
Relative location compared to where the css is located:
#cluetip-waitimage {
background-image: url(jQueryUI/images/ui-anim_basic_16x16.gif);
}
Relative with ".."
#cluetip-waitimage {
background-image: url(../../jQueryUI/images/ui-anim_basic_16x16.gif);
}
In asp.net-mvc, with routing, etc . .is one correct and the others wrong or is this just preference or convention? Assume that this site might sit on a shared environment with other sites.
Your first option is perfectly fine if your application is always going to be in the root folder for the website (or at least your images are all going to be in the root folder). If you might have a different path in different situations (like having a shared site on development or testing), then this doesn't work.
The second and third options are basically the same thing. Which one is used is completely dependent upon where the images are located in relation to the CSS file. I personally believe that the second looks cleaner, so I try to put any images referenced by my CSS files in a folder structure relative to where the CSS is located. However, some people prefer to keep all images in one place (even mixing content images with site "chrome" images) and as such may need to use relative pathing with ../ in order to accomplish this.
I generally do it like this ...
background-image: url('/jQuery/images/ui-anim_basic_16x16.gif');
The opening / denotes the root folder, so all of your paths can be relative to the root of the program instead of the folder the page is running from. This adds a little bit of typing, but it removes a lot of the problems of parent hashing.
So if your images were like this ...
Solution
Controllers
Content
JQuery
images
Your path would be background-image: url('/content/jquery/images/ui-anim_basic_16x16.gif');
Doing it this way removes most of the implications of any sort of pathing. Because ASP.NET as a language understands the concept of relative urls, this should work on pretty much any situation unless the server you are hosting it on has something very awkwardly configured - and in that case, standards and practices won't get you too far.
Root-Relative Urls also make your application much more modular, from my experience. There may be more experienced programmers on here that can refute this with a reason, but from everything I have built, making all of my image urls root-relative has allowed me to drop my program into any folder and run it without complication.
I had a similar question. Since MVC allows the use of ~/ (in razor views for example) to denote the application root, I wondered if this should be done for image paths in my CSS files.
Of course, since CSS files are not processed on the server side, this won't work. However I think the right way is to use relative paths. This should be fine because the path to the CSS file (in a layout for example) can use ~/ and then the path from the CSS file to the image will be fixed; and it doesn't matter where the application root is... or if the layout or the main view are in a different Area.