I have this sample HTML5 page which have a navigation and a content area pasted on JSFiddle.
The problem is that <div id="nav"> isn't fixed when I scroll vertically. How can I make the navigation to be fixed on the top of the browser even with scrolled vertically?
DEMO
body {
margin: 0px;
width: 100%;
height: 120%;
background: red;
}
#nav {
position: fixed;
width: 100%;
z-index: 99;
height: 25px;
background: blue;
}
Use position:fixed and z-index property (the issue you had was due to the layers : your fixed div was under #area div) :
#nav{
position:fixed;
top:0;
width:100%;
height: 25px;
z-index:50;
background: blue;
}
Example
Create another hidden navigation (same with already used nav), and show it when user scrolls down enough.
Here is a good tutorial to do that.
And here is some edited and working example from my website.
Related
I have a little problem with my responsive design. I am using a normal <footer> with this style.
footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 5px;
left: 0;
}
It works fine and when I am using a smaller screen I have to scroll, that's normal.
The problem is that the <footer> is not at the bottom. It is in the middle of the screen. Like margin-top: 100% of the full screen, without scrolling.
I hope you understand what I mean.
Thanks!
Make Position fixed, This may look something like this
footer {
width: 100%;
height: 20px;
position: fixed;
bottom: 5px;
left: 0;
}
The idea is to position the element fixed to the bottom. Set the bottom offset with bottom or margin-bottom parameters.
You could go with this:
footer {
position:fixed;
height:20px;
bottom:0px;
left:0px;
right:0px;
margin-bottom:0px;
}
I hope I get your problem correctly. Your problem is that the footer is at the middle of the screen when there is little content in that page, right?
To solve the problem, you should make the parent element take up the full screen. For example,
<head>
<style>
footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 5px;
left: 0;
}
body {
min-height: 100%;
}
</style>
</head>
<body>
<div>
some other content
</div>
<footer>
Some content inside footer
</footer>
</body>
Or if you don't mind the footer is always visible at the bottom of the screen, use position:fixed . Then you don't need to consider the height of the parent element.
I have a fixed DIV. The page contents should be displayed after the DIV, but they are under the DIV - partially hidden by it. How can I avoid this?
Here is the DIV's style:
#top_div {
position: fixed;
float: left;
top:0;
width: 100%;
height: 20%;
background-color: black;
}
we do not know your entire code, but if it is like
<div id="container">
<div id="fixed">fixed</div>
//a lot of html code here
</div>
put some top-padding to the .container div, padding equal to the height of the fixed div
Take a look at this.
Fixed Div
HTML:
<div>Fixed div</div>Can we see this?
CSS:
div {
position: fixed;
}
Now without fixed
HTML:
<div>Not Fixed div</div>Can we see this?
CSS:
div {
}
Just to show you what the difference is. You can see the div as position: fixed is sitting on top of the content after. The div will stay in that place always on screen. Thats what fixed does. You do not want this (I don't think as you didn't explain what you want it to do) so just remove it.
Example of position:fixed working on a page that can scroll, you will see it is always on the screen.
Example Here
Do not used fixed as this is what causes the problem for you.
I think you are trying to achieve this (http://jsfiddle.net/6Q9w4/8/)
.header {
height: 20%;
background-color: #4679bd;
position: fixed;
width: 100%;
}
.content {
position: absolute;
top: 20%;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
overflow: scroll;
}
I'm trying to accomplish this design:
Where the sidebar will be fixed, but the right side (the main content) will scroll vertically (and potentially horizontally if the user's browser window is smaller). What is the best way to achieve this?
I tried making the sidebar be "fixed" with a fixed width of 200px, and then the main content just has a margin-left of 200px. However, if the user's browser is then smaller than the main content, the sidebar overlaps all the content as the user tries to scroll horizontally.
Is there a smarter way to achieve this? Thanks!
Use the content div as your container for the page.
.sidebar {
position: fixed;
width: 200px;
height: 400px;
background: #000;
}
.content {
margin-left: 200px;
height: 500px;
width: auto;
position: relative;
background: #f00;
overflow: auto;
z-index: 1;
}
.info {
width: 1440px;
height: 300px;
position: relative;
background: #f55;
}
<div class="sidebar"></div>
<div class="content">
<div class="info"></div>
</div>
Your content will need to be the container to put the page in. The values here are my test to see if I am correct in this. If your width and height exceeds the values you set for content, the scroll bars will appear.
Have a fiddle: http://jsfiddle.net/djwave28/JZ52u/
edit: responsive sidebar
To have a responsive fixed sidebar, simply add a media-query.
Example:
#media (min-width:600px) {
.sidebar {
width: 250px;
}
.content {
margin-left: 250px;
}
}
Here's another fiddle: http://jsfiddle.net/djwave28/JZ52u/363/
Here is an alternative: http://jsfiddle.net/BoyWonder/8mVQX/embedded/result/
body{
padding-left:200px;
margin:0;
}
div#sidebar{
position:fixed;
height:100%;
width:200px;
top:0;
left:0;
background:grey;
}
div#content{
background:black;
width:100%;
height:1600px;
}
Here is another alternative by using only two CSS lines
.sidebar {
position: sticky;
top: 0;
}
and the credit goes to this post.
You can also experiment with the code over here.
I'm currently working on this site and I want the footer to be 100% (width) of the screen but it has refused to respond no matter what I do. I've checked to see if the ID has a duplicate but I saw nothing. The CSS code is as shown below:
#footer {
width: 100%;
clear: both;
height: 400px;
background-color: #293D61;
}
Your footer is a nested div inside #rack. At 100%, your footer will only be as wide as your outer/parent div. You need to move it out of the parent div and make it a sibling
Try doing it this way,
#footer {
position: absolute;
bottom: 0;
width: 100%;
clear: both;
height: 400px;
background-color: #293D61;
}
Check whether your footer is is in inside some other div...? if so then it will not be of full page length....
I am trying to emulate a sort of pop-up help dialog for my web site.
When the user clicks help, a mask covers the whole page with a dark, partially transparent mask, and a helppage div with a higher z-order is made visible.
The helppage div is 80% wide and 90% high positioned absolute at left 10% and top 5%, all relative to body.
So far all is great.
The content of the helppage div is:
- a full-width header with a close anchor 20px high floating right.
- a iframe-div to occupy the rest of the helppage div containing:
- an iframe to display the html document in question
The problem:
I would expect the height of the iframe-div to be 20 px less than the helppage div, but for some odd reason it is 3px larger than the helppage div.
As a result the bottom of the iframe is invisible.
The html:
<div id="helpbox">
<div id="helppage" class="window" style="display: block; position: absolute;">
<div class="hd-header">
<a class="close" onclick="hidehelp()"></a>
</div>
<div class="iframe-div">
<iframe id="HelpPageFrame" src="/help-system.html"></iframe>
</div>
</div>
The css:
#helpbox .window {
position:absolute;
display:none;
z-index:9999;
}
#helpbox #helppage {
background: white;
width:80%;
left: 10%;
top: 5%;
height:90%;
padding: 0px;
overflow: hidden;
}
#helppage iframe {
border: none;
width: 100%;
height: 100%;
}
#helppage .iframe-div {
width: 100%;
position: relative;
display: inline-block;
}
#helpbox .hd-header {
height: 20px;
font-weight: bold;
overflow: hidden;
display: inline-block;
width: 100%;
}
#helpbox .close {
width:20px;
height:20px;
display:block;
float:right;
clear:right;
background:transparent url(images/close_icon_double.png) 0 0 no-repeat;
}
Any suggestions would be greatly appreciated
edit As mixel pointed out, an important detail slipped, when I trie to simplify the scenario, that has been corrected.
Please, be accurate, when you are asking questions.
There is whitespace in '#helppage .window' selector. It selects nothing. Because of that '#helppage' is not absolute positioned.
There is no '#helpbox' element.
edit
Though you are still a bit innaccurate (you forgot to close 'DIV'), there is answer. You need to fill the remainder of '#helppage' with '.iframe-div'. If you set '.iframe-div' height to 100%, it takes 100% height of parent element - '#helppage'. To solve this problem you need absolute positioning for '.iframe-div':
#helppage .iframe-div {
position: absolute;
top: 20px;
bottom: 0;
right: 0;
left: 0;
}
Or set height with javascript.
Check out this: Make DIV fill remainder of page vertically?
It's fairly common question.