I have a navigation bar under a header div tag
and a slideshow div afterwards ... as the code shows
<div class="header">
<div id="navbar">
content
</div>
</div>
<div class="container">
<div class="slideshow" id="slideshow">
slideshow content
</div>
</div>
the header and navbar have a fixed position to stay on top of the page when scrolling , the problem is when I scroll my "slideshow" appears on top of the navbar but the rest of the page content does not, how can I fix this ?
CSS styles
.slideshow {
position: relative;
margin-bottom: 10px;
padding: 50px 0 0 0 ;
}
Different CSS sheet for header and navbar
.header {
background: #2f3036;
height: 51px;
position:fixed;
width: 100%;
}
#ime-nav {
position: fixed;
width: 100%;
z-index: 10000;
background:#FF9900;
}
apparently I just needed to add a z-index to the header, completely overlooked it
.header {
background: #2f3036;
height: 51px;
position:fixed;
width: 100%;
z-index: 1;
}
Related
I am struggling with in-page links and fixed header.
I have a sticky header (position fixed) of 50px. This allows me to have the header always visible even if scrolling down in the page.
In my page, I have then a menu with links to other sections in the page.
I used href with IDs target.
Problem is that when I click on the link, the page positions the target at the very top of the page, where the header hides my target section for 50px.
The code below shows the issue
<html>
<head>
<style>
.header {
position: fixed;
top: 0px;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
background-color: red;
height: 50px;
}
.container1 {
content: none;
height: 200px;
background-color: green;
}
.container2 {
content: none;
height: 800px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container1"></div>
<div class="container2">
block1
<div id="block1">Some text</div>
</div>
</body>
This is just how anchors work.
To achieve your goal, try giving the target a padding of your header height. That will fix it.
#block1 {
padding: 60px 0;
}
I want to place the main slider behind main navigation so I have set navigation position to fixed and the slider position to absolute. It works fine but for some reason, the entire footer element moves below navigation and on the slider. I have tried giving min-width and display block to the slider but it did not work.
Here is my sample code.
Navigation HTML:
<nav>
Item 1
Item 2
Item 3
</nav>
Slider HTML:
<div class="slider">
Slider Items Here
</div>
Footer Html:
<footer>
</footer>
CSS Code
nav {
top: 0px;
position: fixed;
z-index: 99999;
}
.slider {
position: absolute;
top: 0;
width: 100%;
bottom: 0;
min-height: 600px;
display: block;
}
footer {
display: block;
}
Here is how it looks right now:
As said in comment, you shoud set the header and footer position to absolute (the former at the top and the latter at the bottom), and remove the absolute from the slider.
Then your slider will be full-page, and header and footer will always be at the right position.
.wrapper {
height: 100vh;
display: flex;
flex-direction: column;
}
header,
footer {
height: 30px;
}
main {
flex: 1;
}
body {
margin: 0;
}
header {
background-color: #2ecc71;
}
main {
background-color: #ecf0f1;
}
footer {
background-color: #2c3e50;
color: white;
}
<div class="wrapper">
<header>I'm a 30px tall header</header>
<main>I'm the main-content filling the void!</main>
<footer>I'm a 30px tall footer</footer>
</div>
Like This ......You want!!
at the top of Header and inside header Nav Bar ... In Main Section Slider And Below Footer !
http://codepen.io/enjikaka/pen/zxdYjX
I have a position:fixed div at the top of my page, so that when a user scrolls down the menu always stays at the top.
How do I position another div element underneath the fixed div.
I'm using CSS and HTML.
I'm using a smooth scrolling jQuery and need each section header to appear just under the menu bar.
Something like this — http://codepen.io/sergdenisov/pen/pJyMGb:
HMTL:
<div class="menu">
<div class="menu-item">Home</div>
<div class="menu-item">About</div>
<div class="menu-item">Demo</div>
<div class="menu-item">Contact</div>
</div>
<div class="menu-item menu-item_sub">Contact</div>
CSS:
body {
height: 2000px;
}
.menu {
position: fixed;
background: blue;
width: 100%;
}
.menu-item {
display: inline-block;
padding: 30px;
}
.menu-item_sub {
position: fixed;
left: 0;
top: 60px;
}
Do everything in absolute position domain.
.1(class){
position: absolute;
left: 10px;
top20px;
}
Like above classify each object with a class and set their position.
I have managed to get my Footer to go to the bottom of my page, but for some reason it has created a Vertical Scroll Bar on my pages which I don't want it to do.
This is my page layout at the moment (HTML):
<div class="wrapper">
<div class="Header">
</div>
<div class="Main">
</div>
<div class="Footer">
</div>
</div>
And this is the CSS that goes with this:
.wrapper
{
position: relative;
min-height: 100%;
}
.Header
{
height: 83px;
border: 0;
}
.Main
{
padding-bottom: 100px;
}
.Footer
{
background: #6a3d98;
position: absolute;
bottom: 0px;
height: 55px;
width: 100%;
}
Here is a small picture of what happens:
http://i.stack.imgur.com/Kgams.jpg (Have to post link as won't let me upload pic)
I want the Footer to be stuck to the bottom of the page but not to create the scroll bar. If anyone knows how to do this please comment, Thanks.
Add overflow:hidden on the wrapper element.
I am trying to get the background image of my content to appear behind the header and footer. Currently, the top of the content's background is sticking out onto the header, and you can see that the bottom has slightly covered the footer (notice the slight change of the footer's border colour). I have tried setting applying z-index:-100; to content which worked but also makes the text unselectable. I then tried applying z-index:1; to content, but that did not make the content appear under the header/footer.
link to website
//html
<div id="wrapper">
<header>
<div id="logo"></div>
<nav>
<ul>
<li id="aboutNav">home</li>
<li id="menuNav">menu</li>
<li id="specialsNav">specials</li>
</ul>
</nav>
</header>
<div id="content">
content <br> goes <br> here <br>
google
</div>
</div>
<footer>
<div id="thumbsDesc"></div>
<div id="thumbs"></div>
</footer>
//css
header {
width: 100%;
height: 100px;
background: url(../img/top.png) repeat-x;
z-index: 110;
}
#wrapper #content {
color: #FFFFFF;
background: url(../img/body.png) repeat-y;
width: 524px;
padding: 25px 30px 25px 30px;
position: absolute;
bottom: 100px;
top: 90px;
margin: 0 0 0 150px;
z-index: 1;
}
footer {
margin: -107px 0 0 0;
width: 100%;
height: 107px;
background: url(../img/bottom.png) repeat-x;
z-index: 100;
}
To solve the issue, you are using the z-index on the footer and header, but you forgot about the position, if a z-index is to be used, the element must have a position:
Add to your footer and header this CSS:
position: relative;
EDITED:
Also noticed that the background image on the #backstretch has a negative z-index, don't use that, some browsers get really weird...
Remove From the #backstretch:
z-index: -999999;
Read a little bit about Z-Index here!
For z-index to work, you also need to give it a position:
header {
width: 100%;
height: 100px;
background: url(../img/top.png) repeat-x;
z-index: 110;
position: relative;
}
Set your header and footer position to "absolute" and that should do the trick. Hope it helps and good luck with your project!