I created a html page that provides to print his's content(window.print). I would like to add page footer for print version with the following CSS.
display: table-footer-group;
But I want to have a page footer in last page. The above CSS produces the page footer every page. How can I solve it? Thanks.
You can try something like that:
#page:last {
/* footer css here */
}
Additional reading.
Related
I would like to have something like this at the bottom of my chrome extension:
https://gyazo.com/89f5f73f1f4fc24a764c058dbfee24de
Mine currently looks like this:
https://gyazo.com/f71a60149cc0301f965e7f0736815505
This is my html code:
https://gyazo.com/2fb446ed0b7fd61bde06d201f175495d
What should I do to get mine looking like the first one.
I think that you would want to use CSS to solve this issue. The code of which should be found on this website. It should have all the information on how to split the footer in half. You would also want to take the background color out of the CSS as well.
You need CSS for this. Add the class footer to the td
td.footer{
background-color: none;
}
td.footer a {
color: aqua;
}
I am trying to make a footer for a HTML file where the footer needs to display on every printed page. I found a topic with a solution that locks a specific text to every page I print.
HTML:
<div class="divFooter">This is a footer</div>
CSS:
#media screen {
div.divFooter {
display: none;
}
}
#media print {
div.divFooter {
position: fixed;
bottom: 0;
}
}
The problem with this code is that the rest of my code just overwrites this whenever it reaches the footer. Anyone know a nice and quick solution for this? If not, maybe a different way to lock a footer to every page I print of that HTML file? I would also like to note that I cant link a seperate CSS file to the HTML. So every code I make, needs to be in the same file.
Maybe the solution is not just to use HTML and CSS, but to use PHP, making a footer include on each page, so you have a fixed footer for each.
<html>
...
<? php
include_once ("footer.html");
?>
...
I have a WordPress site where I added banner and sidebar filter option. But the banner shows as a conflict with filter option. If I added margin-top:300px then it goes down but this change applies to every page. I want to change this for the specific page only because I don't have banner on every page.
My site: http://motor.racedrivenonly.com/shop
Header image below:
There are classes added to the body tag in WordPress. Try to determine the proper body class ad you'll be able to add the margin based on a particular page template or type of page.
Try something like this:
.post-type-archive-product .blog-sb-widgets {
margin-top: 300px;
}
I am working/designing the front-end (working on the layout html+css, later will use php, mvc pattern) of a website. The website has a header, body, side menu and a footer The layout is ready.
There are a few forms which are unusually long/huge since all fields are necessary and I could not make them any shorter. The form opens in a new page.
Not to scare the user away I am planning to downsize the header on the form template (the design change will only apply to the form templates) and get rid of the footer completely.
I tried looking a few places but did not find how to go it done. In short, I want the site to have all block i.e. header, body, footer but when it comes to the form I would want to downsize the header and remove the footer to make the form look sleeker.
Is there a way to do this?
Note: I post no code because I have no problem with the code but the concept.
You can use display: none for the footerelement in CSS rules that only apply to this page (for example in a style tag in the head of that page).
Concerning the header, it depends how it is built, if it has a logo, background image, text, menu, whatever. In general you could reduce the height, make the logo smaller, hide parts of the text in there etc.
You can also done this thing using angularjs
ng-include
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body >
<div ng-include="'header.html'">
</div>
<div ng-include="'footer.html'">
</div>
</body>
</html>
Make sure the body of the page has a class, for example .no-footer .small-header or .form-page. and then in your CSS stylesheet, use something like this :
body.no-footer #footer{
display:none;
}
body.small-header #header{
height:50px;
/* or whatever you want to apply to make the header smaller */
}
So for my project I've setup a fixed header and footer but noticed that my footer is rather large. What I'd like to do is hide it and add a button toward the bottom that when you hover over will display the whole footer.
Here is my current website: http://webcomp41.volume11.com/final/index.html
How would I go about adding this feature? Any help is greatly appreciated!
CSS Solution: (show/hide completely)
for it to work, you just need to make the button and the footer siblings
#footer
{
display: none;
}
#button:hover ~ #footer
{
display: block;
}
you can use the same technique to specify different size instead of show/hide.
and as Ali Sheikhpour said:
notice: replace the word "button" with the ID of button and "footer" with the ID of footer.
Example HERE
jquery solution:
$("#button").hover(function(){$("#footer").show()})
notice: replace the word "button" with the ID of button and "footer" with the ID of footer.