I'm trying to add content to a printed webpage using an #page block. I've seen plenty of examples of this but it doesn't seem to work
Using the html below I expect to see the word "Hello" in the top left corner of the page when I do a Print Preview... can anyone tell me why this isn't working?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#media print {
#page {
size: 8.5in 11in;
margin: 0.5in;
#top-left {
content: "Hello";
}
}
}
</style>
</head>
<body>
<p>Page content</p>
</body>
</html>
It looks like this functionality probably used to work... I'm not really sure on that though. There are enough examples around the internet to suggest that it has been in use.
The current specification does not allow for this sort of functionality so I guess that's that.
The current working draft does support content being added through the page block but it hasn't made it into the specification so is not currently supported by any browsers.
Related
I am trying to make a CSS sheet inside an HTML document to change the background
image of a link.
You can make CSS make it so if you have your mouse go over something it can like change its color
<!DOCTYPE html>
<html>
<head>
<style>
#a1:link, #a1:visited {
background-color:red;
padding: 15px 25px;
text-decoration: none;
}
#a1:hover, #a1:active {
background-color:green;
}
</style>
</head>
<body>
<a id="a1" href="home.html">
</a>
</body>
</html>
Is there a way to instead doing a color can you do an image?
I have tried
background-image:url('locationtoimage.jpg')
and it just makes the link disappear. I did change both
background colors to background-image and I did the proper format and things but it wont work? I have tried googling it but everyone just asks for like buttons to things but I am dealing with links.
Sorry if this was already answered somewhere else. I tried looking but I cant find anything. I am really sure that this is possible and simple and I might just be over looking something. Here is what I have.
<!DOCTYPE html>
<html>
<head>
<style>
#a1:link, #a1:visited {
background-image:url('media.jpg');
padding: 15px 25px;
text-decoration: none;
}
#a1:hover, #a1:active {
background-image:url('home.jpg');
}
</style>
</head>
<body>
<a id="a1" href="home.html">
</a>
</body>
</html>
this works though
<!DOCTYPE html>
<html>
<head>
<style>
#a1 {
width: 200px;
height: 200px;
}
#a1:link, #a1:visited {
background-image:url('imageatasite');
padding: 15px 25px;
text-decoration: none;
}
#a1:hover, #a1:active {
background-image:url('imageatasite');
}
</style>
</head>
<body>
<a id="a1" href="home.html">
</a>
</body>
</html>
but I am not using an image online im using one that is in my html folder
but it wont work?
Try googling an image and pasting that in the background image url to see if it's defientley not the file.
Failing that I would suggest to use a separate div wrapper to wrap the images. And on :hover use display none to hide the image you don't want to see on hover.
Then you can set the image to be 100% that of the div.
Check the file extension too just to be sure.
I dont fully understand what the problem is but other images do work. The images I wanted to use were the same file extension in the same folder but I took a snapshot of them and now they work just fine. Thank you for helping guys I think all is well now.
I'm a real noob at CSS/HTML, so please forgive me.
I tried to change the background page color on the CSS file linked to my html file, and it doesn't work. Whereas when I just flat out change it between the style tags in my HTML file, it works. What gives?
Plain and simple:
Ex1.css
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
SamplePage.html
<!doctype html>
<html>
<head>
<title> Sample Page </title>
<link rel = "stylesheet" href="Ex1.css">
</head>
<body>
Hello. This is a sample Page.
</body>
</html>
Your HTML is correct, and links to your CSS correctly (assuming Ex1.css is in the same folder as your HTML).
Your CSS is almost correct; the only problem is that you shouldn't include any HTML tags in your CSS document. Ex1.css should only contain the actual CSS declarations themselves (body { }).
body {
background-color: lightblue;
}
<body>
Hello. This is a sample Page.
</body>
If in doubt, you can validate your CSS with W3's CSS Validator.
Hope this helps! :)
Reduce the contents of your Ex1.css file to this:
body {
background-color: lightblue;
}
(no HTML code in CSS files!)
your css file will just have. Plain and simple
body {
background-color: lightblue;
}
change your css file to this:
body {
background-color: lightblue;
}
I want to make the head and body different things, independent from each other. Because of this, I want different background colors, but I've not been able to achieve that.
If anyone knows how I can make the styling for the head and body show up and make the sections look different, please let me know. I've included the code I used on the site below.
<html>
<head>
<p>Hi there!</p>
</head>
<body>
<style>
body {
background-color: lightblue;
}
head {
background-color: lightgreen;
}
</style>
<p>Hi there!</p>
</body>
</html>
Image of the output:
the page output
The head tag is used to describe metadata and important information about your document. What shows up there is not visible.
Your p tag should be under the body tag, not the head tag.
What you are thinking of is probably the header section of your webpage, which is included under your body tag.
Also, your css declarations should take place in their own separate file.
Here is what your code should look like
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
</header>
<p>Hi there!</p>
</body>
</html>
Styles.css
body {
background-color: lightblue;
}
header {
background-color: lightgreen;
}
I found a very odd problem printing in Google Chrome for Mac that I am trying to fix. When using "Print Using System dialog" option the #page inside the print styles are ignored, which causes the page to be incorrectly printed. When printing via the built in chrome print dialog it seems to work ago.
In windows Chrome, the system dialog and the regular dialog both ignore the #page properties.
The only reason I am even defining #page properties because my version of bootstrap defines these and I want to overwrite them.
here is the code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#page
{
margin:10cm 10cm;
}
#media print
{
#page
{
margin:0 !important;
}
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Working example:
http://blastohosting.com/chrome_bug/
I've tried several approaches and found one that works with my version of Chrome (32). You have to set the value of the #page margin inside the print media query to 0 without !important, any other value will trigger the bug:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#page
{
margin:10cm 10cm;
}
#media print
{
#page
{
margin:0;
}
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
I am trying to setup a page on our site to work properly with printing, the issues I am hitting is that, to test it I need to keep printing to file.
What I would prefer would be if there was a way to display the page as it will be printed.
Is this possible? (Chromium).
You can specify different CSS for different needs. Look at this style of coding CSS...
<html>
<head>
<style>
#media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
#media print
{
p.test {font-family:times,serif;font-size:10px;}
}
#media screen,print
{
p.test {font-weight:bold;}
}
</style>
</head>
<body>
....
</body>
</html>