[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.
Related
I have a div containing the website logo, that I stuck in the top left corner of my website.
In order to have it dynamic, I put its position on a 10% screenwidth from the left. Now the problem occurs when the browser gets smaller than the width of my content, it obscures important buttons or text on the website.
I cant seem to figure out how to resolve this and any input would be great.
Edit: added additional divs to contain both the Logo banner and the Login-menu above the website;
Header.php:
<div id="navcontainer" class="navcontainer-div">
<div id="bannier" class="bannier-div">
<img src='/img/banner.png'>
</div>
<div id="navigation" class="navigation-div">
<table width='100%'>menu content</table>
</div>
</div>
Style.css:
.navcontainer-div
{
margin-left:-10px;
max-width: 100%;
width:100%;
/*height: 125px;
background-color: #AEB861;*/
background-image: url('/img/header_bg.png');
background-repeat: repeat-x;
display:block;
border-radius: 3px;
top:0;
position: fixed;
}
.navigation-div
{
z-index: 2;
max-width:1000px;
height:60px;
background-color: #E4EEB9;
margin: 0 auto;
color: #000;
border-radius: 3px;
}
.bannier-div
{
z-index: 3;
left:10%;
position: fixed;
width:100%;
max-width:150px;
}
I think you should user another class or id with parent element.
Example:
At page http://webstore.thelifeforge.nl/about.php we have id navigation
At page http://webstore.thelifeforge.nl don't have id navigation
So we can write:
.bannier-div
{
z-index: 3;
left:10%;
position: fixed;
width:100%;
max-width:150px;
}
#navigation .bannier-div
{
z-index: 3;
left:5%;
position: fixed;
width:100%;
max-width:100px;
}
Let's see if I can explain this correctly. I want a header, always visible AND content AND a footer that is hidden behind the content, that becomes visible when scrolled to the footer. Here's what I have so far...
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height:25vh;
width:100%;
background-color:red;
position:fixed;
top:0;
}
#content {
height:120vh;
width:100%;
background-color:green;
position:relative;
}
#bottom {
height:35vh;
width:100%;
background-color:blue;
position:fixed;
bottom:0;
}
<div id="container">
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
</div>
</div>
What this code currently does: Header is hidden behind content and footer is always visible overlapping content.
Here is the current test page... http://next-factor.com/test-layout.php
Much help is greatly appreciated. Thank You!
give a z-index in #top
#top {
background-color: red;
height: 25vh;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
it will make header visible.
and remove position:fixed from #bottom
#bottom {
background-color: blue;
bottom: 0;
height: 35vh;
width: 100%;
}
hope this will solve your problem
here is the working example http://jsfiddle.net/a3ru9d4d/
in this example I have added padding top in the container so that content inside the container will not hide behind the header.
I think you want something like this:-
*{margin:0;padding:0}
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height:25vh;
width:100%;
background-color:red;
position:fixed;
top:0;
z-index: 1;
}
#content {
height:120vh;
width:100%;
background-color:green;
position:relative;
}
#bottom {
height:35vh;
width:100%;
position:relative;
z-index:-2;
background-color:#31353a;
}
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
Footer
</div>
</div>
I hope it will helps you.
Take a look at this. I've introduced two new CSS definitions that achieve what I think you want.
https://jsfiddle.net/b8my8h5j/
I added z-index definitions. The higher the index, the higher it is in a non-static positioning stack. the content header has 30, so it appears above 20 for the content, but the footer has 10, so t's always at the back.
I added a margin-bottom to the content so that there's space for you to scroll down and have the footer be completely visible.
Update:
https://jsfiddle.net/b8my8h5j/1/
Also cleared padding/margin on the body and html tags so that the blocks fit together snugly.
Added a margin-top to the content so that the top of the green box is visible.
I think this produces what you want: z-indexes on all three, and making room at the bottom of content for the footer to show completely when you scroll to the end of the page
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height: 25vh;
width: 100%;
background-color: red;
position: fixed;
top: 0;
z-index: 3;
}
#content {
height: 120vh;
width: 100%;
background-color: green;
position: relative;
margin-bottom: 33vh;
z-index: 2;
}
#bottom {
height: 35vh;
width: 100%;
background-color: blue;
position: fixed;
bottom: 0;
z-index: 1;
}
<div id="container">
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
</div>
</div>
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.
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>
I have 3 div.
<div class="main"></div>
<div id="fixedbox"></div>
<div id="fixedBar"></div>
CSS:
.main {
width: 850px;
padding:25px 5px;
border-left:1px solid #999;
border-right:1px solid #999;
text-align:left;
overflow:hidden;
}
body {
height: 100%;
margin: 0;
overflow-y: auto;
}
body #fixedbox {
position:fixed !important;
position: absolute;
left: 865px;
top: 0;
width: 160px;
}
#fixedBar {
display:block;
position: absolute;
width:100%;
height:20px;
position:fixed;
bottom:0;
left:0;
background:#F00;
}
* html #fixedBar {
position:absolute;
}
Problem is this:
When Im adding a block with "position:relative" in main div, the block will move in scroll in ie. With adding "position:relative" to body or main, there is other problems in ie. How can I used positions without problems in "<div class="main"></div>" ?
Thanks in advance
EDIT: I have solved the problem with change the doctype.
I presume you are adding position:relative to the body to position the 2 fixed position:absolute containers? If not you will need to.
I have had some problems with setting position:relative in IE in the past. Try some of the usual hacks like setting
height:1%;
Or
display:block;
to .main
You may find a specific solution on http://www.positioniseverything.net