By some curse i cannot for the life of me get this simple css call working. here is my html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/stylesheet2.css" rel="stylesheet" type="text/css" />
<title>Welcome.</title>
</head>
<body>
<br>
</body>
</html>
here is my stylesheet:
body {
background-image:url(img/landscape.jpg');
}
the file is named correctly. when i assign a background-color tag to this stylesheet, i get the color for whatever i assigned. is there some rule that keeps the body from having an image background? This is absolutely incredible. HOW is this not working for me?
You need to make the path relative to your css. Since you have your css in a folder named "css" and your images in a folder named "images", you must tell the path to move out of the css folder and into the images folder.
body {
background-image:url('../img/landscape.jpg');
}
You're missing the opening quote in your URL:
body {
background-image:url('img/landscape.jpg');
}
This should definitely work, provided, as you say, the file is named correctly and is in the location you say it is.
Assuming it's not a copy-paste error, your CSS is invalid, as you're missing a matching ':
background-image: url('img/landscape.jpg');
Apart from this, you should check that the URI is correct and that the image is accessible.
And as a side note, your XHTML is invalid as well. Stick to HTML4.01/5 or write valid XHTML (and serve it as aaplication/xhtml+xml).
Related
I've recently re-compiled a .chm file as a lot of changes needed to be made in each html file.
The main problem I'm having when simply recompiling these files is the background image. The code in one of the html files is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>How to Create a File</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design"
href="design.css" />
<!--(Style Sheet)===================================================-->
<style>
body { background-image:url("Background.gif"); background-repeat:repeat; background-attachment:scroll; }</style>
</head>
The compiled version that was there before worked and kept the background. I have simply changed the text in the html files using Amaya and now it doesn't work!
The other problem is that if I rename all the files and change the index files etc accordingly, I ALSO loose the boxes I have around titled sections etc. So I have had to resort back to the old named and seriously unorganised files!
All of the images I'm using are in the same folder so this is not the problem.
Does any one know why this is happening? Any help would be hugely appreciated!
Thank you!
I'm not sure if this is still an issue for you...but in order to get your background to work, your style must be placed inline -- i.e. in the tag... in your case, the body tag. Background images will not work in a compiled CHM via linked stylesheet or by styles placed in the header.
You need to do:
<body style="...attributes here;">
You need to insert a background image path into .hhp file, [FILES] section.
For example:
[FILES]
index.html
...
background.gif
This will work if you are using the Microsoft Document Explorer. Give the image source path the full url as revealed when right clicking an image and looking at its properties:
ms-help://MS.VSCC.v80/MS.VSIPCC.v80/something/something/background.gif
But an even better way is to use JavaScript to dynamically add the background image to the style of an element. You can do this with jQuery or with pure JavaScript.
With jQuery:
$(document).ready(function() {
$("#example").css("background-image","url('images/css-background.jpg')");
});
With pure JavaScript:
var url = window.location.href;
url = url.substring(0, url.lastIndexOf("/") + 1);
var style = document.createElement('style');
document.getElementsByTagName('head')[0].appendChild(style);
style.setAttribute('type', 'text/css');
style.styleSheet.cssText = '#example { background: url(' + url + 'images/css-background.jpg) }';
I think you use this method instead backgrond-image and second think background repeat
You want repeat-x or repeat-y or both side repeat any one choose.
<style>
body {
background:url(Background.gif);
background-attachment:scroll;
background-repeat:repeat;
}
</style>
Convert image to base 64 first and then,
For use in <img> elements:
<img src='data:image/png;base64,iVBOR.....'/>
For use as CSS background:
url('data:image/png;base64,iVBOR...............'
I have these strange image urls that if I call direct in browser, an image shows up but when I use it in an img tag no image shows up.
http://thetvdb.com/banners/_cache/fanart/original/248951-1.jpg
I'm sure I'm making some silly mistake. Here is simple code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org
/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
</head>
<body>
<img src="http://thetvdb.com/banners/_cache/fanart/original/248951-1.jpg" alt=""/>
</body>
</html>
Any help?
The TV DB does not want to use their bandwidth to display an image on your site.
We don't allow any kind of hotlinking, you are only allowed to directly download the images and then use them as you see fit, you may not use us as a host.
They have taken steps to prevent you from doing this.
quentin#laptop:~ # curl -e http://example.com/ http://thetvdb.com/banners/_cache/fanart/original/248951-1.jpg
<html>
<head><title>403 Forbidden</title></head>
<body bgcolor="white">
<center><h1>403 Forbidden</h1></center>
<hr><center>nginx</center>
</body>
</html>
My image is saved in the same folder tree or whatever that is called as my webpage, and it won't load. It's probably something really simple but I can't figure it out. Any hint would be appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>website</title>
<style type="text/css" media="screen, print, projection">
body{
background-image:url('C:\Users\blah\Desktop\webdesign\randompicture.png');
}
</style>
</head>
<body>
</body>
</html>
instead of C:\Users\blah\Desktop\webdesign\randompicture.png'
use relative path if your htm file is in webdesign folder randompicture.png
use background-image: url(randompicture.png);
if the html file is on desktop
use background-image: url('./webdesign/randompicture.png');
Try using relative paths, if your picture is in the same directory as your html file, simply write:
background-image: url(randompicture.png);
Also, you don't need apostrophes in the url() notation of CSS.
If you put your rules into a separate CSS file, the path should be relative to the CSS file, not the HTML.
if the image is in the same folder, use:
body
{
background-image: url('randompicture.png');
}
I can't believe what is happening in my website. When I add this line:
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html>
<head>
Everything works fine. And when I don't, CSS "messes" up, everything becomes different and layout becomes "ugly".
How can this line solve all the problems?!
You're mixing up HTML with XHTML.
Usually a <!DOCTYPE> declaration is used to distinguish between versions of HTMLish languages (in this case, HTML or XHTML).
Different markup languages will behave differently. My favorite example is height:100%. Look at the following in a browser:
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
table { height:100%;background:yellow; }
</style>
</head>
<body>
<table>
<tbody>
<tr><td>How tall is this?</td></tr>
</tbody>
</table>
</body>
</html>
... and compare it to the following: (note the conspicuous lack of a <!DOCTYPE> declaration)
HTML (quirks mode)
<html>
<head>
<style type="text/css">
table { height:100%;background:yellow; }
</style>
</head>
<body>
<table>
<tbody>
<tr><td>How tall is this?</td></tr>
</tbody>
</table>
</body>
</html>
You'll notice that the height of the table is drastically different, and the only difference between the 2 documents is the type of markup!
That's nice... now, what does <html xmlns="http://www.w3.org/1999/xhtml"> do?
That doesn't answer your question though. Technically, the xmlns attribute is used by the root element of an XHTML document: (according to Wikipedia)
The root element of an XHTML document must be html, and must contain an xmlns attribute to associate it with the XHTML namespace.
You see, it's important to understand that XHTML isn't HTML but XML - a very different creature. (ok, a kind of different creature) The xmlns attribute is just one of those things the document needs to be valid XML. Why? Because someone working on the standard said so ;) (you can read more about XML namespaces on Wikipedia but I'm omitting that info 'cause it's not actually relevant to your question!)
But then why is <html xmlns="http://www.w3.org/1999/xhtml"> fixing the CSS?
If structuring your document like so... (as you suggest in your comment)
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html>
<head>
[...]
... is fixing your document, it leads me to believe that you don't know that much about CSS and HTML (no offense!) and that the truth is that without <html xmlns="http://www.w3.org/1999/xhtml"> it's behaving normally and with <html xmlns="http://www.w3.org/1999/xhtml"> it's not - and you just think it is, because you're used to writing invalid HTML and thus working in quirks mode.
The above example I provided is an example of that same problem; most people think height:100% should result in the height of the <table> being the whole window, and that the DOCTYPE is actually breaking their CSS... but that's not really the case; rather, they just don't understand that they need to add a html, body { height:100%; } CSS rule to achieve their desired effect.
Its an XML namespace. It is required when you use XHTML 1.0 or 1.1 doctypes or application/xhtml+xml mimetypes.
You should be using HTML5 doctype, then you don't need it for text/html. Better start from template like this :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>domcument title</title>
<link rel="stylesheet" href="/stylesheet.css" type="text/css" />
</head>
<body>
<!-- your html content -->
<script src="/script.js"></script>
</body>
</html>
When you have put your Doctype straight - do and validate you html and your css . That usually will sove you layout issues.
It sounds like your site has CSS or JS that depends on running in quirks mode. Which is why you need garbage above your doctype to render "correctly". I suggest removing said garbage and then fixing your CSS+JS to actually work in standards mode; you'll save yourself a lot of pain in the long run.
The namespace name http://www.w3.org/1999/xhtml
is intended for use in various specifications such as:
Recommendations:
XHTML™ 1.0: The Extensible HyperText Markup Language
XHTML Modularization
XHTML 1.1
XHTML Basic
XHTML Print
XHTML+RDFa
Check here for more detail
i'm trying to implement various semantic links on the website I'm working on.
For that, i try to put
<link rel="start" href="index.html" />
In my head section.
Although the data is present in the web page, Opera does not seems to see it to show the navigation bar that should however be present.
Here is my full head section.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html"/>
<title>Amnistie et compagnie</title>
<link rel="start" href="index.html" />
<link rel="previous" title="aaaa" href="365-gestes-pour-sauver-la-planxc3xa8te-2.html" />
<link rel="next" title="aaa" href="5-best-data-visualization-proj.html" />
</head>
Furthermore, when replacing urls with absolute ones, it seems to work correctly. is there something I did wrong ?
I even tried using code samples like this one, but my navigation bar (which is set to show automatically) never appears, except when a href is an absolute url, what I radically don't want.
So, how can i specify link elements with relative urls ?
what happens if you try the following doctype?
<!DOCTYPE html>