I'm creating a webpage and I began using the style tag at the top:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Front Page</title>
<link rel="stylesheet" type="text/css" href="CSS/Styles.css" />
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
I want all my graphics design to be in my Styles.css but for some reason, it just doesn't work. When I add something like:
div.box {
margin:0 auto;
width:500px;
background:#222;
position:relative;
left: 50px;
top: -200px;
height: 100%;
border:1px solid #262626;
padding: 0 5px 5px 0;
}
To design this element:
<div class="box"></div>
It works when I put it in the tag, above the document, but not if I put it in the CSS file. It wasn't a problem before but now I've been adding everything to the style tag and it's getting really long (150 lines!). I want to move it all to the css file so my main page has less to scroll through. But I don't understand why the graphical changes just won't apply if put in the CSS file. Any ideas?
If your CSS file's path is alright, there are several things that may have happened:
It's possible that you simply need to clear your cache. CTRL+F5 usually does the trick. New users coming to your site won't need to do that.
It's possible that you've had a typo, or forgot to close a statement above with ;, check for that.
It's possible that this is a specificity issue, i.e. another rule, more specific is overriding your rules. Read about it here.
Are you on a case-sensitive file system (Linux)? Your path to CSS/Styles.css needs to be exactly right. Also, it is relative to the page and <basepath/>. Try using an absolute URL to rule out a path issue.
If you don't have a path issue, then you might have accidentally made a typo in the CSS file somewhere, causing your rule to be missed.
If your CSS file is good, then perhaps your browser has an old version cached. Have you tried clearing your cache?
Related
I have this very simple file index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>We're learning selectors!</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1 id="yay">Yay</h1>
<body>
</html>
While the stylesheet is style.css
h1 {
.color: blue;
.font-style: italic;
}
Both the files are in same directory but still it doesnt work. Tried all browsers. But when I open dev-tools in chrome , i can change the color to blue shade under the "style-section"
h1 {
color: rgb(0, 15, 173);
}
But then why isnt the style.css getting loaded, while Im using the same correct code as above.
Already referred to CSS not working in stylesheet didnt help either
Just remove the "." from your style style.css ie
h1 {
color: blue;
font-style: italic;
}
You are defining css attributes as class names.
Ur code:
h1 {
.color: blue;
.font-style: italic;
}
How it should be:
h1{
color:blue;
font-style: italic;
}
The dott, which you used infront of the css attributes does just get used with classnames. For example:
Html:
<div class="ClassName"></div>
<div id="ClassName"></div>
CSS:
.ClassName{
font-size:12px;
}
#ClassName{
font-size:12px;
}
<!-- #className = div id -->
<!-- .className = div class -->
I'll give a tip how to divide and conquer problems like this:
First, you need to validate if the script is loaded at all. Trust me, if you're gonna do JavaScript, you'll need to narrow down your possible errors. A great tool for narrowing down could be Chrome's developer-tap, and check the console. It will tell, if a file was not loaded (if the path was incorrect or alike).
Second, validate your CSS! If you know the stylesheet is loaded, validate if the CSS is typed correctly. You could use a tool like CSSlint.
And.. That's about it - now you know that you're CSS is loaded AND that it's typed correctly. Displayed correctly is a whole other concern which I won't touch upon here.
When I put this code in my html file, it is working without issue:
<style type="text/css" media="screen">
#headerimg
{
display: block;
background-image: url('/Content/images/epp/ebweblogo1.gif');
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:100%;
margin: 0;
padding: 0;
}
</style>
but when I move it to my css file as this:
#headerimg
{
display: block;
background-image: url('/Content/images/epp/ebweblogo1.gif');
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:100%;
margin: 0;
padding: 0;
}
This is my html:
</head>
<body>
<div class="page">
<div id="header">
<div id="headerimg" />
I am assuming it's due to the image location but I'm not sure since I've tried variations of the path and never got it to work.
Any suggestions?
EDIT
Sorry, you can't read my mind, I know.
When I place the css in the html file, the image displays fine. When I move it to the css file (site.css) it is not displaying at all. I've tried several different paths and it isn't being displayed no matter what I put in there.
UPDATE #2
When I change my html to this:
<div class="page">
<div id="header">
<div id="headerimg">test</div>
I am getting the image behind the text as 1 line that says test but not the full size of the image.
So it is apparently not displaying the image due to the size of the div? I changed the css to this:
height:130px;
but that did not change the height at all.
The two bits of CSS are not equivalent.
In one, you have #headerimg (id selector) which is a very different selector to .headerimg (class selector).
#imgplacement is also missing from the second sample.
As for the image issue - you need to ensure the correct path to the image directory.
This will be relative to where the CSS is - if in a CSS file, the image needs to be relative to the CSS file. If it is embedded in the HTML, it needs to be relative to the HTML file.
Since the path is rooted (starts with /), it should work everywhere. Use the developer tools to determine where it is looking for the image.
Include your css like this on the home page:
<link rel="stylesheet" type="text/css" href="route_to_your_style.css" media="all" />
And then be careful on routes for your image.
include the CSS file between the <head></head> section of your HTML like this:
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/css/cssfile.css" />
A ridiculously simple bit of web coding is failing to work for me, and for the life of me I can't figure out what I'm doing wrong.
This is my HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Experiment</title>
<link rel="stylesheet/css" type="text/css" href="/team/css/style.css">
</head>
<body>
<div id="user_box">
<p>Hi. Whassup?</p>
</div>
</body>
</html>
And this is the CSS file it's linking to:
#user_box {
position: fixed;
left: 10px;
top: 10px;
padding: 5px;
z-index: 100;
height: 40em;
width: 16em;
background-color: white;
border: solid black;
}
It doesn't work. The CSS formatting is ignored entirely. However, when I copy the content of #user_box into a style= tag, it works exactly the way I think it should.
I'm confirming that the CSS file is where it should be and the browser can see it; when I view the source, I can click that link, and it downloads just fine.
I suspect I'm missing something obvious/stupid, but I'm failing to figure out what it is. I beg you, point out my stupid and get a shiny shiny check mark.
The correct rel for a stylesheet is simply stylesheet, not stylesheet/css. Remove that /css and all should be fine.
Try removing the rel="stylesheet/css".
Change the tag to have:
rel="stylesheet"
i.e.
<link rel="stylesheet" type="text/css" href="/team/css/style.css">
Make sure that team is a root folder in your web directory and that it has a subdirectory of css with a style.css file
I'm new to HTML and CSS in general. Please help me with the code. I cannot get the background-image to appear in my browser although i typed the syntax correctly. All i get is an orange box, with no alert.png image. I'm following an online tutorial btw: http://dev.opera.com/articles/view/31-css-background-images/#thecode
Edit 1: The image, html file and css file are all inside the same folder. Yet no success.
Edit 2: I used an unique css file name instead of a generic "style.css" (which i have several of them in my system) and it worked! Make sure there's no space between url and the parenthesis.
HTMl code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>alert message</title>
</head>
<body>
<p class="alert">
<strong>Alert!</strong>
This is an alert message.
</p>
</body>
</html>
CSS code:
.alert {
width: 20em;
background-image: url(C:\Documents and Settings\USER\My Documents\alert.png);
background-color:orange;
margin: auto;
padding: 2em;
}
The url must be a string:
url("C:\Documents and Settings\USER\My Documents\alert.png");
I would guess it's a permissions issue, regardless you will most likely have problems with the URL being a file reference when you move this to a server, I would recommend moving your image into the same location (or better yet an image folder in the root of your site) as your html file and then modify your css to be this
.alert {
width: 20em;
background-image: url('/alert.png'); /* '/images/alert.png' */
background-color:orange;
margin: auto;
padding: 2em;
}
Another way of doing things is to put your text into a div, and set the image as the div's background image using css, like so:
<div class="alert">
<p>
<strong>Alert!</strong>
This is an alert message.
</p>
</div>
And, for the CSS:
.alert {
width: 20em; (Width of entire div, which includes text and bg image)
background-image: url('../alert.png');
background-color: orange;
margin: auto;
padding: 2em;
}
You can see the live JSFiddle example here: http://jsfiddle.net/Cwca22/TdDJY/
Also, in the code above, the background image will tile (repeat) both horizontally and vertically to fill the space of the div. In order to prevent this, you could make the div the same height and width as your background image, or put background-repeat: no-repeat in your css under the .alert class.
Hope this helps and good luck!
Please check your URL, if possible you can use firebug which is addon of firefox, which will definitely help you, by indicating if image has been loaded or not.
Else another solution would be give height to your alert class as follows
.alert {
width: 20em;
background-image: url('/alert.png'); /* '/images/alert.png' */
background-color:orange;
margin: auto;
padding: 2em;
height: /* height of image*/
}
First put your alert.png picture in the same folder as your html file.
Then try this in your CSS file:
body {
background: orange url("alert.png") no-repeat;
}
I think the problem was the "\" in \alert.png
Good luck!
In the original question he had in his css
background-image: url(C:\Documents and Settings\USER\My Documents\alert.png);
I ran into problems with a gallery page that had images as background thumbnails. Any image filename that had spaces would not appear. It was only the fact that one image happened to have underscores in place of spaces and that did appear that I was able to track it down. As there are spaces in his url, this could be the problem. I fixed my problem by using \ to escape any characters like spaces causing the problem. i.e.
A\ space\ in\ the\ filename.jpg
though this might not work in a Windows pathname!
If the image is in the same directory as the script he shouldn't need the full url anyway.
Okay here's my file structure:
+WWW
index.html
style.css
map.jpg
CSS:
body {
background: #000 url('map.jpg') repeat/repeat-x/repeat-y/no-repeat scroll/fixed top/center/bottom/x-%/x-pos left/center/right/y-%/y-pos;
}
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
</body>
</html>
PROBLEM: map.jpg does not display in any browser (Firefox, Safari) Or TextMate Preview!
You have two issues here, first is your CSS being off, it shouldn't have that laundry list of options for each argument left in there:
body {
background: #000 url('map.jpg');
}
Then your <body> doesn't have any content, so it has no dimensions, you'll need to put something in there to see much if any of the image, otherwise the <body> element's height is going to be very small if not 0, depending on the browser.
Try adding overflow:hidden;. This worked for me.
body {
background: #000 url('map.jpg') no-repeat top left;
}
The example you used showed all possible option values.
That doesn't look like valid CSS, did you forget to remove the sections you didn't need?
Try something like this:
body {
background:#000 url('map.jpg');
}
I was working on wamp... and it works fine with relative url.
body{
background:url(../image/circle.png) no-repeat;
}
This should definitely work.
Try getting rid of all the extra junk in your css:
body {
background: #000 url('map.jpg');
}
Make sure the image is in the same folder that your css file is in.