How can I stick this footer to the bottom of the page:
<footer>
<p>This is a Footer, Copyright © © 2017</p>
</footer>
https://jsfiddle.net/1d9m2frt/2/
footer {
text-align: center;
background-color: #e8491d;
color: #ffffff;
padding: 20px;
margin-top: 20px;
}
I tried position: fixed; but it doesn't stay fixed on the bottom of the page.
footer {
text-align: center;
background-color: #e8491d;
color: #ffffff;
padding: 20px;
margin-top: 20px;
position:fixed;
width:100%;
bottom:0;
left:0;
right:0;
}
thats all...
There's a few different ways to do this, you can in fact use position: fixed;
When using position: fixed; you will need to specify the position using top: ; right: ; bottom: ; or left: ; attributes. For maximum browser compatibility use both top/bottom and left/right. IE doesn't like you using only one of them.
In this instance you will also need to specify width: ;
Amend your JSFiddle CSS as below:
footer {
text-align: center;
background-color: #e8491d;
color: #ffffff;
padding: 20px;
margin-top: 20px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
Related
I have this div on my home page and want it to move with me when I scroll:
I tried using position:sticky; and position: fixed and adding top: 600px; but its not moving to the top its stuck at the bottom
.linkss {
color: #8892b0;
font-family: 'NTR', sans-serif;
font-size: 25px;
right: 10px;
top: 680px;
padding-right: 30px;
position: fixed;
}
.linkss h3 {
margin: 0px;
height: 50px;
color: #c9c1f5;
}
.linkss a {
border: 0px;
display: block;
padding: 0px;
margin: 0px;
font-size: 23px;
padding-left: 30px;
color: #c9c1f5;
height: 30px;
width: 110px;
}
<div className="linkss">
<h3>/ Links</h3>
/ Etsy Shop
/ LinkedIn
/ Instagram
</div>
The HTML should be "class" instead of "className"
<div class="linkss">
I tested your CSS after updating the HTML and the menu stayed fixed for me.
I think you can try position sticky.
.linkss {
position: sticky;
top: 0;
}
hi i have a problem my code looks like this(I'm a starter)
<div class="backtotop">
<a href="#top">
Back to topˆ
</a>
</div>
and my stylesheet has
.backtotop{
font-size: 30px;
width: 20%;
background-color: #b6aeac;
text-align: right bottom;
}
a{
text-decoration: none;
font-size:30px;
font-style: normal;
color: #23285a;
}
but it doesnt align
I want to show it at the bottom right of page but i dont want it to be fixed. The picture of absolute code used
Its back to top bottom I'm making
.backtotop {
font-size: 30px;
width: 20%;
background-color: #b6aeac;
position: fixed;
bottom: 0; // adjust as per need
right: 0; // adjust as per need
}
Use this Code for bottom right at page in css of
position: fixed;
bottom: 0;
right: 0;
Check the snippest:
.backtotop{
font-size: 30px;
width: 20%;
background-color: #b6aeac;
position: fixed;
bottom: 0;
right: 0;
}
a{
text-decoration: none;
font-size:30px;
font-style: normal;
color: #23285a;
}
<div class="backtotop">
<a href="#top">
Back to topˆ
</a>
</div>
UPDATED :
Checkout This By using position:absolute
.backtotop{
font-size: 30px;
width: 20%;
background-color: #b6aeac;
position: absolute;
right: 0;
bottom: 0;
}
a{
text-decoration: none;
font-size:30px;
font-style: normal;
color: #23285a;
}
<div class="backtotop">
<a href="#top">
Back to topˆ
</a>
</div>
UPDATED 2 :
If You want to div at center then remove bottom:0 and add top:50%;
Like This :
.backtotop{
font-size: 30px;
width: 20%;
background-color: #b6aeac;
position: absolute;
right: 0;
top:50%;
//bottom: 0;
}
And If it is fixed that you want to display BacktoTop Class Exactly Right To the Name Of Institute then simply align the div at right or if you use table structure then text-align:right in last .
My Be This will Helpful To You.
Still Ask If You Have Any Doubt.
I am trying to add a div to the side of my wrapper. It will be a link / button.
I want it to be able to slide up and down, fixed to the right hand side border when scrolling.
The button is:
#booknow {
position: absolute;
right: 0;
margin-left:25px;
text-align:center;
font-family: 'Raleway',sans-serif;
font-size:22px;
color:#ffffff!important;
font-weight:700;
line-height:26px!important;
text-transform:uppercase;
}
And the inner wrapper (Where the border is), is:
.wrapper_inner{
position:relative;
z-index:10!important;
padding:30px!important;
background:#fff!important;
border:1px solid #D4D4D4!important; }
HTML:
<div class="wrapper">
<div class="wrapper_inner">
<div id="booknow">
Book <br> Now
</div>
</div>
</div>
At the minute I have this:
If I set it to fixed it slides up and down but it won't position perfectly to the outside of .wrapper_inner.
The HTML wasn't that helpful, so I just threw something together. The color scheme is to display the elements. I removed .inner_wrapper and added the surrounding layout so it would be possible to demonstrate that #booknow floats. If you click the #booknow it'll scroll down to a faux form at the bottom.
Demo: https://plnkr.co/edit/qACqW4O4rJn7YHoPRWLy?p=preview
Full screen: https://run.plnkr.co/njw73AIIIuHXEooM/
Relevant CSS
body {
position: relative;
overflow-y: scroll;
overflow-x:hidden;
font: 500 16px/1.4 'Arial';
min-height: 100vh;
}
.spacer {
position: absolute;
bottom: -200px;
height: 60%;
}
#booknow {
position: fixed;
top: 30px;
right: 0;
float: right;
margin-left: 25px;
text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 22px;
color: #ffffff;
font-weight: 700;
line-height: 26px;
font-variant: small-caps;
z-index: 10;
background: #fc3;
padding: 10px;
width: 50px;
}
.wrapper {
position: absolute;
top: -110px;
margin: 25px;
padding: 5px 10px;
width: 100%;
border: 3px double grey;
min-height: 70px;
background: #eff999;
}
i want to place 4 rectancles with text in my website
something like this (blue is the color that specifies them!
http://imageshack.us/photo/my-images/42/983f.jpg/
and the real footer looks like this
http://imageshack.us/photo/my-images/545/aygh.jpg/
area with grey is the area with the links down
here is what i have
HTML
<div class="footer" id="footer">
<p>
About Us<span>|</span>
Terms and Conditions<span>|</span>
Privacy<span>|</span>
FAQ<span>|</span>
Advertise with us<span>|</span>
Careers
</p>
</div>
CSS
#footer
{
background: rgba(0,0,0,0.5);
color: White;
padding: 0;
text-align: left;
vertical-align: middle;
line-height:normal;
margin: 0;
position: fixed;
bottom: 0px;
width: 100%;
font-size: 1em;
clear: both;
height: 10%;
}
#footer p {
position: absolute;
bottom: 0px;
margin-left: 600px;
}
#footer a{
text-align: center;
color: white;
position: relative;
bottom: 0px;
margin: 20px;
}
#footer span {
bottom: 5px;
}
i dont want to change the
<p>
About Us<span>|</span>
Terms and Conditions<span>|</span>
Privacy<span>|</span>
FAQ<span>|</span>
Advertise with us<span>|</span>
Careers
</p>
i want to add another div with 4 sqare boxes with positions left, center-left, center-right and right
if you want the links to render horizontally across the page you can apply the following css.
div a
{
display:inline;
border:1px solid #000;
padding:5px;
margin:auto;
bottom:0px;
}
.footer{
position:absolute;
bottom:0px;
}
get rid of the <p> tag it is not needed
You can style the rest as needed. If you are looking for something more particular please update your question with specifics
here is a fiddle
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.