I'm having difficulty figuring out why my sticky footer is working on the main page of my site, but not on another. The paragraph in the footer div stays at the bottom of the page, but the background div floats to the top of the page behind the navigation bar.
Here's a fiddle of the page with the broken footer: https://jsfiddle.net/justaflurg/hxhbnmcs/
And the homepage with the working footer: https://jsfiddle.net/justaflurg/p4efkvkq/
I'm using an this CSS create the footer–
.pagewrap {
min-height: 100%;
margin-bottom: -65px;
display: block;
}
.pagewrap:after {
content: "";
display: block;
}
.footer, .pagewrap:after {
height: 65px;
margin-bottom: -65px;
}
.footer {
display: block;
background: #E0E0E0;
color: #999;
border-top: solid 1px #DDD;
}
Try this
.footer, .pagewrap:after {
height: 65px;
margin-bottom: -65px;
float: left;
}
Related
We are writing a custom website, but we want it to look similar to Wordpress, so we have written the code with the 'sticky' left position bar, and the scrolling right one.
But when you bring the page inward, the right columns wraps under the left one. Any ideas why and how to resolve?
Here is the CSS code:
html, body, section, article, aside {
min-height: 100%;
}
.sidemenu
{
position: sticky;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
float: left;
}
.menu-link a
{
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody
{
float: left;
max-width: 95%;
text-align: left;
padding: 20px;
}
So you have two DIVs, left is 'sidemenu' right is 'pagebody'.
Hope you can help.
To fix the position of the sidebar, you need to used position: fixed;. After that, wrap the sidebar div and body div into one container and set its width to 100% (I also gave the body a margin of 0 at this point to remove gaps).
Give the body div a left-margin equal to the width of the sidebar, then set the width of the body using a calculation (as shown below). I also gave it a really long height to demonstrate scrolling.
You can omit your floats.
Here is the adjusted code:
html,
body,
section,
article,
aside {
min-height: 100%;
margin: 0;
}
.main {
width: 100%;
}
.sidemenu {
position: fixed;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
}
.menu-link a {
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody {
width: calc(100% - 199.75px);
text-align: left;
padding: 20px;
height: 300vh; /**** used to demonstrate scrolling ****/
margin-left: 160px;
background-color: #BBB;
}
<div class="main">
<div class="sidemenu">
Side Menu
</div>
<div class="pagebody">
body
</div>
</div>
My first question here. Hope this is OK.
I'm trying to redo a webpage I hacked together a long time ago. Right now it's barebones and I'm just trying to get some of the main stuff to work. I have a header, navbar (on the left), a content section (on the right), and a footer. The navbar and content are under and above the the header and footer, respectively. Within the navbar I have some "buttons" that I want to scroll down and up when the page scrolls. It's kinda working except for one thing:
When the buttons scroll to the bottom, they run out of the navbar and into the footer. When scrolling up, it's fine, they do not run into the header. Just when they scroll down. I want to keep these buttons contained within the navbar.
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link type="text/css" rel="stylesheet" href="newpage.css"/>
<title>Daruma An Farms</title>
</head>
<body>
<div id="header"></div>
<div id="navBar">
<div class="inner" id="inner1">Home</div>
<div class="inner" id="inner2">About</div>
<div class="inner" id="inner3">Shop</div>
<div class="inner" id="inner4">Contact</div>
<div class="inner" id="inner5">日本語</div>
</div>
<div id="content"><p>Hello. This is the new page</p>
<p>Hopefully this stuff will work</p>
<p>And we can get it up soon!</p>
</div>
<div id="copyright">Copyright</div>
</body>
</html>
Here is the CSS:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: white;
background: #95954a;
}
div {
border-radius: 5px;
}
/* This is the header ID. I would like a static pic to go here,
centered, and stuck at the top. Right now I just have a block header
as a place holder.
*/
#header {
height:259px;
width: 100%;
background-color: #965d4a;
background: url("images/logo4.jpg") no-repeat center top;
}
/* This is the navbar, which will contain the navigation buttons.
I want it to be long enough to contain all the buttons and
have a bit of empty space on the bottom.
*/
#navBar {
height: 700px;
width: 13%;
background-color: #965d4a;
position: absolute;
margin: 5px 0px 5px 130px;
float: left;
}
/* This is the CSS for the "buttons" in the nav bar.
I want them to stay on the page when the user scrolls.
I have separated the common elements into the .inner class
and put the unique elements into the IDs.
*/
.inner {
height: 50px;
width: 12%;
position: fixed;
margin-left: 6px;
padding-top: 10px;
text-align: center;
font-size: 2em;
background-color: #5d964a;
}
#inner1 {
margin-top: 5px;
}
#inner2 {
margin-top: 75px;
}
#inner3 {
margin-top: 145px;
}
#inner4 {
margin-top: 215px;
}
#inner5 {
margin-top: 285px;
}
/* This is the content area. Will have the content of the site.
I would like this to contain all the content with no extra space
at the bottom for large content areas, such as the about page
or the shop page. But I don't mind it having some extra space
at the bottom for the low content pages, like contact.
*/
#content {
width: 700px;
height: 680px;
float: right;
background-color: #965d4a;
margin: 5px 130px 5px 0px;
padding: 10px 10px 10px 10px;
}
/* This is the copyright section. I want this at the bottom of every
page. Small type, centered.
*/
#copyright {
width: 879px;
height: 50px;
background-color: #965d4a;
clear: both;
font-size: .7em;
text-align: center;
margin-left: 130px;
margin-right: 130px;
}
I hope I have that all formatted right and you can see where my problem is. I think it should be something I'm missing within the .inner class s and the #navBar ID .
Thanks for your help.
You need to adjust the height of the header, see fiddle https://jsfiddle.net/sxh0n7d1/35/
If you want it to be more diverse you will need to use javscript.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: white;
background: #95954a;
}
div {
border-radius: 5px;
}
/* This is the header ID. I would like a static pic to go here,
centered, and stuck at the top. Right now I just have a block header
as a place holder.
*/
#header {
height:180px;
width: 100%;
background-color: #965d4a;
background: url("images/logo4.jpg") no-repeat center top;
}
/* This is the navbar, which will contain the navigation buttons.
I want it to be long enough to contain all the buttons and
have a bit of empty space on the bottom.
*/
#navBar {
height: 680px;
width: 13%;
background-color: #965d4a;
position: absolute;
margin: 5px 0px 0px 130px;
float: left;
}
/* This is the CSS for the "buttons" in the nav bar.
I want them to stay on the page when the user scrolls.
I have separated the common elements into the .inner class
and put the unique elements into the IDs.
*/
.inner {
height: 50px;
width: 12%;
position: fixed;
margin-left: 6px;
padding-top: 10px;
text-align: center;
font-size: 2em;
background-color: #5d964a;
}
#inner1 {
margin-top: 5px;
}
#inner2 {
margin-top: 75px;
}
#inner3 {
margin-top: 145px;
}
#inner4 {
margin-top: 215px;
}
#inner5 {
margin-top: 285px;
}
/* This is the content area. Will have the content of the site.
I would like this to contain all the content with no extra space
at the bottom for large content areas, such as the about page
or the shop page. But I don't mind it having some extra space
at the bottom for the low content pages, like contact.
*/
#content {
width: 700px;
height: 680px;
float: right;
background-color: #965d4a;
margin: 5px 130px 5px 0px;
padding: 10px 10px 10px 10px;
}
/* This is the copyright section. I want this at the bottom of every
page. Small type, centered.
*/
#copyright {
width: 879px;
height: 50px;
background-color: #965d4a;
clear: both;
font-size: .7em;
text-align: center;
margin-left: 130px;
margin-right: 130px;
}
I have used Ryan's sticky footer in asp.net project. I have used it on master page and on child master page I have a vertical navbar. The problem is the footer goes behind the navbar. I want it to be on the top of the navbar. Also there is is a scrollable horizontal space on right side in child master page which I dont want. Also some of my pages have less content so how can I change thier height according to my wish so that I can set the footer accordingly.
vertical navbar:
#sidebar-nav ul{
background-color:#2ca8d2;
color: white;
height: 100%;
padding: 0;
position: fixed;
left: 0;
top: 50px;
width: 19%;
z-index: 2;
display:block;
}
#sidebar-nav li a {
display: block;
color: white;
padding: 8px 0 8px 16px;
text-decoration:none;
font-size:16px;
border-bottom: 1px solid #fff;
}
#sidebar-nav li a.active {
background-color: #4CAF50;
color: white;
}
#sidebar-nav li a:hover:not(.active) {
background-color: orangered;
color: white;
}
footer:
* {
margin: 0;
}
form, html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto 200px;
}
.footer, .push
{
height: 200px;
background-color:#333;
z-index:10;
}
.footer, .push {
clear: both;
}
I want it to be on the top of the navbar.
Since you have
z-index: 2;
on your vertical navbar, you would need a higher z-index, such as 3, on the main container of your footer. You have z-index 10 on the footer class, but I dont know whats nested in what with your html file. Could you post the html code for the footer and vertical navbar too?
My website container has a width of 95%. I'm trying to create a navigation which spans the full width of my container. It works fine until I add the 'position: fixed;' to the navigation, it then just ignores the container and spills outside the container.
below is my CSS code and a link to a picture.
#page {
width: 95%;
max-width: 1440px;
height: auto;
margin-left: auto;
margin-right: auto;
border: solid 1px #000;
}
.nav {
width: 100%;
background-color: fuchsia;
height: 50px;
position: fixed;
}
.nav ul {
list-style: none;
}
.nav ul li {
float: left;
display: block;
padding: 5px;
background-color: fuchsia;
line-height: 40px;
}
Image of problem... http://i.imgur.com/pZEbe.png
Thanks for any help! It's much appreciated!
you are giving position:fixed which makes your navigation to come out of the parent div or element.
Add something like this in your navigation element:
.nav
{
width:95%; /*dont give width as 100% */
margin:0 auto; /* for center alignment purpose */
background-color: fuchsia;
height: 50px;
position: fixed;
}
This question would have been a duplicate of header and footer fixed, content scrollable and Fixed header, footer with scrollable content if not for one detail, which is very important for me - I do not want to specify a fixed height and width for the content.
http://jsfiddle.net/mark69_fnd/PWRDa/ contains a real form with dummy data, demonstrating the problem - resizing the window makes the scrollbars appear, but on the page, rather than on the form. In the current layout the menubar and the statusbar are scrolled out of view and I want them to remain fixed, while the form data gets scrolled.
Please, do not provide a solution with absolute width and/or height. I prefer calculating them in javascript, rather than baking them into the CSS, unless it is 100%. Of course, pure HTML/CSS solution is preferable.
Here is the CSS:
html, body, .yui3-app-views {
height: 100%;
width: 100%;
}
.container {
position: relative; /* needed for footer positioning*/
margin: 0 auto;
height: auto;
min-height: 100%;
background-color: #eee;
}
.content {
background-color: #ddd;
padding: 0em 0em 2em; /* bottom padding for footer */
overflow: auto;
}
#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
background-color: #ccc;
}
#status {
border: solid 1px #000000;
}
#status .error {
color: red;
font-weight: bold;
}
/* ------------------------------------------------------------------------------------*/
.char {
display: inline-block;
vertical-align: top;
}
.line {
white-space: nowrap;
}
/* --------------------------------- fieldset and legend ------------------------------*/
.fieldset {
border: 2px groove threedface;
margin-top: 1em;
}
.fakeFieldset {
padding: 2px;
}
.fieldset > div.legend:first-child {
display: inline-block;
text-align: left;
margin-left: 10px;
background: #ddd;
position: relative;
top: -0.7em;
}
.merge-bottom {
margin-bottom: -2px;
}
/* ------------------------------------ Forms ------------------------------*/
form div {
white-space: nowrap;
}
form select, form input {
margin: 2px;
border: 1px groove;
}
form label:not(.same-line) {
width: 8em;
text-align: right;
display: inline-block
}
#cust-balance {
text-align: center;
}
.ccExpDate {
width: 2em;
}
#cust-salutation {
width: 4em;
}
.postalCode {
width: 7em;
}
#cust-ccAddress {
width: 20em;
}
// Updated with input from asker.
This works great. Mine have widths set to 100%, but of course you can do that in JS if you want.
You need to give the header and the footer position:fixed
I also put some padding in the .content div to make room for the top header.
Like the following:
html, body, .yui3-app-views {
height: 100%;
width: 100%;
}
.content {
background-color: #ddd;
padding: 2em 0em; /* padding for footer and header */
}
.menubar {
position: fixed;
top: 0px;
width: 100%;
z-index:1;
}
#footer {
position: fixed;
width: 100%;
bottom: 0; /* stick to bottom */
background-color: #ccc;
}