I'm using Bootstrap Cover Template to make a clean website with few content: basically some text and an image.
Header and footer overlaying the website content as you can see in this screenshot:
Website: merdanacabeca.com/adrenalina/
What is the best solution in this case?
Media-query?
I know that I can add top-margin to the content <div> and change footer's position to static instead of fixed. However, this leads to other problems in different screen resolutions (smaller for example).
I'm looking for the best approach.
The problem derives from the fixed position of .masthead & .mastfoot classes.
Try removing the fixed position of .mastfoot and the following for .masthead and .cover :
.masthead {
position: fixed;
top: 0;
background: #333333;
}
.cover {
padding: 0 20px;
margin-top: 115px;
}
if i've understood your question correctly, you're trying to stop the footer with text "Desenvolvido por ..." from overlaying that white button (correct me if not).
well it's because of the padding-bottom of the .inner class that the text stands there. you can reduce that...
also i don't think that you need position: fixed for footer. cause usually it stay at the bottom of the page.
you can also assign margin-top to the <div class="inner cover"> to make the problem with the header go away
Related
I am setting a footer and I want it to be fixed at the bottom even if I am at the top of the page the footer is still visible
I tried using position: fixed , flex
But none of them worked
footer
{
margin-bottom:0px;
background-color: black;
background-color:rgb(11,132,69);
color: white;
}
<footer class="container-fluid text-center">
Some text
</footer>
you got to have a lot of content that is first of all scrollable and then give your footer div the following properties:
CSS
position: fixed;
left: 0;
bottom: 0;
One small note is that you got to have some content inside the footer HTML element in order for it to even render I provided the following text A Footer! (shown in the example below)
Other than giving a position: fixed you need to guide the div where to be fixed it. Its default is to be fixed top left I believe. So to have it fixed to the bottom you can add left: 0 and bottom: 0 to have it behave as you desire.
Code Playground Example
I made a small example for you to check out that is working feel free to play around here It looks like this and as you can see the scroll handle is midway through the scroll track marked in red while the footer is fixed to the bottom as you wanted it to.
Demo
One Small Note
position: fixed is what you desire. It will fix the divs position without being dependent on scroll event. position: sticky is a sort of combination of position: relative in default that in turn will shift to become position: fixed when you scroll down enough and the div will then be fixed.
- position: sticky is currently experimental and not supported in IE.
You can set footer fixed to bottom of the page no matter how much content is available in your page. The footer will remain at the bottom of your browser window by using below given css code.
footer {
position: fixed;
bottom: 0;
}
I want to add a logo at the bottom of the very first page. Ideally I'd position:absolute it bottom:0 - but anything positioned to the bottom in wkhtmltopdf doesn't seem to work.
This is a problem because the logo is dynamic and could have different heights depending on the aspect-ratio of the uploaded image.
I see that I can add a footer, but this adds it to all pages, and I only want this on one page.
What are my options? Do I have to position-absolute it from the top? If so, what if the page size changes? This needs to work in A4 and US Letter.
I was having the same issue and solved by actually adding a width to the element. So, for the element I want to stick to the bottom I have this css:
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
This didn't work for me. (using python's pdfkit)
I had a one page document and I wanted a footer.
I had to set the height of the page to be the height of a sheet of paper (<body style="height: 297mm">) and then absolute position worked correctly.
Had the same issue, used the answer of Carlo but changed it to use the top margin since it is using the document margins. This way the element was always on the bottom of the first page.
.footer {
position: absolute;
top: 700px;
width: 100%;
}
I want to display my footer at the bottom of the page, relative to the content area. So it should adapt if my browser is smaller or larger, up until where the content area stops.
I tried to follow this link but I can't seem to get it to work on my website.
I added the PUSH div at the bottom of my content area
I set the correct heights and adjustments in the css
My footer is still displayed half way on my screen and also messes up the titles. The guys that sold me the Wordpress theme are reluctant to help me ...
If anyone could guide me in the right direction that would be a great help!
I think this could do what you want:
body {
padding-bottom: 50px;
/* Set a padding-botton equivalent
to the height of your footer
this is for preventing the
footer to be covered because
of its z-index
*/
}
footer{
position: fixed;
bottom: 0;
width: 100%;
z-index: -999;
}
Hope it works ;)
Add the following code to your css:
footer{
position: fixed;
bottom: 0;
width: 100%;
z-index: 999;
}
The footer will be always on the bottom.
Ok so the issue here is this, you can stick the item to the bottom as #Dzhambazov suggested either with position:absolute or position: fixed it is going to stay in place at the bottom even if that is halfway up your content.
So you can go with other alternates like: How do you get the footer to stay at the bottom of a Web page?
Mentioned in the comments, but this is not going to be as easy with a prebuilt theme as you will be fighting with the theme dev's structure.
What you could do as a fix to make it more bearable is to increase the minimum height of the content so that it "fakes" the footer further down, this has its draw backs and could mean that your footer is off the bottom of the view port, but if it is irritating you to that level. you could try.
#content {
min-height: 200px;
/* forces the content block to take up space */
}
hope that helps other wise stick the footer to the bottom as mentiones and have it always display, but note that may trash mobile so you will want to remove the positioning via a media query for phones etc.
I want to achieve this example but with the difference that in case there is too much content on my page (between navbar and footer) that this content is down-scaled / squeezed to fit inside (i.e. so that the footer is still visible at all screen resolutions, making it a "fixed footer" in CSS jargon). I'm using bootstrap 3.1.1 and it would be cool if anyone has a solution that is bootstrap-friendly :). Best!
You could always go with a fixed footer and have any additional content scroll underneath it.
Heres a jsfiddle as an example:
html {
min-height: 100%;
position: relative;
}
body {
margin-bottom: 1.5rem /* or whatever your fixed footer height is */
}
/* and assuming your footer has id="footer" */
#footer {
position: fixed;
bottom: 0;
height: 1.5rem;
overflow: hidden;
}
Please see this answer here, and the example it refers to here. It's going to be a bit different I assume if you've got pictures and everything though. If you could provide an example of your content on jsFiddle we could probably help you scale it a little better.
I've been having problems with my DIV layers - the text goes beyond the DIV footer image, but it's not entirely the DIV background's fault 'cause it DOES repeat... Up to a certain extent. :( I can't seem to figure out how to force the text to stop overextending past the footer DIV tag WHILE keeping the DIV background going.
My "container" element houses the images and the other two elements. The "main" element is where the text goes, and the "footer" element is the image that comes after the end of the text.
In this image here, the text goes over the footer image - green arrow is to show where the footer image starts, red arrow is to show where I'd like the text to stop. The background image in the container works for awhile but then stops, so I suppose it doesn't expand correctly...??
I tried to play around with the code to try and fix it - from trying to add padding-top/bottom, to adding the repeating background stretch in the body part, to playing around with the position properties, to trying out the sticky footer (except my layout is only one column... the navigation is part of the layout in the CSS), I just can't seem to get it right.
This is as best as I can get it. :( Do you guys have any helpful solutions and/or tips?? Thanks so much!
Link: http://bubble-wrapped.net
#container {
position: absolute;
width:1057px;
height: 100%;
background-image:url(layout/bw-div.png);
background-repeat: repeat-y;
border:0px;
text-align:left;
padding-bottom:50px;
}
#main {
position: absolute;
top: 256px;
left: 126px;
width: 830px;
margin: auto;
}
#footer {
height: 358px;
width: 1057px;
bottom: 0;
position: static;
background: url(layout/bw-footer.png) no-repeat;
}
It looks like you've set the footer to a set height, which is why the text is overflowing.
If you're find with cut-off text, try adding a CSS property to the footer: overflow:hidden or overflow:scroll.
If you don't want overflow, then try removing the height property from the footer or setting it to height:auto or something similar.
Has to do with position: tag & height: tag
I suspect it has to do with the element within the container and not just the container.
It would help if you would post most of your code so we can see if other things break it.
Your question doesn't really say what your looking to do, which doesn't help us help you.
If its anything like Possible same situation & answer #StackOverFlow
Hope this helps you!