I'm trying to create a webpage using a "central" CSS external sheet that is called by THREE HTML files. The problem that I have is to do with background color; each HTML file should have a different colour. I start off by adding the line
<link rel="stylesheet" TYPE="text/css" href="EuropeanCountries.css" />
within the and of my HTML file called "France.html". I add exactly the same line within the and of my other two HTML files called "Italy.html" and "Germany.html". I then add the line inside "France.html" and inside "Italy.html" and inside "Germany.html". Then, I go to my css file called "EuropeanCountries.css" and I add the lines
body#page1{background-color:rgb(255,0,0);}
body#page2{background-color:rgb(0,255,0);}
body#page3{background-color:rgb(0,0,255);}
I then save ALL the HTML files and css external sheet inside the same directory. I then try to open "France.html" with the Opera browser and the background color is WHITE, which is what it should NOT be. The background color for the other two HTML files are ALSO white! So something is wrong. When I link ONE HTML file with the css file, eg. "France.html" with "EuropeanCountries.css" (and there are no other HTML files in my directory), the background color works just fine. But when I try to link multiple files with one CSS file, things go awry. Can anyone please point out to me exactly where I've gone wrong?
according the css, your body should have tags:
<body id="page1">...</body>
etc,
but I'd go with
.red { background: red; }
.green { background: green; }
.blue { background: blue; }
and
<body class="red">...</body>
correspondingly
Related
In my style file, I have a background with a url that links to my image. But the image doesn't display on screen..
So, I have my image saved in:
public/img/coding.jpeg
And my Sass file saved in:
resources/assets/sass/style.scss
I have tried this code in my Sass file:
background: url("/public/img/coding.jpeg");
But that doesn't work. Why not..
did you apply it to the body in your CSS? :)
body {
background: url("/public/img/coding.jpeg");
}
you can also just apply it directly to your body tag...
<body background="/public/img/coding.jpeg">
</body>
sorry i am new to CSS. I am doing a school unit where i have to create a web page using CSS based on an image design. Anyway, i finally finished and everything works great. though i found out that as a requirement for my unit i need to have my CSS file in a folder called 'styles'. so i created a new folder called 'styles', i placed my site.CSS file in there then updated my css link from:
<link href="site.css" rel="stylesheet" type="text/css">
to
<link href="styles/site.css" rel="stylesheet" type="text/css"> to cater for the new file path.
When i open the webpage every thing remains the same except for my unordered list background image does not display? everything else that is styled in the CSS file all works fine, just only the background image for my UL disappears. But when i put the CSS file back where it was originally from(same path as my Index.html file) and change the path back to it all works fine again and the background image re-appears.
What could i be doing wrong? i just can't figure out what to do.
the css code for the particular style:
#menu a {
height: 30px;
display: block;
vertical-align: middle;
text-decoration: none;
color: black;
font-size: small;
padding-top: 8px;
margin-left: 10px;
margin-right: 10px;
background-image: url('images/pg_menu_bg.png');
}
Thanks for your help, i hope this isn't a stupid question!
This is because you've changed the directory structure of your project.
When you reference a filepath in css without a slash at the start, the browser assumes you are referencing relative to where the CSS file is, so when you place the CSS file in the styles directory, it's looking for the image in:
/styles/images/pg_menu_bg.png
Where the image actually exists in:
/images/pg_menu_bg.png
This is why it works when you put the css file back in the root directory (I hope that makes sense?)
You should be able to get around this by changing your background css to:
background-image: url('../images/pg_menu_bg.png');
the ../ essentially means go up one directory from the directory the css file is located in.
It would be even better to write is as:
background-image: url('/images/pg_menu_bg.png');
The slash at the beginning tells the browser to look in the root directory, this means that regardless of where your css file is located the code should work. Unfortunately this doesn't work if you're accessing the html files on your computer (as the root of your computer is C:/)
You have to change the path of your background image also. Now your CSS file isn't in the root location anymore. So you have to use something like this -
background-image: url('../images/pg_menu_bg.png');
I am allowing users to choose their theme folder /views/theme/images/ theme can be chosen by the user. The css is in the theme folder along with the image folder.
.header {
float:left;
height:100px;
width:100%;
background-image: (/images/bg-nav.png);
}
and I have tried lots of different image paths in the background image but it's not showing I have tried /views/default/images/bg-nav.png, I've added dots, forward slashes etc.
The image does exist in the following folder: /views/default/images/bg-nav.png can someone help me to display and find my image :/
Here's my html css include
<link href="/views/<?php echo $system->theme(); ?>/style.css" rel="stylesheet" type="text/css" />
It is including fine the stylesheet is working
In your example code above:
background-image: (/images/bg-nav.png);
Should be:
background-image: url('/images/bg-nav.png');
You are missing the url. Check the syntax.
I created this code in oder to use it to place image and text side by side in a HTML page.
.mydiv {
width:646px;
height: auto;
}
.myimage {
float:left;
width:378px;
height:291px;
margin:5px;
}
The proble I am having is that I want to use the code multiple times in different files and with different image values and I don't want to be creating css file for all of them. So how can I write all the code for the with different values for all the files in one css file?
First, you can put your CSS in a CSS file, then include this file in all your html page by using this in the
<LINK href="special.css" rel="stylesheet" type="text/css">
(See W3C)
For the values that can't be reuse between your html files (the SRC of your image, for instance), you will have to right it manually in each file. You can do this directly in your HTML (if you use ) or by declaring in your header.
Create a .css file with the above code. You would need to specify the height of the .myimage class too. In all the files where you want the above file import the file using
<LINK href="example.css" rel="stylesheet" type="text/css">.
Now for the div holding the image give the class as .myimage and the src attribute is independent of the file
Edit- Suppose you have 3 html files in your site and you want the above css classes to be implemented in all the files, then open a new notepad file, paste the css classes in the file and save as somestyle.css. Now in each html file you use the above link tag to import the css and use the classes as you would do normally.
Don't know what's going on, but for some reason my background image is not showing when linked in external style sheet.
Example1: (working)
<html>
<head>
...
</head>
<body style="background: url(images/image.jpg);">
...
</body>
</html>
Example2: (non-working - external css file)
body {
background: url(images/image.jpg);
}
The image is displays when/if I use the first example, but no image is displayed when I use the second one.
Any suggestions? Thank you in advanced...
The directory your external CSS file is stored in may be different from the directory of the page you are putting the inline styles on. You may need to start your path with a slash.
url(/images/image.jpg)
or perhaps go back a directory like
url(../images/image.jpg)