The web page layout of my website look something as follows:
The web page layout of my website look something as follows:
<body>
<div class="container">
<div class="sidebar">
</div>
<div class="content">
</div>
</div>
<div class="pre-footer">
</div>
<div class="footer">
</div>
</body>
Css:
body {background:#eaeaea url('../images/bg/sfere.jpg') no-repeat top center fixed;}
.footer {float:left;width:100%;height:67px;background:url('../images/bottom.png') bottom center;bottom:0px;left:0px;}
.container{padding-top:5px;margin-left:100px;margin-right:auto;}
.sidebar {float:left;width:220px;min-height:610px;text-align:center;}
.home {margin:178px 0 0 100px;padding:0 10px 0px 10px;width:800px;float:left;}
.pre-footer {float:left;width:98%;height:100px;position:relative;background:url('../images/pre-footer.png') bottom center;left:15px;bottom:-32px;}
All the elements are appearing fine in layout. However, the problem is when the height of the container is less, the footer elements stick below the container and don't stay in the footer position. Similarly, if I manually fix the height as 600px to make it look like a footer, on browser resize, the footer still stick below the container and doesn't look like a footer.
How do I rectify this problem?
Use fixed position for your footer.
div.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
max-height: 50px; /* change this as needed */
}
and specify a bottom padding to your body to ensure all content is visible when scrolled.
body {
padding-bottom: 50px; /* change this to the max-height given for your footer */
}
Related
I have an image as my header and footer and it does not reach the edges on my webpage. If my browser is full screen, it looks good. But if I shrink down the webpage, then it ends up cutting off on the right side before it reaches the edges.
How can I fix this so that no matter the size of my browser, the header and footer reach from side to side 100% of the way?
I have my HTML in a container so that it doesn't change position when I resize the browser. This is the gist of how my CSS and HTML are set up...
Here is a JSFiddle that shows my problem. If you extend the window, you can see that the header/footer takes up every inch that it should. However, if not, you can see the blank space to the right:
https://jsfiddle.net/t5gb4as7/
CSS:
.container {
margin: 0 auto;
width: 1060px;
}
/* header */
h2 {
color: transparent;
background-image: url('header-footer.png');
width: 100%;
height: 102px;
margin-bottom: 20px;
}
/* footer */
h3 {
color: transparent;
background-image: url('header-footer-turn.png');
width: 100%;
height: 102px;
}
HTML:
<body>
<div class="wrapper">
<header>
<h2>test</h2>
</header>
<div class="container">
//more
//html code
//here
</div>
<div class="push"></div>
</div>
<div class="footer">
<footer>
<h3>test</h3>
</footer>
</div>
you can use percentage as width to make it responsive like this
width : 100% ;
I would set the background image on a div, instead of the h2 or h3 tags as you are at the moment. The div width should be 100% and then it will cope with desktop and mobile.
You can use CSS media queries to load in a different background image for different screen sizes if you want to.
#header {
width: 100%;
background-image: url('images/name-of-background-image.jpg');
}
<div id="header">
<h1>Your header info here.</h1>
</div>
To start off I'm relatively new to CSS, Bootstrap and HTML. I want to position a responsive element at the bottom of the screen.
So I have this code which makes it behave responsively:
<div class="col-sm-12">
test
</div>
But how do I get it to stick to the bottom of the page? I already tried ID/ Class selectors with an absolute position. It moved the element to the bottom, but it wasn't responsive anymore.
One solution might be to wrap the desired element in another div, then target the wrapper element to fix it to the bottom of your screen. Your markup could look like:
<div class="fixed-container">
<div class="col-sm-12"><!--your content here--></div>
</div><!--end .fixed-container-->
And you styles could look like:
.fixed-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
This would affix the .fixed-container element to the bottom left of the viewport, and would set the width to 100% of the viewport. The layout-specific rules applied to .col-sm-12 would remain intact.
<div id="my-element" class="col-sm-12">
test
</div>
#my-element {
position: fixed;
bottom: 0;
}
Here is a simple solution to your problem.
Make sure your elements are in a wrapping div. Since you are using Bootstrap, use:
<div class="container-fluid">
Inside this container place your elements/sections including your footer:
<footer class="col-md-12">
Your footer should have the following CSS.
footer {
position: absolute;
bottom: 0;
height: 100px /* Height of your footer */
width: 100%;
}
Here is a fiddle. You can see the footer is at the bottom of the container which has a black border.
http://jsfiddle.net/gward90/ehf2wm83/
I am using the following basic html and css pattern (although my live code looks very different)
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
<div id="wrap">
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
</div>
to get a sticky footer to the bottom of my page.
I have applied two backgrounds to the body tag. One is a repeating wood texture then a shadow that goes on top. Both of these go under the footer.
It almost works, but on long pages (where you have to scroll down to see the footer) when you resize the browser window the shadow (and not the wood) creeps up the page. I have tried moving the shadow to the bottom right position but that doesnt work at all.
Here is a staging of it:
I have repeated the problem in FF and Safari
http://www.dnbsandbox.com/diablo/
Remove this from the first line of the css:
html {
height: 100%;
}
Here's my footer css:
.footer {
background-color: #CACACA;
font-size: 20px;
height: 50px;
padding-top: 10px;
position: absolute;
text-align: center;
width: 100%;
}
On multiple pages I have containers that content text. On some pages there is just enough content that the footer appears at the end of the page. But in some cases there isn't enough content so the footer still shows under the container but there is a gap between that and the end of the page. How can I fix this so it adjusts regardless of the length of the container?
like so
<!DOCTYPE html>
<html>
<head>
<title>My Amazing Footer</title>
<style>
html, body {
margin:0;
padding:0;
height:100%;
}
.wrapper {
min-height:100%;
position:relative;
}
footer{
background:#F1F1F1;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height:300px;
}
footer p{
text-align: center;
padding-top:100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="Content">
<p>HTML Ipsum Presents</p>
</div>
<footer>
<p>© My Website 2013. All Rights Reserved!</p>
</footer>
</div>
</body>
</html>
see we have the footer in the wrapper and the footer is absolute to the bottom and left of the wrapper then we just add the height of the footer to the wrapper bottom padding and some default height on the wrapper and body and that's sorted, take a look on jsfiddle here - http://jsfiddle.net/eTwJh/2/ and here is one with no content - http://jsfiddle.net/eTwJh/3/
Without seeing the corresponding HTML, it's a bit hard to guess what your issues might be. It sounds like there's a bottom margin on your main content that's pushing the page bottom downward past the footer when there's only limited content inside that main section.
To fix it, either adjust that margin or else change the positioning of the footer. At the moment, the position is absolute, which means that the footer is positioned based upon the its parent element in the HTML. Switching the positioning to relative will make it appear just after whatever element comes just before it in the HTML.
I suggest you read more about CSS positioning before trying to work on the issue further.
I've been tasked with changing a website around a bit, and right now, the website has a responsive layout that is 95% of the viewports width, body-wise, so it will adjust if resized.
This is great, I want it to keep doing that, but I want the footer to have a side-to-side calm blue background, and I'm not able to come up with a way to do that for some reason.
Can anyone help?
Try this - DEMO
HTML
<div id="container">
<h1>TITLE</h1>
<section>MAIN CONTENT</section>
<footer> FOOTER </footer>
</div>
CSS
#container {
width: 95%;
margin: auto;
background: honeydew;
}
footer {
position: absolute;
width: 100%;
background: beige;
margin-left: -2.5%;
}
body contains all the other elements. You thus aren't supposed to have one larger than body inside of it.
Although you could position it absolutely to the bottom-left corner (position: absolute; bottom: 0px; left: 0px;) with a width of 100% and possibly make it work, I'd suggest you instead make a container element, perhaps a div, inside of the body element that contains your 95%-width elements and place the footer outside of that container.
I am not sure of which method is more reliable, however.
Have You tried to wrap existing 'header'component by other 'wrapper' component (div, span, etc.)? Example:
<div id="wrapper" width="100%"
<div id="header" width="95%">
some header stuff here
</div>
<!-- foo bar -->
<div id="footer" width="100%">
my footer
</div>
</div>