bonjour,
j'ai un petit problème avec mes z-index
comme la photo si joint
alors je sais pas si ça seras un peut le fouillis pour vous
mes en étant débutant on fais comme on peux "parole de débutant
"
en vous remerciant d'avance
j'ai un petit problème avec mes z-index
comme la photo si joint
alors je sais pas si ça seras un peut le fouillis pour vous
mes en étant débutant on fais comme on peux "parole de débutant
" en vous remerciant d'avance @ charset "UTF-8";
/*liens*/
/*font-family: 'Delius', cursive;*/
/*body*/
/*font-family: 'Domine', serif;*/
/*-- GÉNÉRAL --*/
body, html {
padding: 0;
margin: 0;
}
body {
font-family: 'Domine', serif;
background-image: url(../img/background.jpg);
overflow-x: hidden;
}
a, a:hover {
text-decoration: none;
}
.link {
color: white;
text-decoration: underline;
}
.link:hover {
color:gray;
text-decoration: underline;
}
.container-fluid {
padding: 0;
}
/*-- HEADER --*/
.header {
position: fixed;
top: 0;
background-color: black;
height: 60px;
line-height: 60px;
z-index: 19;
}
.navbar-haut {
float: left;
}
.navbar-haut a {
color: darkgrey;
font-family: 'Delius', cursive;
text-transform: uppercase;
font-weight: bold;
margin-left: 30px;
}
.navbar-haut a:hover {
color: white;
}
/*-- BANNIÉRE --*/
.ban {
width: 100%;
max-width: 100%;
position: relative;
}
.banner {
width: 100%;
max-width: 100%;
}
/*-- CIEL --*/
.ban img {
width: 100%;
max-width: 100%;
}
/*-- ARBRE --*/
.ban2 {
position: absolute;
top:0;
left: 76px;
z-index: 6;
}
/*-- NATURE --*/
.ban3 {
position: absolute;
top: 163px;
}
/*-- GOLDEN --*/
.ban4 {
position: absolute;
top: 437px;
left: 310px;
z-index:7;
}
/*-- COCKER --*/
.ban5 {
position: absolute;
top: 437px;
right: 325px;
}
/*-- NAVBAR --*/
.ban6 {
position: absolute;
top: 198px;
left:452px;
z-index: 20;
}
/*-- LOGO --*/
.ban7 {
position: absolute;
top: 0;
left: 774px;
}
/*-- BARH --*/
.ban8 {
position: absolute;
top: 553px;
left: 0px;
}
/*-- NAVBAR CENTRAL --*/
.menu-navbar {
position: absolute;
top: 271px;
left:488px;
z-index: 21;
}
.menu-navbar a {
color: #672d07;
text-shadow: 1px 1px 1px white;
font-family: 'Delius', cursive;
font-size: 18px;
font-weight: bold;
margin: 20px;
}
.menu-navbar a:hover {
color: black;
transition: 0.9s;
}
/*-- ABOUT --*/
.about {
position: relative;
margin-top: -200px;
text-align: left;
width: 1017px;
margin-left: 452px;
color: white;
font-size: 13px;
z-index:19;
}
.about article {
position:relative;
background-color: black;
}
.about article h2 {
color: grey;
text-align: left;
margin-top: 43px;
font-size: 29px;
font-family: 'Delius', cursive;
}
/*-- IMAGE DROITE ET GAUCHE --*/
img.alignLeft {
float: left;
margin: 0 15px 0 0;
}
img.alignRight {
float: right;
margin: 0px 0 0 15px;
}
img.alignCenter {
display: block;
margin: 0 0 0 15px ;
}
p.alignLeft {
text-align: left;
margin: 25px 0px 0 0px;
}
p.alignRight {
text-align: right;
margin: 12px 0 0 0px;
}
.clear {
clear: both;
}
/*-- FOOTER --*/
.footer h1 {
margin-top: -165px;
text-align: left;
margin-left:470px;
color: dimgray;
font-family: 'Delius', cursive;
font-size: 13px
}
.footer h1 a {
color: dimgray
}
/*-- RESEAU --*/
.facebook {
margin-top: -30px;
text-align: right;
margin-right: 506px;
}
.insta {
margin-top: -25px;
text-align: right;
margin-right: 546px;
}
/*-- Popup*/
input[type="checkbox"]
{
display:none;
}
input[type="checkbox"]:checked ~
.modal,
input[type="checkbox"]
:checked ~
.modal-background {
display: block;
}
.modal {
position: fixed;
top: 10px;
left: 0;
right: 0;
bottom: 0px;
margin: auto;
display: none;
width: 393px;
height: 553px;
background-image: url(../img/les-news/flyers.jpg);
border-radius: 8px;
border: 5px solid white;
z-index: 19;
}
.modal-header {
background-color: rgba(0,0,0,0.10);
height: 10px;
}
/*-- Titre popup --*/
.modal-header h3 {
margin: 0;
box-sizing: border-box;
padding-left: 0px;
line-height: 0px;
color:white;
font-size: 16px;
display: inline-block;
}
.modal-header label {
box-sizing: border-box;float: left;
line-height: 0px;
padding: 0px 0px 0px 0px;
cursor: pointer;
}
.modal-header label:hover img {
opacity: 0.9;
}
.example-label {
background-image: url(../img/les-news/offre-du-mois.jpg);
width: 196px;
height: 279px;
cursor: pointer;
}