div.footer {
position: absolute;
background: silver;
height: 200px;
bottom: 0;
}
I've sticked my footer to the bottom of the page, but if the content is long it is covered by this footer, how to avoid that?
You can add a margin to the bottom of the content area the same as the height of the footer.
Take a look at this fiddle: http://jsfiddle.net/X3B4c/2/
HTML:
<div id="content">
<!-- many lines -->
</div>
<div id="footer">© 2014 SomeCompany Inc.</div>
CSS:
#content {
height: 100%;
margin-bottom: 30px; /*same as #footer's height*/
background: #555;
}
#footer {
position: fixed;
bottom: 0px;
height: 30px;
width: 100%;
background: #999;
}
The reason for that maybe because you have position set to absolute.
Could you link the full coding of html and css?
Here is something which might help.
<!DOCTYPE html>
<html>
</html>
<head>
</head>
<body>
<header></header>
<section></section>
<nav></nav>
<aside></aside>
<footer></footer>
</body>
Just think of this as a 3D object and your footer is coming infront of your elements or body. Use this structure. :)
one thing You can do is rather then using position:absolute use position:fixed this will stick at that points.
Hope that helps
change the position: absolute to position: fixed
DEMO
div.footer {
position: fixed;
background: silver;
height: 200px;
bottom: 0;
}
Like this
demo
css
*{
margin:0;
padding:0;
}
div.footer {
position: fixed;
background: silver;
height: 200px;
bottom: 0;
width:100%;
}
use the z—index property
img. {position:absolute; top:0; z-indez:-1;}
Related
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.
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 am absolutely positioning a footer at the bottom of the browser window, using the following code:
HTML
<html>
<body>
<div id="content">
Content
</div>
<div id="footer">
Footer
</div>
</body>
</html>
CSS
#content {
margin-bottom: 20px;
background: red;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background: blue;
}
This works just as intended, however when I make the browser window smaller the footer will eventually cover the main content. What is the most efficient way of preventing this?
Thanks in advance.
You need a Sticky Footer.
Demo
Here is another example using pseudo-elements. You may have some issues with old versions of IE, but it allows you to forgo un-semantic elements.
Try this:
#content {
padding-bottom: 20px;
background: red;
}
#footer {
position:fixed; //Changed to fixed
bottom:0px;
width:100%;
height: 20px;
}
model
it's possible? yes|no|javascript?
ok. i'll try.
Here must be:
Header. Fixed size, fixed position (top)
Content. Dynamic height, depends from window, header and footer size. Have sroll if overflow.
Footer. Always bottom fixed position. Fixed size.
Window. No Scroll (!important)
ps. to window. there is a bug or something. if it's Firefox or Opera key 'down' - scroll down. even if "no scroll" - hidden specified.
hope all clear
Done.
Tnx.
<html>
<head>
<style type="text/css">
* { padding: 0; margin: 0;} /* do not use universal selector this is just for example */
#header{
top:0;
left:0;
right:0;
height: 150px;
position:absolute;
}
#content {
position: absolute;
bottom: 150px; /*footer height*/
top:150px; /* header height */
left: 0;
right: 0;
background: yellow;
overflow: auto;
}
#footer {
position: absolute;
height: 150px;
bottom: 0;
left: 0;
right: 0;
background: red;
}
</style>
</head>
<body>
<div id='header'>
Header content
</div>
<div id="content">
dynamic content here
</div>
<div id="footer">
</div>
</body>
</html>
You could really make some nicer question.
<html>
<head>
<style type="text/css">
* { padding: 0; margin: 0;} /* do not use universal selector this is just for example */
#content {
position: absolute;
top: 0;
bottom: 150px;
left: 0;
right: 0;
background: yellow;
overflow: auto;
}
#footer {
position: absolute;
height: 150px;
bottom: 0;
left: 0;
right: 0;
background: red;
}
</style>
</head>
<body>
<div id="content">
</div>
<div id="footer">
</div>
</body>
</html>
Hello and welcome at Stackoverflow,
could you please post a more specific question? Just writing something in the Title and having a real question like "it's possible? yes|no|javascript?" does not help anyone.
To answer your question: yes, it is possible. You just need to use some css.
I am trying to make an overlapping a DIV onto other visually . I am trying
{
position:absolute;
top:-10px;
}
in css, but I found that this top attribute is not working properly in firefox. Dear fellas, how to do that? Please help me with some codes or examples.
thx in advance
Here's an easy way
CSS
.top {
position: relative;
}
.topabs {
position: absolute;
}
HTML
<div class='top'>
<div class='topabs'>
I'm the top div
</div>
</div>
<div>No styles, just frowns :(</div>
The relative positioned div collapses as there are no contents, causing the coordinates 0,0 coordinates of the absolute positioned div to be that of the div underneath.
Fiddle
http://jsfiddle.net/y5SzW/
Try this, I like to use relative position for this kind of thing.
<html>
<head>
<style type="text/css">
body{
background-color: #000;
padding:0;
margin:0;
}
#bottom {
width: 200px;
height: 200px;
border: 5px #fff solid;
background-color:#f00;
margin: 0 auto;
}
.top {
width: 200px;
height:200px;
top: 10px;
left: -100px;
z-index: 10;
background-color: #00f;
color: #333;
border: 5px solid #fff;
position: relative;
}
</style>
</head>
<body>
<div id="bottom">
<div class="top"></div>
</div>
</body>
</head>
I would of course seperate the CSS into it's own file later.
Just use position: relative instead of absolute, or add a negative margin-top: -10px instead.