I am using the following:
<style type="text/css" media="screen">
div#print-footer {display: none;}
</style>
<style type="text/css" media="print">
div#print-footer {display: block; position: fixed; bottom: 0;}
</style>
the div for the footer is:
<div id="print-footer"><p>blah blah</p></div>
It works great but since I have multiple pages it print on every page. I want it on some pages. Oy! So, I broke the pages into individual html documents and that didn't work either. Then on even pages I changed the div to be:
<div id="print-footer"> </div>
but it ignored it and printed the first one.
Any suggestions?
Thanks,
Evan
An element that has position:fixed will be rendered on every printed page. See: http://reference.sitepoint.com/css/position
If you don't want the footer to appear on every printed page, use absolute positioning with bottom:0
Related
Hi all I'm facing a problem with printing pages.I want to have same header on all the pages im printing.I read several answers from stack seems no straigt forward answer.
thanks in advance.
Add a stylesheet for the printing of the page.
<link type="text/css" href="print.css" rel="stylesheet" media="print">
Then create a div with your hidden print-only header.
<div class="printOnly">Header</div>
Hide the printOnly div in your regular CSS file.
.printOnly { display: none; }
In your print.css, do whatever you need to do to your div. This is also where you would hide otherwise visible properties.
.printOnly { /* Style */ }
This is how I managed print styles.
So, if you have a div called normalHeader that you want gone when you print, simply set the style to display: none; on the print.css file.
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Golden Gators</title>
<link rel='stylesheet' type='text/css' href='styles.css'/>
</head>
<body>
<div id='container'>
<nav id='navContainer'>
<h1 id='navHeader'>Golden Gators</h1>
</nav>
<div id='contentContainer'>
asd
</div>
</div>
</body>
</html>
So my problem is why does it do that? I tried everything including 'display: block', not using 'position: absolute' (Which worked but i don't know how to flush it without this), and even 'position: fixed' (Same thing as absolute).
Can anyone tell me why it does that? I do know that 'absolute' destroys your document NORMAL flow but I thought it would still respond to display: blocks? Why is it not listening?
EXTRA:
If possible could anyone link me to any good html and css positioning tutorials? I've done about a good 100+ queries of search on google and could not find any that explains the 'deep core' of how css works.
ANSWER:
Why does this work?
CSS:
#font-face {
font-family: Clash;
src: url(supercell.ttf);
}
body, html {
margin: 0;
padding: 0;
}
#navContainer {
background-color: #3a5795;
width: 100%;
float: left;
}
#contentContainer {
display: block;
clear: both;
}
#navHeader {
font-family: Clash;
color: #ffd700;
}
HTML
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Golden Gators</title>
<link rel='stylesheet' type='text/css' href='styles.css'/>
</head>
<body>
<div id='container'>
<nav id='navContainer'>
<h1 id='navHeader'>Golden Gators</h1>
</nav>
<div id='contentContainer'>
asd
</div>
</div>
</body>
</html>
Problem with this:
Whenever I try to put a navigation bar it makes the entire container enlarge which I do not like.
Question for this:
When I type 'float: left' it expands up top and bottom doing the effect I want it to. Which is a bit odd to me as I thought float: left only moves to the left. Why does it expand up when I do float: left? And this just emphasizes the fact that I do not understand 'css' at it's 'deepest'.
I did not completely understand what you were asking (probably because it's pretty late) but I played around with your code a bit. Here is what I can tell you (if I'm wrong hopefully someone will correct me):
Browsers have default values for elements. The reason your container gets larger when you use float: left is because it is moved outside of the document flow. The default padding and margin value on the h1 element are what enlarges the container. (Notice that the asd outside of the nav container doesn't seem to move. This is because of the margin on the h1 element.)
The same explanation goes to why your nav container grows when you try to put a navigation bar into the container. If you are trying to make a horizontal navigation bar, try using display: inline-block on the h1, ul, and li elements. This will make them readable from left to right. (Hopefully this is what you were trying to do.)
As for web tutorials. Try the following:
w3schools --> A great website for learning about web development.
Treehouse Web Tutorials --> Sign up for their free 14 trial and go into their front-end web track. you will learn ALOT.
I'd like to apologize if I gave a pretty bad response. Hopefully this could be of help to you in some way!
I would like to know if there is a way to use a particular css page as styling for a tag.
For example, instead of
<div class="header" style="position: absolute; text-align:left; right: auto; margin: 0 auto 20px; z-index: 1; width: 60%; height: auto; left:9%">
Is there a way to specify style.css for the div tag?
For example,
This style.css must ONLY apply to the div tag above.
Also, is it possible for all tags contained within that div tag to follow the same specified css page?
Put this in the header of your page
<head>
<link rel="stylesheet" href="/styles.css" type="text/css">
</head>
If you want to specify style for a page, include that CSS when you render the page.
If you want to have multiple ways of rendering a particular tag, differentiate the tags.
I'm not aware of conditional logic you can apply to the CSS directly.
HTML:
(include this in the head)
<link href='style.css' rel='stylesheet' type='text/css'/>
CSS: (in the style.css file)
div.header{
//your style here
}
or without the class:
div{
//your style here
}
but without the class it will get all div tags so I recommend the first code
You can create the CSS page you want and then create the styling you want inside
something like this
div > table {
padding: 5px;
}
That would make the div have a padding of five as well as it's child the table a padding of 5
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" />
Is it possible to print a html page with something stuck to the bottom of the page?
You can specify a CSS stylesheet to be used for a media type of print and include that in your webpage. In that stylesheet set appropriate options to "turn on" the footer element that you want whilst in the "screen" version that element might not be visible.
<link rel="stylesheet" type="text/css" media="print" href="style.css">
#media print {
.footer {display: block;}
}
#media screen {
.footer {display: none;}
}
anything of class=footer will appear only in print. It's up to you to locate it at the bottom of the page.
If you mean right at the bottom, instead of immediately after a short amount of content, then perhaps try
position:absolute;
bottom:0;
Is that the kind of thing you mean?