Here's the link for the fiddle: https://jsfiddle.net/LpLp75zm/
The problem is that although I've assigned a position:fixed attribute to the topbar (the red colored part) it won't accompany the side navigation menu when I scroll down.
<!DOCTYPE html>
<html>
<head>
<style>
* { margin:0;padding:0;}
div.container {
position: relative;
}
div.topbar {
background-color: #f44336;
font-size: 25px;
height: 50px;
width: 100%;
z-index: 1;
position: fixed;
}
a.left-top-bar {
font-family: ISOCPEUR;
background-color: #0e0e0e;
color: whitesmoke;
width: 200px;
text-align: center;
font-size: 30px;
padding: 5px 0 15px 0;
height: 30px;
position: fixed;
text-decoration: none;
z-index: 2;
}
div.sidenav {
background-color: #b5b5b5;
width: 200px;
height: 100%;
position: fixed;
top: 50px;
z-index: 3;
}
ul {
width: 200px;
background-color: #b5b5b5;
list-style-type: none;
}
li.main a {
padding: 10px 0 10px 15px;
font-family: Calibri;
display: block;
text-decoration: none;
color: white;
}
li.main a:hover {
background-color: #343434;
}
div.center {
background-color: #a1b9a4;
position: absolute;
left: 200px;
top: 50px;
height: 1000px;
width: 1141px;
padding-top: 25px;
padding-left: 25px;
z-index: 2;
}
div.dropbtn {
height: 23px;
padding: 10px 0 10px 15px;
font-family: Calibri;
display:block;
text-decoration: none;
color: white;
}
div.dropbtn:hover {
background-color: #343434;
}
div.dropdown-content {
display: none;
background-color: #343434;
width: 200px;
height: 129px;
text-align: center;
position: relative;
left: 185px;
bottom: 29px;
}
a.dropdown {
text-decoration: none;
color: white;
font-family: Calibri;
display: block;
padding: 12px 0 12px 0;
}
a.dropdown:hover {
background-color: #b5b5b5;
}
div.dropbtn:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="topbar"></div>
<a class="left-top-bar" href="https://www.wikipedia.org" target="_blank">This Website </a>
<div class="sidenav">
<ul>
<li class="main">Home</li>
<li class="main">Facebook</li>
<li class="main">Quora</li>
<li class="main">Reddit</li>
<li class="dropdown">
<div class="dropbtn">Dropdown
<div class="dropdown-content">
<a class="dropdown" href="#">Text<br></a>
<a class="dropdown" href="#">Link 2<br></a>
<a class="dropdown" href="#">Link 3<br></a>
</div>
</div>
</li>
</div>
<div class="center">
<h1>Test text</h1>
<p style="padding-top: 10px";>
Lorem Ipsum
</p>
</div>
</div>
</body>
</html>
The problem is not that the red bar scrolls up, but that the green .center div scrolls up on top of it.
Solution: decrease the z-index of the .center div to below 1, so that it appears behind the red bar.
* {
margin: 0;
padding: 0;
}
div.container {
position: relative;
}
div.topbar {
background-color: #f44336;
font-size: 25px;
height: 50px;
width: 100%;
z-index: 1;
position: fixed;
}
a.left-top-bar {
font-family: ISOCPEUR;
background-color: #0e0e0e;
color: whitesmoke;
width: 200px;
text-align: center;
font-size: 30px;
padding: 5px 0 15px 0;
height: 30px;
position: fixed;
text-decoration: none;
z-index: 2;
}
div.sidenav {
background-color: #b5b5b5;
width: 200px;
height: 100%;
position: fixed;
top: 50px;
z-index: 3;
}
ul {
width: 200px;
background-color: #b5b5b5;
list-style-type: none;
}
li.main a {
padding: 10px 0 10px 15px;
font-family: Calibri;
display: block;
text-decoration: none;
color: white;
}
li.main a:hover {
background-color: #343434;
}
div.center {
background-color: #a1b9a4;
position: absolute;
left: 200px;
top: 50px;
height: 1000px;
width: 1141px;
padding-top: 25px;
padding-left: 25px;
z-index: 0;
/* here */
}
div.dropbtn {
height: 23px;
padding: 10px 0 10px 15px;
font-family: Calibri;
display: block;
text-decoration: none;
color: white;
}
div.dropbtn:hover {
background-color: #343434;
}
div.dropdown-content {
display: none;
background-color: #343434;
width: 200px;
height: 129px;
text-align: center;
position: relative;
left: 185px;
bottom: 29px;
}
a.dropdown {
text-decoration: none;
color: white;
font-family: Calibri;
display: block;
padding: 12px 0 12px 0;
}
a.dropdown:hover {
background-color: #b5b5b5;
}
div.dropbtn:hover .dropdown-content {
display: block;
}
<div class="container">
<div class="topbar"></div>
<a class="left-top-bar" href="https://www.wikipedia.org" target="_blank">This Website </a>
<div class="sidenav">
<ul>
<li class="main">Home
</li>
<li class="main">Facebook
</li>
<li class="main">Quora
</li>
<li class="main">Reddit
</li>
<li class="dropdown">
<div class="dropbtn">Dropdown
<div class="dropdown-content">
<a class="dropdown" href="#">Text<br></a>
<a class="dropdown" href="#">Link 2<br></a>
<a class="dropdown" href="#">Link 3<br></a>
</div>
</div>
</li>
</ul>
</div>
<div class="center">
<h1>Test text</h1>
<p style="padding-top: 10px" ;>
Lorem Ipsum
</p>
</div>
</div>
Try using 3 for z-index value for div.topbar
div.topbar {
background-color: #f44336;
font-size: 25px;
height: 50px;
position: fixed;
width: 100%;
z-index: 3;
}
Related
I'm trying to fix my footer
links at the bottom of the web page.
Its like it keeps mixing like this.
It is covering others and it is getting in the way and its really annoying.
All of the links are hard to access, and hard to see, how how do I fix?
Here is my HTML and CSS. I've been stuck on this fir a while now can somebody help?
HTML:
<footer>
<div class="container">
<div class="column">
<ul class="footer-links">
<li>
<a class="link-text" href="index.html" title="Home">
Home </a>
</li>
<li>
<a class="link-text" href="search.html" title="Search">
Search </a>
</li>
<li>
<a class="link-text" href="servers.html" title="Servers">
Servers </a>
</li>
<li>
<a class="link-text" href="https://discord.gg/" target="_blank">
Official Discord Server </a>
</li>
<li>
<a class="link-text" href="termsofservice.html" target="_blank">
Terms Of Service </a>
</li>
<li>
<a class="link-text" href="guidelines.html" target="_blank">
Guidelines </a>
</li>
</ul>
</div>
</div>
<div class="copyright">
<p class="copyright-text">© Copyright 2020 OnTop Servers</p>
</div>
</footer>
CSS:
.copyright {
position: absolute;
bottom: 1%;
right: 1%;
font-size: 15px;
}
.copyright-text {
color: white;
}
.footer-links {
position: absolute;
bottom: 5%;
}
.link-text {
position: absolute;
bottom: 10%;
color: white;
text-decoration: none;
}
.container {
padding: 0;
margin: 0;
}
li {
position: relative;
left: 100%;
}
footer {
position: absolute;
bottom: 0%;
height: 300px;
width: 100%;
color: #fff;
background: #2c2c2c;
}
.welcome {
margin-top: -2.5rem;
width: 100%;
height: 35.5rem;
line-height: 1.8em;
margin-bottom: .4em;
padding: 0;
font-family: Helvetica;
font-weight: 600;
font-size: 1.5em;
color: #ffff;
text-transform: uppercase;
}
.centered-text {
position: relative;
margin-left: 25%;
display: flex;
align-items: center;
padding: 0 1.5rem;
}
.discord-logo {
border: 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
display: inline-block;
padding: .6em 0;
background: url(images/Discord-Wordmark-White.png) center no-repeat;
background-size: contain;
font-size: 1em;
}
.head {
margin-bottom: .4em;
padding: 0;
line-height: 1.4;
font-weight: 600;
font-size: 2em;
}
.body {
position: relative;
margin-left: 24.5%;
margin: 0 auto 1em;
text-transform: inherit;
opacity: 85%;
}
.search-box {
position: absolute;
top: 90%;
left: 18%;
background: #2c2c2c;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-txt{
width: 260px;
padding: 0 6px;
}
.search-btn {
color: white;
float: right;
width: 40px;
height: 40px;
border-radius: 100%;
background: black;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
}
.search-box:hover > .search-btn {
background: white;
color: black;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
.navbar-servers {
color: white;
float: right;
}
.title-right {
position: absolute;
right: 25%;
}
body {
color: #e6e6e6;
font-size: 1em;
font-weight: 400;
line-height: 1.5;
}
h1{
position: absolute;
left: 38%;
top: 10%;
}
.last-modified {
position: absolute;
left: 40%;
top: 15%;
}
.terms-of-service-align {
position: absolute;
left: 35%;
top: 25%;
}
Based on the picture you want, change display of your lists to inline, that will make the lists display horizontally
Despite having position fixed and no transform properties, my "hero" div always moves with the page. I want it to stay put
.hero{
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
Full css:
*
{
margin: 0;
padding: 0;
}
header
{
background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(img/snow.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color:white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", "sans-serif";
}
.main-nav li.active a{
border: 1px solid white;
}
.main-nav li a:hover{
border: 1px solid white;
}
.logo img
{
width: 150px;
height: auto;
float: left;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px;
margin: auto;
}
.hero{
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
h1{
color: white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
/* margin-top: 275px; */
margin-top: 220;
}
.button
{
margin-top: 30px;
margin-left: 440px;
position: sticky;
}
.btn{
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
position: sticky;
}
.btn-one{
background-color: darkorange;
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two{
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two:hover{
background-color: darkorange;
transition: all 0.5s ease-in;
}
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-y: auto;
overflow-x: hidden;
}
#page_2{
height: 1000px;
background-color: red;
}
Full HTML:
<html>
<head>
<title>Summer Website</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div id="page_1">
<div id="particles-js">
<div class="row">
<!-- <div class ="logo">
<img src="https://i.imgur.com/0PyA8HR.png" alt="">
</div> -->
<ul class="main-nav">
<li class ="active"> HOME </li>
<li> ABOUT </li>
<li> PORTFOLIO </li>
</ul>
</div>
<div class="hero">
<h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>
<div class="button">
LINKEDIN
RESUME
</div>
<div class ="bro">
</div>
</div>
</div>
</header>
<!--particles js file -->
<!-- <h1> TEST </h1> -->
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</div>
<div id=page_2>
</div>
</body>
</html>
There just seems to be problem with your closing tags incorrectly nested. There needs to another closing div before the closing header tag. The snippet shows the hero in a fixed position:
.hero {
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
Full css: * {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/snow.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", "sans-serif";
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.hero {
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
h1 {
color: white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
/* margin-top: 275px; */
margin-top: 220;
}
.button {
margin-top: 30px;
margin-left: 440px;
position: sticky;
}
.btn {
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
position: sticky;
}
.btn-one {
background-color: darkorange;
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two {
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two:hover {
background-color: darkorange;
transition: all 0.5s ease-in;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-y: auto;
overflow-x: hidden;
}
#page_2 {
height: 1000px;
background-color: red;
}
<header>
<div id="page_1">
<div id="particles-js">
<div class="row">
<!-- <div class ="logo">
<img src="https://i.imgur.com/0PyA8HR.png" alt="">
</div> -->
<ul class="main-nav">
<li class="active"> HOME </li>
<li> ABOUT </li>
<li> PORTFOLIO </li>
</ul>
</div>
<div class="hero">
<h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>
<div class="button">
LINKEDIN
RESUME
</div>
<div class="bro">
</div>
</div>
</div>
</div>
</header>
<div id=page_2>
</div>
Use position:inherit
You are using fixed and I think that is causing your issue.
Inherit won’t move, absolute stacks, fixed scrolls with page, static is default.
I'm having a little positioning error and I'm sure it's a simple fix, but after trying lots of different combinations of margin and padding, I can't get it perfect. The problem is I can't seem to get my drop-up menu (footer-nav ul ul) to move down 10px when it appears by hovering over #info. If I remove the margin from the css under #info, it drops the footer-nav ul ul down 10px where I need it, but it removes the 10px margin between the black box (streaks-content) and the footer-nav. Anyone know how to fix this? I appreciate it so so much! I don't know what I would do without you geniuses!
Here is the JS Fiddle: https://jsfiddle.net/fe2zk4L8/19/
Here is the html:
<header id="header">
<div id="nav">
<ul>
<li id="projects">PROJECTS
<ul>
<li id="one"> ONE </li>
<li id="two"> TWO </li>
<li id="three"> THREE </li>
<li id="four"> FOUR </li>
</ul>
</li>
</ul>
</div>
</header>
<div id="color">
<div id="streaks-content">
</div>
</div>
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="info">INFO
<ul>
<li id="twitter">
TWITTER
</li>
<li id="instagram">
INSTAGRAM
</li>
<li id="email">
EMAIL
</li>
</ul>
</li>
</ul>
</div>
</footer>
Here is the css:
a {
text-decoration: none;
color: inherit;
display: block;
}
#header {
width: 100%;
position: fixed;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
top: 0;
left: 0;
text-align: center;
z-index: 10;
}
#nav {
width: 100%;
background-color: #FFFFFF;
}
#projects {
display: inline-block;
padding-bottom: 10px;
}
#nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#nav ul ul {
width: 300px;
list-style-type: none;
font-weight: normal;
display: none;
}
#nav ul li:hover>ul {
display: block;
position: absolute;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}
#one {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#one:hover {
background-color: black;
color: white;
}
#two {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#two:hover {
background-color: black;
color: white;
}
#three {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#three:hover {
background-color: black;
color: white;
}
#four {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#four:hover {
background-color: black;
color: white;
}
#footer {
width: 100%;
background-color: white;
position: fixed;
margin: 0px;
bottom: 0;
left: 0;
text-align: center;
z-index: 11;
}
#footer-nav {
width: 100%;
}
#info {
display: inline-block;
padding-top: 10px;
}
#footer-nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
#footer-nav ul ul {
width: 300px;
list-style-type: none;
font-weight: normal;
display: none;
}
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}
#twitter {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#twitter:hover {
background-color: black;
color: white;
}
#email {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#email:hover {
background-color: black;
color: white;
}
#instagram {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#instagram:hover {
background-color: black;
color: white;
}
#color {
width: 100%;
align-content: center;
}
#streaks-content {
background-color: black;
width: 300px;
height: 1000px;
display: block;
margin: 0 auto;
}
Please add to the following CSS selector #footer-nav ul li:hover>ul that rule padding-bottom: 0;
so, in total you should have:
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
padding-bottom: 0;
}
My dropdown menu is stuck behind my main div or trapped within the header. I have messed with the z-index and that has not helped. How would I be able to tell if it was the header trapping it rather than the main div hiding it.
Here is a pic of the issue:
body {
margin: 0;
font-family: arial;
}
button {
border-style: solid;
border-color: black;
border-radius: 5px;
}
a {
text-decoration: none;
color: blue;
}
#header {
overflow: hidden;
background-color: #FFF;
position: fixed;
top: 0;
width: 100%;
height: 50px;
border-bottom: solid;
border-bottom-color: black;
}
.headerSection {
float: left;
width: 33%;
height: 100%;
display: table;
text-align: center;
}
.headerSection>.headerItem {
display: table-cell;
vertical-align: middle;
}
#asdf {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
border-radius: 0;
background: #1466C0;
color: #FFAD01;
border-bottom: 0;
}
#asdf:hover {
background-color: #00B2EE;
}
.TOC {
margin-top: 25px;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 999;
}
.dropdown:hover .TOC {
display: block;
}
.TOC a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
#main {
margin-top: 55px;
z-index: 1;
}
<div id="header">
<div class="headerSection">
<div class="dropdown">
<button class="headerItem" id="asdf">☰</button>
<div class='TOC'>
<a href='#OS'>OS Information</a>
<a href='#GI'>General Information</a>
<a href='#DI'>Domain Information</a>
<a href='#SUC'>Start-Up Command</a>
<a href='#shares'>Shares</a>
<a href='#EV'>Environment Vars</a>
<a href='#proc'>Processes</a>
</div>
</div>
</div>
<div class="headerSection">
<h1 class="headerItem">Windows Audit Script Report</h1>
</div>
<div class="headerSection">
<p class="headerItem" id="aede">Run Time: 2018-06-28 10:11:24.145067</p>
</div>
</div>
<div id="main">
<div style='clear:both'></div>
Does anyone have any ideas on how to fix this issue?
It happens because your header has overflow:hidden you should remove overflow hidden
please check the changes :
body
{
margin: 0;
font-family: arial;
}
button
{
border-style: solid;
border-color: black;
border-radius: 5px;
}
a
{
text-decoration: none;
color: blue;
}
#header
{
background-color: #FFF;
position: fixed;
top: 0;
width: 100%;
height: 50px;
border-bottom: solid;
border-bottom-color: black;
}
.headerSection
{
float: left;
width: 33%;
height: 100%;
display: table;
text-align: center;
}
.hidden-height-header{width:66%; float:left; height:50px; overflow:hidden}
.hidden-height-header >.headerSection {width:50%}
.headerSection > .headerItem
{
display: table-cell;
vertical-align: middle;
}
#asdf
{
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
border-radius: 0;
background: #1466C0;
color: #FFAD01;
border-bottom: 0;
}
#asdf:hover
{
background-color: #00B2EE;
}
.TOC {
margin-top: 25px;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 999;
}
.dropdown:hover .TOC {
display: block;
}
.TOC a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
#main
{
margin-top: 55px;
z-index: 1;
}
<body>
<div id="header">
<div class="headerSection">
<div class="dropdown">
<button class="headerItem" id="asdf">☰</button>
<div class='TOC'>
<a href='#OS'>OS Information</a>
<a href='#GI'>General Information</a>
<a href='#DI'>Domain Information</a>
<a href='#SUC'>Start-Up Command</a>
<a href='#shares'>Shares</a>
<a href='#EV'>Environment Vars</a>
<a href='#proc'>Processes</a>
</div>
</div>
</div>
<div class="hidden-height-header">
<div class="headerSection">
<h1 class="headerItem">Windows Audit Script Report</h1>
</div>
<div class="headerSection">
<p class="headerItem" id="aede">Run Time: 2018-06-28 10:11:24.145067</p>
</div>
</div>
</div>
<div id="main">
<div style = 'clear:both'></div>
</div></body>
The issue is the overflow: hidden that you have set on the #header. If you remove that the dropdown should work fine.
jsfiddle: https://jsfiddle.net/1du6f928/1/
I can't figure out why my elements (logo, menu, info box) are outside the light grey container. Could you help me? Many thanks
See: http://jsfiddle.net/vqoudo6d/3/
HTML:
<header class="header">
<div class="header-wrapper">
<img class="header-logo" src="http://lorempixel.com/output/fashion-q-g-284-119-5.jpg">
<nav class="header_nav">
<ul class="header_nav-wrapper">
<li class="header_nav-item"> <a id="aboutOpen" class="header_nav-item-a" href="jkk">l'Atelier</a>
</li>
<li class="header_nav-item"> <a class="header_nav-item-a header_nav-item-a--btn" href="jkjks" target="_blank">La Carte des soins</a>
</li>
<li class="header_nav-item"> <a class="header_nav-item-a header_nav-item-a--btn" href="jkjks" target="_blank">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="infos-pratiques clearfix">
<p class="info-pratiques-tag">Informations pratiques</p>
<div class="info-pratiques-content">
<p>3 rue dfdsf
<br>sdsqdssdd</p>
<p>Lundi:
<br>Mardi:
<br>Mercredi:
<br>Jeudi</p>
</div>
</div>
</header>
<div class="slider">
<ul class="slider__wrapper">
<li class="slider__item">
<div class="box" style="background-image:url(images/test.jpg);background-size: cover;
background-repeat: no-repeat; background-position: 50% 50%;"></div>
</li>
<li class="slider__item">
<div class="box" style="background-image:url(images/test2.jpg);background-size: cover;
background-repeat: no-repeat; background-position: 50% 50%;"></div>
</li>
</ul>
</div>
CSS:
.slider {
position: relative;
margin-left: auto;
margin-right: auto;
width: 90%;
height: 550px;
background: #eee;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
max-width: 1200px;
}
.slider__wrapper {
height: 100%;
list-style: none;
overflow: hidden;
*zoom: 1;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
}
.slider__item {
height: 100%;
float: left;
clear: none;
}
.slider__arrows-item {
position: absolute;
display: block;
margin-bottom: -20px;
padding: 20px;
}
.slider__arrows-item--right {
bottom: 50%;
right: 30px;
}
.slider__arrows-item--left {
bottom: 50%;
left: 30px;
}
.slider__nav {
position: absolute;
bottom: 30px;
}
.slider__nav-item {
width: 12px;
height: 12px;
float: left;
clear: none;
display: block;
margin: 0 5px;
background: #fff;
}
.slider__nav-item--current {
background: #ccc;
}
.slider__nav-item:hover {
background: #ccc;
}
.box {
width: 100%;
height: 100%;
}
.header {
z-index: 999;
width: 100%;
margin-left: auto;
margin-right: auto;
position: absolute;
}
.header-wrapper {
padding: 54px 60px;
}
.header-logo {
float: left;
clear: none;
}
.header_nav {
float: right;
clear: none;
font-family:'Maven Pro', sans-serif;
font-weight: normal;
}
.header_nav-wrapper {
list-style: none;
}
.header_nav-item {
margin-left: 22px;
float: left;
clear: none;
}
.header_nav-item-a {
color: #474032;
text-decoration: none;
}
.header_nav-item-a:hover {
color: #eee;
}
.header_nav-item-a--btn {
padding: 16px 18px;
border-radius: 5px;
border: 1px solid #474032;
background-color: transparent;
}
.header_nav-item-a--donate {
margin-top: -18px;
}
.header_nav-item-a--btn:hover {
border: 1px solid #eee;
}
.info-pratiques-content {
float: left;
clear: both;
margin-top: 14px;
margin-left: 4.52489%;
font-size: 13px;
line-height: 1.38;
color: #433d2b;
}
.info-pratiques-content p {
margin-bottom: 1em;
}
.info-pratiques-tag {
margin-top: 14px;
margin-right: auto;
margin-left: auto;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
background-color: #9d926a;
font-size: 13px;
font-weight: 400;
line-height: 1.38;
text-align: center;
text-transform: uppercase;
color: rgb(65, 61, 45);
}
.infos-pratiques {
position: absolute;
top: 217px;
right: 5.1984375%;
z-index: 26;
width: 221px;
height: 200px;
background-color: rgb(222, 222, 222);
opacity: 0.91;
}
The max-width and the background are on .slider, but your header is not inside of it. just add the background and max-width to body and everything should be fine.
Also keep in mind that absolutely positioned elements are always relative to the closest non-static element (position: fixed, relative, absolute).
edit: I also agree with Paulie_D's comment, try to reduce absolute positioning