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.
Related
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 ;)
So I am trying to use s3 to upload all static images/css/js that I have. In one of my css file which is inside a css folder, I have the following:
background: url('../bundles/sitemain/img/bg-storefront.png') no-repeat center top;
and in my s3 bucket I already have the bundles folder:
With the file bg-storefront.png in the appropriate sub directory. However, is this even possible with amazon s3 such that it doesn't have the notion of what a folder is. So in this case do I have to use the absolute path of the image to make it work?
Using the relative path should work: when the browser interprets the parent directory .., it does it simply by how the URL looks. The browser/website visitor doesn't normally know anything about the actual file structure behind most web pages, and S3 is no different. If your CSS file is named css/style.css and you reference ../bundles/images/a.png, it only matters (to the browser) that the URL bundles/images/a.png exists: it doesn't matter whether a real filesystem or directory structure backs up those URLs.
I have a designer who makes the design for me and I want to start with CodeIgniter.
But the problem is to place the CSS and images file. I can put them in the root of the application but it is not supported in IDE (DW).
What I mean is the path is not working in DW to show CSS styling in live view and my designer can't make change without seeing styling.
I would also like to enable the intellisense feature on DW if possible.
Any help will be helful. Thanks.
You shouldn't rely on DW. The quickest thing you can do is to render him a HTML page which he can open and edit and DW, and then just copy the CSS changes to your CI project.
I always save CSS files in the root directory. That way, I can quickly access them using the shortest of paths inside CI's URL helper functions.
Such as...
echo site_url('css/style.css');
I am using sass/compass and want to take advantage of compass's sprite feature. The project I am on is in a long-standing application where the images are all scattered around in the images folder.
For example, let's say I have two pages, page-a.html and page-b.html which have the following images on each page:
page-a.html:
/images/foo/bar.png
/images/elvis-presley.png
page-b.html
/images/foo/bar.png
/images/people/david-hasselhoff.png
The compass spriting tutorial suggests that all the images must be in the same directory. Given the above scenario, that is not possible because /images/foo/bar.png is used for both pages (but not necessarily every page of the site). So, in this case I would either have to:
duplicate the images/foo/bar.png image and place a copy into a folder specific to each page or
symlink the image in each page specific folder to a shared location where the file actually sits
Neither of these options are desirable and would easily prevent me from continuing this sprite optimization attempt.
What I need to know is whether it is possible for compass to create a sprite from several images not in the same folder.
You can try
#import "images/**/*.png";
#each $file in bar, elvis-presley, david-hasselhoff {
.sprite.#{$file} {
#include flags-sprite($file);
}
}
if you want the images to change every time the page reloads, then that's impossible with pure css because sass is compiled and not evaluated on every request.
What you are asking is not possible.
Are you planning on replacing the images you mentioned with css sprites? If so, every page would reference the compiled sprite image. The individual image files would no longer be used for any page, so it wouldn't matter where they are in the file system.
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.