CODEWITHSUNDEEP
htmlcss
Kevin S
Kevin S

Reputation: 95

Slider Position Issue in HTML5 and CSS

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>
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
</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:

enter image description here

Upvotes: 0

Views: 2140

Answers (2)

R&#239;sh&#239;K&#234;sh K&#252;mar
R&#239;sh&#239;K&#234;sh K&#252;mar

Reputation: 5092

.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

Upvotes: 0

Sorikairo
Sorikairo

Reputation: 798

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.

Upvotes: 1

Related Questions