On the front page of my site, the footer content is loading to the bottom of the page, where it should. But the styles are loading to the middle of the page. As you'll see, I called a red background on the footer, but it's appearing behind a widget well above the footer html. It's a WordPress site, and I'm pretty certain the calls to the footer (WP_footer and get_footer) are being executed correctly. I have a feeling that something else is disrupting the flow of the page, but I can't find it. The site is very early in development, and it's being done mobile-first, so it might look like a jumbled mess at views larger than phone. Here's the link:
-- link removed --
Thanks for taking a look!
PS. Working on a Mac mostly in Firefox.
give style
float:left
to your footer and it will be fixed.
Add a clearfix class to the footer, the floats are messing with it wrapping the content.
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
<div id="footer" class="grid clearfix">
</div>
Because your widgets are floated left, the parent container doesn't expand to the content height. You can add the following class in your css: .grid {display:table; width:100%;}
Related
I am trying to create a footer with bootstrap 3. In the end it should look like on this site.
I have already tried this example but it is static and does not move with the site.
It is static because there is no content to push the footer down, there's no scrollbar. That footer on the bootstrap site should work fine. I added a height 3000px to their h1 and the footer moved with the site.
Unless I'm confused and you don't want a sticky footer in which case this should work fine
.footer {
width: 100%; /* or whatever */
float: left; /* to clear it */
}
or
.footer {
width: 100%;
clear: both; /* to clear it */
}
Also be sure to add .container inside your footer div, then add your content inside the .container div. You content should then move 'with the site'
Bootstrap 3 doesn't have a set way of adding a footer, so go crazy. The only custom footer I can see from them is the sticky footer
I think you are confusing what a sticky footer is. A sticky footer is a footer that stays at the bottom of the content even at the bottom of the page when you don't have enough content to fill the page. It keeps the site looking neat and consistent.
What you are looking for is the position attribute. Set up the following class in your CSS
.fixed-to-bottom{
position:absolute;
bottom:0px;
left:0px;
}
add this class to the element you want to always show at the bottom of the screen.
I hope this helps.
Okay, so hypothetically, let's say I wanted to write a book using HTML and CSS only. How would I go about defining a page header and footer (and have page numbers in the footer)? And how would I make it so that page breaks and margins show up in the browser (like a preview mode)?
I know it sounds like I'm asking for someone to just write the code for me, but I really just need direction to resources for something like this. I'm just completely stuck on how I would even begin to do something like this.
To explain what I want to show in the browser; I want to be able to see small versions of each page like you would in a PDF viewer, basically the text overflow would create a page-break:
I have looked into #media print, but that doesn't have any hooks for creating headers and footers.
and I can't get this to work (from w3.org):
title { position: running(header) }
#page { #top-center {
content: element(header) }
}
I have looked at the code from Boom!, and It's nice for printing, but it doesn't display in browser the same.
So... does anyone now where I could/should look for a good starting point for this?
This was my solution:
<div id='document'>
<div class='page'>
<div class='header'></div>
<div class='footer'></div>
<div class='content'></div>
</div>
</div>
Everything went in <div id='document'>. For each .page, the .header, .footer, and .content had the right height and width for a page.
After that, I used JavaScript to cut out everything that was overflowing outside the div.content. I then cloned div.page, updated the page number inside of the new page's header <div>, and filled the new page's content <div>.
This was repeated until I had like 100 pages and nothing was sticking out of the last page's content <div>.
I am assuming that you are using pure HTML and there is no code behind.
Because if there is any code behind then its a different story.
Define a main div having class="page". Inside that define 3 divs for header, content and
footer.
.page {
display: block;
height: 800px;
width: 100%;
/*Give margin as per your requirement.*/
}
.header {
display: block;
height: 50px;
}
.content {
display: block:
height: 700px;
}
.footer {
display: block;
height: 50px;
}
Add additional style as per your requirement.
create another style sheet with media type ="print"
There add the following style for page.
.page {
display: block;
height: 800px;
width: 100%;
/*Give margin as per your requirement.*/
/* this will print the page in new paper*/
page-break-after: always;
}
and the HTML for one page will look like this
<div class="page">
<div class="header">HEADER CONTENT</div>
<div class="content"> MAIN PAGE'S CONTENT</div>
<div class="footer"></div>
</div>
Repeat the above code an per the number of page you need.
You can also use table layout for this purpose.
And if you use code behind, then the content can be generated dynamically.
Hope this helps.
Well, it could be done by pure HTML and CSS but definitely not the way to go as it would become very frustrating to repeat blocks of code, almost the same, every time you wanted to start a new page. For the PDF like left panel you could use Iframes, more info here
basically, you would make a .htm page for every page of your book, strictly linked together by links, and when you would be finished, you could take a screenshot of every page you made, save the thumbnails, and make another html page that would be the panel, which would be eventually included (as the tutorial in my link shows) in all the other pages for the book.
UPDATE
Regarding page breaks, you could make div-s with the same class, and styled as pages, as shown here
My site's footer is showing up in the wrong place on my contact page and my blog page. All of the other pages have the footer styled correctly and in the right location. What could be causing this/what's the best way to remedy?
Add clear:both to #footer in your style sheet. That should do it.
Put a clear:both on your footer element:
#footer {
clear: both;
}
The blog and sidebar divs are floated. You need to clear out the floats on the footer for the footer to act "blocky".
I have created my first template but my sidebar is not working as expected. Please take a look at this: http://neo4evr.com/templates/torque/
As you can see, the sidebar has gone down to the footer position and not at the side of #content div, as I wanted. Can anyone help me to bring it beside the content div?
You need to properly clear your #container div and float your content to the left to fix your issue. Try this:
#container:after {
clear: both;
}
#container:before, #container:after {
content: "";
display: table;
zoom:1; /* ie fix */
}
#content {
float:left;
}
This should be pretty easy. Just add display: inline-block to the div#content. The sidebar will then goes up and sits next to the div#content. One thing you might notice though, the sidebar might be a little bit higher than the content. If you want to take it down a little bit just so that it aligns with the content, just add the same amount of padding to the top of the sidebar like the one with the content. Which in this case, it's 20px.
Is it possible to create a footer div that sits at the bottom of a site regardless of how much information is present in the middle?
Currently the div I have is positioned depending on how much content i have in the body.
See also:
How do you get the footer to stay at the bottom of a Web page?
I am by no means a css expert, but this works for me across the major browsers:
.d_footer
{
position:fixed;
bottom:0px;
background-color: #336699;
width:100%;
text-align:center;
padding-top:5px;
padding-bottom:5px;
color:#ffffff;
}
Float the content div and have the footer div use clear: both.
I know I marked this as being answered but I've run into another problem as a result. The footer sits nicely at the bottom of the page, however, if the content goes past the footer, the footer simply floats over the content.
Is there a way to keep the footer at the bottom of the page without it overlapping if the content goes past the bottom?
My gut feel is using an iframe but Im not sure how to do it.
JonathanMueller is right, that works perfectly.
I had been looking through posts trying to do it like this. All I could find was fixed to the bottom of the window.
Thanks!