Here's a weird problem:
I configured my Apache httpd server just now. I wrote a simple test.php and it works correctly.
Then I wrote a css file which looks like:
.home div.sma{
background:url('../images/carlos.png') 50% 0px no-repeat;
}
The problem is:
The css file loads correctly and all other styles work fine. The only problem with it is that all images referenced in a CSS file using background:url won't work, but all images directly referenced in PHP file(<img src="" />) work well.
I've tried replace ../images/carlos.png by http://stacktoheap.com/images/stackoverflow.png, the problem still exists.
Weird problem, does anyone have a solution to this?
The class reference on you test.php is good ?
In home element class, the div with the class name sma :
<div class="home">
<div class="sma></div>
</div>
You can put a border to see if the size of your div.sma is good...
Did you put some special security params in apache ?
OKļ¼problem solved. It turns out to be a problem with php.ini:
Certain class names are generated by PHP code with short_open_tags(<? //code ?>), but short_open_tag is Off by default in Windows.(It's On in Mac and Ubuntu). So, even the CSS file is loaded correctly, some selectors can't find corresponding class names because they haven't been generated.
By the way, I've also encountered that certain CSS files are categorized to Images when inspecting elements in Chrome, which brings trouble to debugging. To solve this, simply remove all background:url(path) statements within which path is an empty string.
Related
Good evening. I'm trying to make a site with Django. Not being expert in CSS I took a template (minimaxing, from html5up.net). Everything works fine, as you can see (http://secret-reaches-8428.herokuapp.com/lesson/lezioneA00/) except that ordered and unordered list are not rendered as such. I can guess is something in the css, but I can't see where the problem is. There are the three .css files loaded in the header:
http://secret-reaches-8428.herokuapp.com/static/css/style.css
//same_domain/style-desktop.css
//same_domain/style.css
Question is: can anybody point out what part of the css is to be modified or, can anybody point out what the problem is?
Ok, I solved looking for standard css attributes and setting up properties as I wanted. Now I'm just curious to understand why the normal html behavior was overwritten, since there is no reference to in the css files.
You have to update your img sources. You have a problem with your img sources, not with your ul or ol rendering.
You try to reach an image here, but it does not exist. Try to fix the URL reference.
Cakephp is giving me some problems as I have set as below (I have tried any number of urls, through localhost, placing it in webroot and giving reference from that file, giving full route from localhost (this is a local test ubuntu machine, not a 3rd party server), etc, etc but it just doesn't show up.. I am using a custom layout that overrides the default layout and, as far as I can tell, it contains no reference to any sort of background image.. here is from my css file:
body {
background-image: url('http://localhost/site1/app/webroot/img/bg1.jpg');
font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
font-size:90%;
}
I have tested that this works fine with a regular HTML file, I am hoping someone has an idea of what cake is up to that is giving me this problem.. thanks
EDIT: I have tested and I can display exactly the same image within a DIV (as its background) from the same css file.. something in Cakephp is overriding the body background-image setting, but I can't figure out what.
Place images in webroot/img
Place CSS in webroot/css
Write relative paths to references images in CSS styles:
background: url('../img/imagename.png');
You spelling for background is wrong:
ackground-image: url('/root/Desktop/bg1.jpg');
If that is not the case in your actual code, make sure that you are specifying the correct path, try adding a dot before /root/
background-image: url('./root/Desktop/bg1.jpg');
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.
The boss wants the master page's menu to look nicer. I generated my gradient file with one of the tools available on the net, no problem there..
I tried to make a CSS class for each menu item but when I use the background-image directive and the style builder, I get a line like:
background-image: url('file:///C:/Documents and Settings/Username/My Documents/Visual Studio 2008/WebSites/ThisSite/Images/Gradient.png')
...when what I want is
background-image: url('~/Images/Gradient.png')
The first url will, of course, only work when I'm debugging on my local machine - deploy this and I'm hosed. So many other ASP.NET objects work with "~/" to indicate the top-level directory of the website but my css file doesn't like it and I can't set a background image for the menu control or the menu items - seems like a GLARING omission when I can do it to so many other controls.
What am I missing?
The url in your CSS needs to be an absolute (or relative) url and not use the tilde mapping as it is not a server-side component.
background-image: url( "/images/menu.jpg" );
You're almost there... try this:
.menuStyle
{
background-image: url('/images/BG.gif'); /* Putting a slash in front means its relative to the root. No slash would be relative to the current directory. */
background-repeat: repeat-x; /* assuming you have a vertical gradient. */
}
Hope that helps.
It's not a glaring omission. Not an omission at all. The tilde is an ASP construct. In your CSS it won't have any meaning.
One "replace all" operation and you're set.
Replace file:///C:/Documents and Settings/Username/My Documents/Visual Studio 2008/WebSites/ThisSite with blank.
I have tried setting the background-image property from CSS in my ASP.Net application (i.e. giving the relative path as described in the post). However, it did not work for me. Later, setting the background-image as background-image:url('http://localhost:1701/Images/BannerTileBackground.gif'); it did work..
Please let me know what is the correct approach, and the reason why it didn't work before.