html, body{
margin: 0;
padding: 0;
height: 100%;
background-color: #23395b;
}
footer{
background-color: #012a36;
position: absolute;
width: 100%;
bottom: -300px;
margin-top: -200px;
height: 80px;
clear:both;
padding-top:5px;
padding-bottom: 5px;
}
footer ul{
text-align: center;
padding-top: 2%;
}
footer li{
list-style: none;
display: inline;
padding: 2%;
}
footer a{
text-decoration: none;
color: white;
}
footer a:hover{
color: #00cecb;
text-decoration: none;
}
<footer class="footer">
<ul>
<li>HOME</li>
<li>HOW IT WORKS</li>
<li>CONTACT</li>
<li>HELP</li>
</ul>
</footer>
Trying to move the FOOTER to the bottom of the page. I have add absolute to the position but the body/html has increased when I change the bottom measurement. I have add div id = wrap but its look still same which leave lots of amount of space after the footer.
Ryan Fait's Stick Footer:
* {
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -80px;
/* the bottom margin is the negative value of the footer's height */
}
footer,
.push {
height: 80px;
/* '.push' must be the same height as 'footer' */
}
Note: You'll have to remove the top and bottom padding on the footer element
jsFiddle
Make position: relative for body and bottom: 0 for footer. Also remove margin-top from footer.
Related
My content div that overlaps the header div in my CSS code as per the attached image. Both the content and side-nav divs should be below the header section.
I tried changing the value of position property for the elements but it doesn't work. I also tried introducing top property to the content section to be as same as the side nav but it didn't work too
body {
font-family: "Lato", sans-serif;
font-size: 1.6rem;
line-height: 1.7;
font-weight: 400;
color: #777;
padding: 0;
box-sizing: border-box;
}
.container {
background-color: orangered;
margin: 0;
max-width: 100%;
width: 100%;
}
#media only screen and (max-width: 75em) {
.container {
margin: 0;
max-width: 100%;
width: 100%;
}
}
.header {
font-size: 1.4rem;
height: 8vh;
background-color: #3394e3;
border-bottom: var(--line);
top: 0px;
position: fixed;
width: 100%;
/*
display: flex;
justify-content: space-between;
align-items: center;*/
}
.side-nav {
position: fixed;
margin: 0px auto;
height: 100%;
float: left;
top: 8vh;
clear: both;
background-color: #fff;
bottom: 0;
}
.content {
background-color: #f4f4f4;
min-height: 93vh;
width: 85%;
float: right;
}
.footer {
background-color: green;
height: 7vh;
width: 85%;
float: right;
color: red;
}
<div class="container">
<div class="header-fixed">
<header class="header">
</header>
</div>
<nav class="side-nav">
</nav>
<main class="content">
</main>
<footer class="footer">Footer</footer>
</div>
Your .header has a position:fixed which takes it out of the normal flow of a webpage. So since it is taken out (essentially placed on a different layer of the page flow), your content is relatively positioned in the normal flow. As the .header is taken out of the flow, the .content is technically the first item in the flow of the page now.
So you will just need to give the .content a margin-top that is equivalent to the height of your .header.
Your .sidebar also has a position:fixed, so it's on a different layer, so it doesn't care about where it is placed in relation to the .header. So that's why you had to manually position it and give it a top:8vh to put it 8vh down from the top of the window.
So I recently added a sort of bubble-slideshow esc thing to my website to make it a bit better. For some unexplainable reason this pushed my footer down to the bottom of my page (and it also extended the page downwards so now I have to scroll even though everything should be able to fit on the page). I was screwing around with it yesterday to figure out how to fix it (I'm not very experienced at CSS), and I couldn't find the problematic line. Now today I check my localhost and the page is completely screwed up and the footer is half way up the page, shall I note that I still have the option to scroll even though beyond half way down my page it's entirely blank.
Below is my CSS, involving the entirety of the different styles I used to make the footer (which is probably more than necessary, but again, noob). It was definitely different last night, hence why it's all screwed up today, but my recent backup doesn't have the footer.
html,
body {
margin: 0;
padding: 0;
height: 90%;
}
#container {
min-height: 100%;
bottom: 0;
position: relative;
}
#footer {
width: 100%;
height: 60px;
bottom: 0;
background: #DADADA;
display: block;
}
ul2 {
list-style-type: none;
margin: 0;
text-align: center;
display: block;
bottom: 0;
padding: 20px 16px;
}
li5 a {
text-family: verdana;
color: black;
padding: 20px 20px;
text-align: center;
text-decoration: none;
}
<div id="container">
<div id="footer">
<ul2>
<li5>Contact Us
</li5>
<li5>A test project</li5>
<li5>About
</li5>
</ul2>
</div>
</div>
change your height:90% to 100% in html/body set position:absolute or fixed in #footer (depending if you want to scroll and let footer fixed or not, it was unclear to me)
Note: there isn't property text-family, use font-family instead
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
bottom: 0;
position: relative;
}
#footer {
position: fixed; /* or - absolute - */
width: 100%;
height: 60px;
bottom: 0;
background: #DADADA;
display: block;
}
ul {
list-style-type: none;
margin: 0;
text-align: center;
display: block;
bottom: 0;
padding: 20px 16px;
}
li a {
font-family: verdana;
color: black;
padding: 20px;
text-align: center;
text-decoration: none;
}
<div id="container">
<div id="footer">
<ul>
<li>Contact Us
</li>
<li>A test project</li>
<li>About
</li>
</ul>
</div>
</div>
Also you can try this code, no need for extra container:
<html>
<head>
<style>
html,
body {
margin: 0;
padding: 0;
min-height: 100vh;
position: relative;
}
#footer {
width: 100%;
bottom: 0;
background: #DADADA;
display: block;
position: absolute;
}
ul {
list-style-type: none;
margin: 0;
text-align: center;
display: block;
bottom: 0;
}
li{
font-family: verdana;
color: black;
padding: 20px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
</style>
</head>
<body>
<div id="footer">
<ul>
<li>Contact Us
</li>
<li>A test project</li5>
<li>About
</li>
</ul>
</div>
</body>
</html>
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?
I am trying to make a "bar" that stretches over the top of my web page (like Facebook). Then I have some navigational links on the right. However if you resize the page and then use the horizontal scrollbar the red background is missing.
http://jsfiddle.net/ejJnL/embedded/result/
http://jsfiddle.net/ejJnL/
<div class="header-container">
<div class="header">
<ul class="main-navigation">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<div class="clear"></div>
</div>
</div>
CSS:
.header-container {
background-color: red;
height: 40px;
width: 100%;
}
.header {
height: 100%;
line-height: 40px;
margin: 0 auto;
width: 960px;
}
.header img {
vertical-align: middle;
}
.main-navigation {
float: right;
list-style: none;
margin: 0;
padding: 0;
}
.main-navigation li {
float: left;
}
.main-navigation a {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
.header-container {
background-color: red;
height: 40px;
position: fixed:
left: 0;
right: 0;
}
Fix the position and declare it attached to the left and right edges of the viewport as shown above.
You don't need declarations of width: 100% or height: 100% as div are already block elements and will fill their containers.
You should declare body { margin:0} if you want the bar to extend to the page edges.
You should probably use max-width not width for your .header so the menu still shows in a small window.
You may also want to add an overflow: none to the .header-container
http://jsfiddle.net/SbpZG/
Fixed width on the .header-container and position: relative on the .main-navigation
We have to support the last two revisions of IE, Chrome and Firefox and I have a feeling this isn't possible with IE 7/8, but perhaps I'm missing something
I have a footer that is moved up behind a content area by -280px. This content area is moved up over a header area by -230px. As a result I have a blank area at the bottom of my page of approx 320px. I can fill this and make it appear to be the bottom end of the gradient, but I'd really rather just cut it out, so there's no scroll bar to nothing.
In the example code below -
<div id = "page">
<div id = "topbar">
</div>
<div id = "header">
</div>
<div id = "content">
</div>
</div>
<div id = "footer">
I AM THA FOOTAH<br/> So much cooler than the header these days
</div>
body
{
/* background-color: #040e22; */
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
div
{
display: block;
}
#page
{
background-color: white;
margin: 0px auto;
padding: 0px;
position: relative;
}
#topbar
{
height: 60px;
background-color: #112247;
color: white;
position: static;
}
#header
{
background-color: navy;
color: yellow;
height: 240px;
position: relative;
}
#content
{
min-height: 280px;
background-color: green;
width: 480px;
margin: auto;
position: relative;
top: -230px;
z-index: 1;
height: 2000px;
}
#footer
{
/*background: url("footerGradient.png") repeat-x 50% 0%;*/
background-color: navy;
color: white;
text-align: center;
padding-top: 60px;
height: 220px;
top: -280px;
position: relative;
}
.inner
{
width: 940px;
margin: auto;
}
how do I get rid of the white under the navy footer?
just change in your #footer from top: -280px to margin-top: -280px voila!
position relative will move the element relatively to its original location but will perserve its space thus rendering empty area, negative margin will move your element including its bounding space and will do what you need.
You can change the footer position from relative to static like so:
#footer
{
/*background: url("footerGradient.png") repeat-x 50% 0%;*/
background-color: navy;
color: white;
text-align: center;
padding-top: 60px;
height: 220px;
bottom: 0px;
width: 100%;
position: fixed;
}
You might want to take a look at this sticky footer page-- you can modify that technique by NOT making the height of the footer and the negative margin of the previous element the same; you would want the negative margin to be greater.