I am having trouble centering my footer () in the center of my page. I was able to get it to stay on the bottom of the page, but not center it.
I added left: 50% to the #footer, but the aligned it too far to the right. Also the <hr> tag is only running the span of the text beneath it. When I took it out of the div it was floating in the middle of the page. Any ideas on how I can center this (preferably using %, since I will be embedding it in another page which has different alignment settings).
Here is a link: http://jsbin.com/fajosekosu/2/edit
Your input is much apprecatied.
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 100%;
height: 100%;
text-align:center;
margin: 0 auto;
}
#footer {
text-align:center;
margin: 0 auto;
position:fixed;
bottom:0;
left: 50%;
}
a {
text-decoration: none;
color: black;
padding-right: 20px;
padding: 15px;
list-style: none;
display: inline-block;
}
a:hover {
color: white;
}
</style>
<meta charset="utf-8">
<title>Footer</title>
<link type="text/css" rel="stylesheet" href="/LESSON5/5_Signup_CSS.css">
</head>
<body>
<div id="footer">
<hr>
<footer>
Login
Create Account
Homepage
Logout
</footer>
</div>
</body>
</html>
add to footer css
width: 100%;
In #footer add:
left:0;
right:0;
Just add
width: 100%;
to your #footer rule:
http://jsbin.com/guxovaloci/2/edit?html,css,output
Alternatively, if you want a specified width other than 100%, use
left: 0;
right: 0;
You can use margin-left to bring it back from 50% left. Just add this to your footer:
margin-left: -190px;
left: 50%;
190 being half the width of your footer.
Really though, a better way to go about this process though is to fix your footer container and wrap the elements inside it in a div. Make that div an inline-block and center that. Also, your footer element should be the wrapper element.
HTML:
<footer>
<div class="footer-contents">
<hr>
Login
Create Account
Homepage
Logout
</div>
</footer>
CSS:
footer {
width: 100%;
position:fixed;
bottom:0;
}
.footer-contents{
display: inline-block;
}
Related
I have made footer for my website and it works fine until i press f11/go into fullscreen, where the footer is suddenly placed not all the way at the bottom but there is a space between my footer and the bottom of my page where there is only white/my background color. Shown in the pictures linked below:
Normal: https://i.stack.imgur.com/Cxi35.png
In fullscreen: https://i.stack.imgur.com/405JV.png
html
footer {
background-color: #000000;
border-color: #000000;
position: relative;
line-height: 10px;
width: 100%;
height: 50px;
bottom: 0px;
left: 0;
right: 0;
text-align: center;
line-height: 50px;
font-size: 10px;
}
<div class="footer">
<footer>
<a>text</a>
</footer>
</div>
You almost have it. If you want it to always be at the end of the page (even with scrolling), use position: absolute. To avoid it covering content at the end of the scroll, give the html tag padding on the bottom.
html {
padding-bottom: 50px;
}
footer {
background-color: #000000;
border-color: #000000;
position: absolute;
line-height: 10px;
width: 100%;
height: 50px;
bottom: 0px;
left: 0;
right: 0;
text-align: center;
line-height: 50px;
font-size: 10px;
}
<div class="footer">
<footer>
<a>text</a>
</footer>
</div>
There are multiple ways to solve this.
You can use add the following to your footer :
position : absolute;
bottom: 0;
left : 0;
width : 100%
The problem with this is that when the rest of the content on your page gets long enough to get to the footer's position, the footer would overlay it. You can solve this by adding a bottom margin to the last div before your footer that's at least the height of the footer.
Another way to deal with it is to give the body a minimum height of 100vh and either make it flex and give the footer a margin top of auto or give the footer a fixed height and give it a margin top of auto. Should work just as well.
(Quick tip if you didn't already know: there's footer tag in HTML that you could use instead of a div tag. It makes absolutely no difference but does provide semantic help for someone reading your code)
body{
background:white;
color:darksalmon;
padding:0;
margin:0;
height:100%;
width:100%;
}
.foot{
background:black;
color:lightblue;
bottom:0;
position:fixed;
width:100%;
height:18%;
}
<body>
<div class="foot">
<footer>
text
</footer>
</div>
Try this it worked for me when I was struggling with thesame problem
I have a header at the top that holds the following css rule:
position: fixed;
I also have some images that hold (and need to hold) the following css rule:
position: relative;
The problem is that my header always sits at the top of the page as the user scrolls, but when they get to the image (with position:relative) this sits on top of my header. But the header should always be on top. Is there another css rule I can apply to allow this to happen?
That problem might be with z-index. Give your header z-index:999999999 and your problem will be solved.
There is no need to set position as relative or absolute. You can use the following code:
<html>
<head>
<title>Document Edit</title>
</head>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
}
.wrap {
width: 100%;
height: 1500px;
background-color: #DDD;
}
.header {
width: 100%;
height: 60px;
background-color: #004080;
position: fixed;
}
.imgdiv {
width: 400px;
height: 400px;
float: left;
background-color: green;
}
</style>
<body>
<div class="wrap">
<div class="header"></div>
<div class="imgdiv"><img src="error1.png" width="400" height="400"></div>
</div>
</body>
</html>
In your header CSS add z-index property:
with:
z-index:10 // can be any number but should be greater than the z-index of image
in image CSS add:
z-index:5; //should be less than the z-index of header
Just set in CSS z-index: 9999 to the header div.
I'm a total novice in HTML/CSS, but I'm having trouble with centering a fixed h1 element. It refuses to center itself and sticks to the left side of the page. I've tried setting the margin to auto, but it doesn't do a thing. Here's the code:
h1 {
color: #580101;
font-family: RobotoRegular;
position: fixed;
text-align: center;
}
* {
background-color: #ecebe9;
}
#navbar {
color: #000653;
background-color: #00001a;
height: 40px;
border-radius: 3px;
}
.sidebar {
background-color: black;
width: 90px;
height: 500px;
float: left;
margin: 30px 0px 0px 0px;
}
And the HTML:
<!DOCTYPE html>
<html>
<head>
<link href="Fonts/stylesheet.css" rel="stylesheet" type="text/css">
<title>Webpage</title>
</head>
<body>
<div id="navbar"></div>
<div class="sidebar"></div>
<h1>Hello World!</h1>
</body>
</html>
So, what should I do?
if you want to use fixed position then add width: 100%; css rule for h1 css style.
other just remove position that will work.
DEMO
Change <h1> position:fixed to position:relative
the reason its sticking to the side of the page is because hence the name its fixed for example. you cannot tell it to freely float in the center if you have 'basically' demanded the element to be fixed, if that makes sense
you could do this
<style>
.test{
position:fixed;
right:0;
left:0;
text-align:center;
background:#EEEEEE;
</style>
<h1 class="test">test</h1>
When using position, specify it's position...left, top, or right, bottom.
Im trying to get a footer to stick to the bottom of my webpage but it floats only half way up. I've looked at a few examples and I cant see what im doing wrong. Any assistance would be greatly appreciated. My simplified code is shown below.
<html>
<head>
</head>
<body>
<div id = "wrapper">
<!--Wrapper div for the main content-->
</div>
<!--Footer container-->
<div class="footer">
</div>
</body>
</html>
--CSS--
body
{
height: 100%;
margin: 0;
padding:0;
background-color: #1A1F2B;
min-width: 960px;
}
#wrapper{
min-height: 100%;
}
.footer{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
display: block;
background-color: #232A3B;
}
If you want it to be at the bottom of the document:
.footer {
position: absolute;
bottom: 0;
}
If you want it to be at the bottom of the viewport:
.footer {
position: fixed;
bottom: 0;
}
If you'd like the footer div to be on the bottom of the page and span the entire width this would work:
.footer {
position: absolute;
bottom:0;
height: 150px;
width: 100%;
background-color: #232A3B;
}
HTML5 also supports the <footer> Tag which may make it easier for bots to process the information on your webpage. To change that just use footer { instead of .footer { and change the HTML markup.
I'm trying to create a website on my own for my art portfolio and I ran across http://ryanfait.com/sticky-footer/. I'm having trouble adding an extra element for it.
I have the following HTML structure:
<html>
<head>
<link rel="stylesheet" href="style.css" ... />
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
<img src="image.png>
</div>
</body>
And the following style.css:
.wrapper {
position: relative;
width: 800px;
margin: 0 auto -50px;
}
.footer {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0;
background-color:#000000;
text-align:center;
}
.footer img {
position: relative;
width: 400px;
top: -238px;
margin: 0 auto;
}
.footer a {
color: #fff;
text-decoration: underline;
border: 0;
}
.footer p {
position: absolute;
left: 0;
bottom: 4px;
width: 100%;
padding: 0;
color: #fff;
font: 0.8em arial,sans-serif;
}
with the layout.css:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */}
.footer { height: 50px; /* .push must be the same height as .footer */}
.push {
height: -100px; /* .push must be the same height as .footer */
}
I set the image negative so that it will overlap the main content when the window is resized. Also, I would like a sticky bottom "border" right below the image. However, no matter how much I mess with the margins or heights, I cannot get rid of the negative space that the above code creates. Do you have any suggestions?
**I figured it out.
The sticky-footer tutorial makes a sticky footer that stops at the border of the main body. What I wanted was a sticky footer that was a top "layer" that will go over the main body AND have a border element on the bottom.
I should not have used the 'top:-238px'. Instead, I nested a class under footer in html and css.
<div class="footer">
<img src="Image.png" width="400" height="238" />
<div class="bottom-border">
<p>Copyright (c) 2008</p>
</div>
</div>
and
.footer img {
position: relative;
width: 400px;
margin: 0 auto;}
.bottom {
position: relative;
width: 100%;
height: 20px;
margin: 0 auto 0;
padding: 0;
text-align:center;
background-color: #000000;}
Then, per sticky-footer's instructions in the 'layout.css' comments, I kept the .wrapper, .footer, .push height's all the same.**
Bit late but I can answer it anyway :) The problem is occurring as even though your image is relatively placed above the footer it still occupies the same place in the page. You want to use position:absolute;.
Here it is working
I made the following changes:
.footer img {
position:absolute;
}
.footer p {
position: relative;
height:4em;
}
Using position:absolute; will place the element in the position of the last non-static (default) element and remove it from the 'flow of the page'. So in this case it places it at .footer and takes it out of the page so it doesn't take up any space anymore.
EDIT: Also I broke the centering by changing it to absolute as margin:0 auto; won't work on position:absolute; elements. Add these rules to fix that.
.footer img {
left:50%;
margin-left:-200px;
}
I have easiest solution for sticky footer. Please simple add height: 100% on body and html. Then wrapper display: table . For adding element you can add any content/element inside of .w1 element .
And its footer flexible too.
Here is the code
html{height:100%;}
body{
margin:0;
height:100%;
background: #ccc;
}
#wrapper{
width:100%;
height:100%;
display:table;
margin:0 auto;
}
#footer{
width:100%;
overflow:hidden; /*for FF on Windows 7*/
display:table-footer-group;
height:1%;
background: #333;
color: #fff;
}
<div id="wrapper"> <!-- table -->
<div class="w1">
<p>header and content of the page</p>
</div>
<div id="footer"> <!-- table-footer-group -->
<p>footer content</p>
</div>
</div>