Just curious as to why this is not working:
HTML:
CSS:
But when I launch it in chrome, the HTML doesn't seem to be affected by the CSS. The text is black and hasn't been changed. Anyone Know how to fix?
They're in different directories:
C:\....\HTML FILES\firstHTMLfiles.html
C:\....\SCSS and CSS\firstCSSTest.css
your <link> tag is writen to assume that the .css file is in the SAME directory as the .html file.
Try
<link ... href="../SCSS and CSS/firstCSSTest.css" />
instead.
And generally speaking, PICTURES of "broken" code are useless here, since it forces us to re-type any relevant bits. But in this case, the code itself would have been useless, since your directory information wouldn't have been included. But next time... actual code please, not PICTURES of code.
The title bars of the two windows show that the HTML and CSS files are in different directories, but the URL to the stylesheet in the HTML is a relative URL to a file in the same directory.
Either change the URL to point to the right directory or move the CSS file.
the html and css must be (with your code) in the same folder
Related
I simply want to give my html a CSS background image.
I tried setting it to this:
html {background-image: url('/assets/background.jpg')}
which worked on development, but then when assets are compiled into the Public folder, it's no longer the correct path. This:
html {background-image: url('background.jpg')}
doesn't even work on development.
I'm pretty confused because nobody seems to have had this same problem, but it seems like it should be a pretty common one.
Any light shed would be much appreciated.
if your folder structure is like
/css
/js
/img
In most cases css and images will be in their separate folders so you need to go back one step by using ../ It means it will go back one folder so the correct CSS property would be,
html {background-image: url('../img/background.jpg')}
This will work in all situation and servers unless you chnage the folder structure.
And if your css and images both are in same folder you can just write
html {background-image: url('background.jpg')}
for more information see this thread : How to go up a level in the src path of a URL in HTML?
CSS- tricks blog - Quick Reminder About File Paths
This is such a dumb issue, but here we go anyway. Here is my basic structure
/Content/twitter/bootstrap.css
/img/glyphicons-halflings.png
So Content and img are both in my root directory, so to referent the glyph image from my bootstrap.css file I have it like this:
background-image: url("../../img/glyphicons-halflings.png");
Y U NO SHOW?
Is there a .js file I need to check to make sure it is looking in the right directory??
oh and here is a snippet of where I am trying to get the image to render:
<td>
#if (item.Something == true)
{
<i class="icon-ok"></i>
}
else
{
<i class="icon-remove"></i>
}
</td>
UPDATE
There's been a lot of views of this question, so I thought I would share my two cents on it. One note, since posting the question BS 3.0 is now out, so it is possible the structure is different and/or irrelevant, have not looked at it yet. But if you got here, keep in mind this is pre-3.0 Bootstrap.
One thing I have started doing that makes it so I do not really have to mess with anything is bring the entire bootstrap folder into the project, rather than just the css/js/img folders. I typically put it in my root scripts folders with a structure like this:
/scripts
/libs
/boostrap <-- the unzipped folder you get when downloading
/js
/css
/img
This may break some conventions since a 'scripts' folder should really just hold scripts. I justify it since I use the scripts folder for scripts (surprise!) and third party libraries (thus the libs folder). Most third party components you get have at least js and css files with them, and I just got too lazy to can them manually separated since some libraries (like bootstrap) rely on where the other files are.
Anyway, my two cents, take a look at the answers below if you want to alter the file locations. All great tips, thanks SO folks!
Your current code should technically work and there is no need of any js file..
background-image: url("../../img/glyphicons-halflings.png"); is perfectly fine for a directory structure like
/Content/twitter/bootstrap.css
/img/glyphicons-halflings.png
You may try this code below to ensure that things are fine..
<td><i class="icon-ok"></i></td>
If this also fails then double check that glyphicons-halflings.png exists at your said path alongwith sufficient privileges..
try this
background-image: url("/img/glyphicons-halflings.png");
I changed the path from a relative path to an absolute path. By adding the slash at the beginning of the path, it starts from the root of your site.
Let me know if that works for you.
I encountered this same issue and it is not related to the source or location of your glyphicons. This is a race issue. I unfortunately cannot tell you the reason why it behaves like this in tables... but I know in my dataTables this was occuring and my way around it was to add the glyphicons after the page and tables load by appending html. It's not perfect but it works.
This may be an old post but I hope it helps someone else looking for an answer to this problem.
The file I downloaded contains an underscore but the CSS is looking for a file with a dash between glyphicons and halflings. Change one or the other and make sure it is uploaded to the correct folder on your server.
Copy the glyphicons-halflings.png & glyphicons-halflings-white.png From img Folder.
make a sub-folder with name "img" in css folder.
Paste the both glyphicons-halflings.png & glyphicons-halflings-white.png in css->img folder.
Open your bootstrap stylesheet e.g. Let's Say bootstrap.css in text Editor.
Find (Ctrl+F) "icon".
6.You will find the class.
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}
change the background image url to
background-image: url("img/glyphicons-halflings.png");
find "glyphicons-halflings-white.png"
Change it's path also.
And Bingo! you are on it.
I encountered this same problem today and it had me confused. As Rishi says above, it should work, but it just didn't. I triple-checked my directory structure. Then eventually I realised that it wasn't hitting my glyphicons file at all. I removed this offending line of css:
<link href="css/font-awesome.min.css" rel="stylesheet"> <!-- remove me -->
And everything was good!
Remember that if you're going to include font-awesome, then it will look for the font files instead of the glyphicons file. So either add the appropriate fonts, or just use plain old bootstrap.
The glyph icons load only when you have the following files in the fonts folder.
glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf and glyphicons-halflings-regular.woff.
Download the theme template or the carousel template of bootstrap, and you'll find these files there.
To know where to place these files in your web folder, just run Link Checker or Xenu's link sleuth and it'll show you where to place those files.
I don't have a lot of information here. My site has been working in IE8, but now no styles are applied. The developer tools show all of the CSS files being loaded, but no elements show any evidence of those styles being applied. Chrome & Firefox still apply all styles with no problem.
I know you can't help me without more information, but maybe you have an idea of where I could look for an error? All of my javascript is running fine. Is it possible that an invalid CSS file would just stop all style application, or something like that?
Thanks for any suggestions!
PS: possibly relevant - my base css file imports several others - about 8 in total.
Just on a lark, try removing all the imports then putting them back in one by one.
Run your CSS through the W3C CSS Validator.
Attach a new CSS file, test that it works, then slowly migrate across to the new file until it breaks. Try to track down where it breaks.
There is a cap on number of css files that can be included in a page on IE. Check if u are including lot(>31) of css files refer http://drupaleasy.com/quicktips/internet-explorer-css-file-limits
Look at the files that do get imported, say, based on body, and see if they appear chopped off. That will show a syntax error.
Even if one css file had an error (say an unclosed curly brace) that made the entire file invalid, it shouldn't affect other css files. I'm assuming you don't have html comments around all of your includes.... It's possible you're doing something systematically that invalidates all css. Try adding this code at the top of your document (let's just say below any doctype, just because), and see if that affects anything:
<style type="text/css">
* { background: #f00 !important; }
</style>
check if you have mentioned DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd in your file... I faced similar problem once.
Not sure if it'd works but give it a try.
I want to refer to an image in my main stylesheet for a Grails app and I can't get it to work. My image lives in the standard location in my Grails app...
project\web-app\images\outbound-blue.png
In my stylesheet I want to use it as a background image for a class...
.messageimg {
height:17px;
width:16px;
background-image:url(images/outbound-blue.png);
background-repeat:no-repeat;
}
This doesn't work for some reason. My stylesheet is in the normal location too, i.e.
project\web-app\css\main.css
I get a missing image marker when I load the page in the browser. I have checked that I have no typos in names etc. I have also tried fiddling around with the virtual path in the url, but I can't figure out what I need to put in there to make this work in Grails.
I don't want to use GSP and insert an IMG tag into my code because I want to control the image through styles.
So, what am I doing wrong?
A more portable way to specify image locations is to use the resource() function:
.messageimg {
height:17px;
width:16px;
background-image:url('${resource(dir: "images", file: "outbound-blue.png")}');
background-repeat:no-repeat;
}
Try adding "../" at the beginning of the URI. For example:
../images/outbound-blue.png
The "../" at the start of the URI tells the browser to go up one level to the parent directory then look in the images directory. Currently you have it set up to look for a subdirectory called images in the directory containing stylesheets.
Be aware though. Using $resource{... does not work within a referenced .css file. You need to add a style element.
Typically you would reference a resource in a style sheet as a relative url. The url of your image should be relative to the CSS file's location. So ../images/outbound-blue.png from /appName/css/main.css will be referencing /appName/images/outbound-blue.png
If you are still having issues, You can debug this by using a tool like firebug to inspect the page and verify each step in your style.
Verify that:
The item that you think is being styled is picking up the styles.
The image that you are referencing can be accessed both manually, and via firebug.
The css file that you are loading isn't cached and is actually refreshed by the browser.
So the problem seemed to be that the browser was looking into
http://localhost:8080/<app-name>/assets/images/<background-image-name>
which seems correct but if you inspect other images on the page, they render from the path
http://localhost:8080/<app-name>/assets/background-image-name
So, just by excluding images in your path-name should fix the issue. However, this is just a work around which I am sure would have a better explaination and a solution. Cheers.
I am using background images in my css, which, obviously, requires writing URLs in the css file.
So, while the relative path might be the same, the base URL will be different between development and production.
So, is there a better solution than:
1. changing it each time manually
2. using resources on the cloud with full URL
3. making the CSS files parsed as PHP, and using some
code in it (and then I have to fix the problem with caching).
CSS URLs are parsed from the directory containing the CSS. Meaning it won't change. So all you should have to do is give them paths relative to the CSS Directory and you should be good.
CSS/main.css
div {
background: transparent url(../images/background.jpg) no-repeat;
}
i asked that question b4 in another forum
http://www.nabble.com/Root-directory-(linking-CSS-JS-etc)-to23911119.html#a23923742
the solution was to use a view helper baseUrl
<img src="<?php echo $this->baseUrl();?>/images/foo.gif">
I use the symfony framework, and I've found that parsing it as PHP works best. It's the most dynamic, and if you ever need anything more than just a URL, you can with the PHP.
One obvious answer to this is use the purest form of absolute URL, a filename, by putting all your CSS images into the CSS folder. That's used a lot. You gain simplicity in your URLs, you can now move or rename the CSS folder itself without hassle, and your stylesheet gets that little bit smaller.