Layout of the web page i am designing is like this fiddle : http://jsfiddle.net/5sTub/
EDIT: NOTE: I am not trying to get a sticky footer. i just want to position it at bottom of the page. Please see the fiddle before you answer
i am trying to position the footer at the bottom of the page but am unable to as you can see in the link above. i have tried everything i found on the internet including setting the container element's position:relative; and the footer's position:absolute; and bottom:0; but nothing seems to be working, in fact, if you add the container div to the code and make its position:relative;, and add the following css to footer : position:absolute; bottom: 0; , the footer seems to disappear somewhere. I've been struck on this problem since quiet a long time and the only solution i've found so far is to set my header and my content and the footer's position:static; , which dosent server the purpose and ruins whole layout and looks quiet ugly. I want to avoid the use of javascript. please help, thanks in advance.
EDIT: Illustration of what i need:
where blue is the footer, dark blue is header, light blue is actual content and pink one is a sticky div. i do not want to make footer sticky, but i want it to be like one you'll find on a normal page, only problem is that it dosent stay at the bottom of the page (see the fiddle)
You can use Sticky Footer method for this. Read this http://ryanfait.com/sticky-footer/
For example write like this:
HTML
<div class="container"></div>
<div class="footer"></div>
CSS
body,html{
height:100%;
}
.container{
min-height:100%;
}
.footer{
height:40px;
margin-top:-40px;
}
Check this for more Flushing footer to bottom of the page, twitter bootstrap
Use this
add this css property in your css
html, body{height:100%}
div#footer {
color: white;
background: rgba(68, 68, 68, 0.8);
width: 100%;
position:absolute;
bottom:0;
}
Will it help http://jsfiddle.net/5sTub/1/
I do not know if you resolved this or not, however I ran into a similar problem and resolved as follows:
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN" " http://w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css" >
div#mypage {
top:0;
background: purple;
color: white;
}
div#pageheader {
top:0;
left:0;
height: 20%;
position:absolute;
width:100%;
background: green;
color: white;
}
div#pagecontent {
}
div#contentleft {
display: inline-block;
background: blue;
position:absolute;
border-radius: 2px;
left:0%;
right: 15%;
width:15%;
height: 92.5%;
top: 5%;
color: white;
}
div#contentcenter {
display: inline-block;
background: yellow;
position:absolute;
border-radius: 2px;
left:15%;
right: 30%;
width:80%;
height: 92.5%;
top: 5%;
color: black;
}
div#contentright {
display: inline-block;
background: red;
position:absolute;
border-radius: 2px;
left:95%;
right: 5%;
width:5%;
height: 92.5%;
top: 5%;
color: white;
}
div#pagefooter {
color: white;
background: rgba(68, 68, 68, 0.8);
width: 100%;
height: 2.5%;
position:fixed;
left:0;
bottom:0;
}
</style>
<head>
<title>Multiple Div's</title>
</head>
<body bgcolor="#cccccc">
<div id="mypage">
<div id="pageheader">HDR</div>
<div id="pagecontent">PAGE CONTENT
<div id="contentleft">LEFT</div>
<div id="contentcenter">CENTER</div>
<div id="contentright">RIGHT</div>
</div>
<div id="pagefooter">FOOTER</div>
</div>
</div>
</body>
</html>
Related
[Link to the Code][1]
[1]: https://codepen.io/muhammad-shahzeb-raza/pen/mdRbXqX?editors=1100
I am trying to make my navigation stay at one point during the scroll using Position = fixed but it does not work.
This will most likely be down to your HTML structure. Consider moving the the navigation HTML outside of your wrapper. For example:
body {
margin:0;
}
.menu {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
height:40px;
box-sizing:border-box;
border-bottom:1px solid #d9d9d9;
position:fixed;
background:white;
}
.content {
width:100%;
height:3000px;
background:#f1f1f1;
margin-top:40px;
}
<div class="menu"> Menu </div>
<div class="content"> Content </div>
You can move .header__nav just above your #section-header, and make sure it has position: fixed and z-index bigger than 3, like this: https://codepen.io/cmarius/pen/JjEPZQy
&__nav{
z-index: 4;
border-bottom: .1rem solid $color-light;
position: fixed;
}
However, it's worth mentioning you header element should only contain header data.
I am trying to build a container with the dimensions of 26x26 pixels and display a number at the very bottom right of this container. In addition, I would like to add a background 24x24 picture to the container.
The code I have so far is as follows
<html>
<style>
body {
height:26px;
width:26px;
background-color:red;
}
#bottom {
vertical-align:bottom;
text-align:right;
background-color:yellow;
}
</style>
<body>
<p id="bottom">2</p>
</body>
</html>
And here's a JSFiddle link to make things easier https://jsfiddle.net/n8ku715x/
As you can see from JSFiddle, it is not entirely working. It's not even setting the right dimensions. Any help is appreciated.
<style>
body {
}
#ctn {
height: 26px;
background-color: red;
width: 26px;
position:relative
}
#bottom {
position: absolute;
bottom: 0;
right: 0;
font-size: 8px;
color: #fff
}
</style>
<body>
<p id="ctn"><span id="bottom">2</span></p>
</body>
Here's your container, with the number within it - is that what you were looking for?
Try this:
CSS
.container{
width:26px;
height:26px;
position:relative;
background-color:red;
}
.container-number{
position:absolute;
bottom:0;
right:0;
background-color:yellow;
}
HTML
<div class="container">
<div class="container-number">2</div>
</div>
Just add bottom 0 and position to the class if u wants the fixed
CSS
#bottom {
background-color: yellow;
bottom: 0px;
position: fixed;
}
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;}
My Objective: To have a home page, that has a fixed, static footer. The easiest way to explain this is looking at this website, http://www.foxtie.com/. I'm trying to do something like what they have done with the fox, sticking with the footer, only, I'm wanting the entire footer to not ever move from the bottom of the actual screen.
My Code: I've changed, and unchanged, and re-changed it all. So I may be 20 steps farther than I was an hour ago. Here is what I have. (Bear with me, first post here, and I'm very rusty on the html/css).
Any help is appreciated.
The HTML:
<html>
<body>
<div id="container">
<div id="nav"></div>
<div id="content"></div>
<div id="footer">
<div id="imginthefooter"></div>
</div>
</div>
</body>
</html>
The CSS:
body {
height: 100%;
margin: 0px;
}
html {
background-color: #999;
margin: 0px;
height: 100%;
}
#container {
min-height: 100%;
background-color: #666;
position: relative;
}
#content {
overflow: auto;
background-color:#333;
}
#footer {
background-color:#000;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height:100px;
overflow: hidden;
}
#imginthefooter {
background: url(Images/Elk.png);
width:100px;
height:300px;
z-index:300;
bottom: 0px;
top: -108px;
right: -150px;
position: relative;
}
The link that Mr. Alien provided in his comment is for sticky footers. This is useful if you want the footer to appear at the bottom of the screen regardless of the amount of content on the page. What I think that you actually want is for the footer to always appear at the bottom of the page. Meaning that if you scroll down, the footer stays in place. If this is the case, you want the following code:
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
width:100%;
height:100px;
}
The fixed positioning will place the footer at the bottom of the screen permanently. To add a fixed image within the footer, you will need both a relative div and absolute div. The following code is will get you what you want.
<div id="footer">
<div id="footerContainer">
<div id="imginthefooter"></div>
. . . Any additional footer elements go here . . .
</div>
</div>
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
width:100%;
height:100px;
}
#footerContainer {
position:relative;
width:100%;
height:100px;
}
#imginthefooter {
background: url(Images/Elk.png) no-repeat;
width:100px;
height:300px;
top: -108px; /* Position element */
right: 150px; /* Position element */
position: absolute;
}
The relative container within the fixed element will allow you to position the elk image relative to that container.
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.