Bonjour à tous,
j'ai un léger problème, j'intègre actuellement un site en static puis vers prestashop et Chrome me fait d'étranges chose dans mon header.
2 élements du header ne prennent plus en compte la propriété position:absolute; qui leur est pourtant attribué dans le css, 'jai meme essayer de forcer en mettant directement le style dans l'html , sans effet.
Par contre quand j'inspecte l'élément avec chrome et que je desactive la proprieté position et que je reactive l'élément prend sa place.... Je ne comprend pas ce qu'il se passe alors que tout fonctionne parfaitement sous Fire Fox..
Voici l'html :
j'ai un léger problème, j'intègre actuellement un site en static puis vers prestashop et Chrome me fait d'étranges chose dans mon header.
2 élements du header ne prennent plus en compte la propriété position:absolute; qui leur est pourtant attribué dans le css, 'jai meme essayer de forcer en mettant directement le style dans l'html , sans effet.
Par contre quand j'inspecte l'élément avec chrome et que je desactive la proprieté position et que je reactive l'élément prend sa place.... Je ne comprend pas ce qu'il se passe alors que tout fonctionne parfaitement sous Fire Fox..
Voici l'html :
<!DOCTYPE html>
<html>
<head>
<title>Espace Perso - LePackRT2012.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="container">
<a href="#">
<img src="img/logo-home.png" class="logo-header"/>
<h1><span id="logo-bleu">LePack</span>RT2012<span id="logo-s-fr">.fr</span></h1>
</a>
<div class="menu-espace">
<a href="#">
<div class="panier">
<div class="icon-menu-espace-panier"></div>
<strong>Commander</strong>
</div>
</a>
<div class="espace-client">
<div class="icon-menu-espace-client"></div>
<strong>Espace Client</strong>
<div class="pop-espace-client">
<a href="#"><div class="connexion-menu"></div>Se Connecter</a>
<a href="#"><div class="suscribe-menu"></div><span>S'inscrire au site</span></a>
</div>
</div>
</div>
<nav class="main-menu">
<div class="barre-verte">
<ul>
<li><a href="#">ACCUEIL</a></li>
<li id="propos-menu"><a href="#">
À PROPOS
<div class="sous-menu">
<a href="#">
<div class="quisommesnous-menu">
<img src="img/inter.png" id="img-sous-menu-inter"/>
<h4>Qui Sommes-Nous ?</h4>
<span>Notre équipe, notre réseau, nos références...</span>
</div>
</a>
<a href="#">
<div class="nosetudes-menu">
<img src="img/etudes.png" id="img-sous-menu-etudes"/>
<h4>Nos Études</h4>
<span>Notre méthode, le Pack RT 2012©, Demo Espace Perso</span>
</div>
</a>
</div></a>
</li>
<li id="offres-menu"><a href="#">
NOS OFFRES
<div class="sous-menu">
<a href="#">
<div class="maison-i-menu">
<img src="img/mi.png" id="img-sous-menu-mi"/>
<h4>Maison Individuelle</h4>
<span>Pack RT 2012©, Module permis de construire, Bbio</span>
</div>
</a>
<a href="#">
<div class="devis-menu">
<img src="img/icon-devis.png" id="img-sous-menu-devis"/>
<h4>Collectif / Tertiaire</h4>
<span>Logement collectif, Permis groupés, bâtiments tertiaires</span>
</div>
</a>
</div></a>
</li>
<li id="contact-mainmenu"><a href="#">CONTACT</a></li>
</ul>
</div>
</nav>
</div><!--container-->
</header>
<div class="container"><!-- Contenu de la page -->
<div id="page-projet" class="page">
<h1>Espace <span>Perso</span></h1>
<img src="img/hr-v.png" class="hr-vert"/>
<p class="intro-espace-perso">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam risus metus, tristique vitae nunc non, lacinia bibendum enim. Nam tempor orci vel quam facilisis dapibus.</p>
<nav class="menu-espace-perso">
<ul>
<li class="menu-vert" id="back-projects"><a href="#"><div class="icon-back"></div></a></li>
<li class="menu-vert"><a href="#"><div class="icon-compte"></div>Mon Compte</a></li>
<li class="menu-vert"><a href="#"><div class="icon-projets"></div>Mes Projets</a></li><br/><br/><br/><br/>
<li class="menu-bleu new-project-menu"><a href="#"><div class="icon-newprojet"></div>Ajouter un Projet</a></li>
<li class="menu-vert" id="demo-video"><a href="#"><div class="icon-demo"></div>Demo en Vidéo</a></li>
</ul>
</nav>
<section id="un-projet">
</section>
</div>
</div><!-- Fin contenu page-->
<footer>
</footer>
</html>
/*------------------*/
/* Header */
/*------------------*/
header {
margin-top: -9px;
}
header img.logo-header {
margin-top: 20px;
}
header h1 {
font-family: 'Ubuntu';
font-weight: 100;
letter-spacing: 0.09em;
font-size: 51px;
color: #74b898;
position: absolute;
margin-top: 145px;
display: inline-block;
}
header h1 span#logo-bleu {
color: #468f8a;
}
header h1 span#logo-s-fr {
font-size: 25px;
}
/* ---------------- Menu -------------------- */
nav.main-menu ul {
list-style: none;
background: url('img/bg-menu.png');
height: 71px;
margin-top: -12px;
width: 1246px;
padding-left: 24px;
}
nav.main-menu ul li {
display: inline-block;
color: #5E5E5E;
font-size: 16px;
text-shadow: 0px 2px 1px rgba(255, 255, 255, 0.7);
margin: 15px 40px 0px 40px;
padding-left: 55px;
padding-top: 12px;
height: 26px;
cursor: pointer;
border-right: solid 1px rgba(0, 0, 0, 0.5);
padding-right: 120px;
}
nav.main-menu ul li#contact-mainmenu {
display: inline-block;
color: #5E5E5E;
font-size: 16px;
text-shadow: 0px 2px 1px rgba(255, 255, 255, 0.7);
margin: 15px 40px 0px 0px;
padding-left: 55px;
padding-top: 12px;
height: 26px;
border: none;
padding-right: 0px;
cursor: pointer;
}
/*----------------- Sous Menu -------------------- */
div.sous-menu {
display: none;
}
div.sous-menu h4 {
display: inline-block;
font-variant: small-caps;
font-size: 31px;
margin: 35px 10px 0px;
margin-left: 45px;
color: #777777;
}
div.sous-menu span {
position: absolute;
display: block;
margin: 10px 0px 0px 48px;
}
li#propos-menu:hover div.sous-menu {
display: block;
position: absolute;
background: url('img/bg-sous-menu.png');
height: 116px;
box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
border-top: 3px solid #468f8a;
margin: 27px 0px 0px -440px;
width: 100.1%;
border-radius: 0px 0px 8px 8px;
}
li#offres-menu:hover div.sous-menu {
display: block;
position: absolute;
background: url('img/bg-sous-menu.png');
height: 116px;
box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
border-top: 3px solid #468f8a;
margin: 27px 0px 0px -777px;
width: 100.1%;
border-radius: 0px 0px 8px 8px;
}
div.quisommesnous-menu {
display: inline-block;
margin-left: 90px;
}
img#img-sous-menu-inter {
display: inline-block;
position: absolute;
margin: 30px 0px 0px -40px;
}
div.nosetudes-menu {
display: inline-block;
margin-left: 290px;
}
img#img-sous-menu-etudes {
display: inline-block;
position: absolute;
margin: 25px 0px 25px -60px;
}
div.maison-i-menu {
display: inline-block;
padding: 0px 110px;
}
img#img-sous-menu-mi {
display: inline-block;
position: absolute;
margin: 10px 0px 0px -69px;
}
div.devis-menu {
display: inline-block;
margin-left: 190px;
}
img#img-sous-menu-devis {
display: inline-block;
position: absolute;
margin: 30px 0px 0px -70px;
}
div.menu-espace {
top: 0;
font-family: 'Ubuntu';
font-weight: 100;
width: 500px;
position: absolute;
margin-left: 512px;
display: block;
letter-spacing: 0.09em;
font-size: 23px;
font-variant: small-caps;
color: #fff;
}
div.panier {
width: 214px;
height: 38px;
background-color: #99d0a3;
display: inline-block;
margin-right: 5px;
padding: 22px 5px 5px 20px;
}
div.panier strong {
margin-left: 65px;
position: absolute;
}
div.icon-menu-espace-panier {
background: url('img/sprite-menu-espace.png') no-repeat -4px -1px;
width: 31px;
display: inline-block;
margin: -5px 0px 10px 5px;
position: absolute;
height: 30px;
}
div.espace-client {
background-color: #468f8a;
width: 214px;
height: 38px;
display: inline-block;
margin-right: 5px;
position: absolute;
padding: 22px 5px 5px 15px;
}
div.espace-client strong {
position: absolute;
margin-left: 14px;
}
div.icon-menu-espace-client {
background: url('img/sprite-menu-espace.png') no-repeat -83px -3px;
width: 31px;
margin: -3px -2px 0px 7px;
display: inline-block;
height: 30px;
}
div.espace-client:hover div.icon-menu-espace-client {
background: url('img/sprite-menu-espace.png') no-repeat -114px -3px;
width: 31px;
margin: -3px -2px 0px 7px;
display: inline-block;
height: 30px;
}
div.espace-client div.pop-espace-client {
visibility: hidden;
opacity: 0;
position: absolute; /* important */
top: 150px;
left: 0;
transition: 0.3s ease-out;
-webkit-transition: 0.3s ease-out;
}
div.espace-client:hover div.pop-espace-client, div.espace-client:active div.pop-espace-client {
visibility: visible;
opacity: 1;
top: 75px;
transition: 0.3s ease-out;
-webkit-transition: 0.3s ease-out;
}
div.pop-espace-client {
width: 214px;
padding: 10px;
margin: 0 auto;
font-variant: normal;
font-size: 15px;
line-height: 2em;
background: #468f8a;
border-radius: 7px;
}
div.pop-espace-client::before {
content: '' !important;
position: absolute !important;
top: -10px;
left: 45%;
width: 0;
height: 0;
border-bottom: 10px solid #468f8a;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
/*div.espace-client:active div.icon-menu-espace-client {
background: url('img/sprite-menu-espace.png') no-repeat -42px -2px;
width: 31px;
margin: 4px -2px 0px 7px;
display: inline-block;
height: 31px;
}
*/
div.espace-client div.connexion-menu {
background: url('img/sprite-sous-menu-espace.png') no-repeat -1px 0;
width: 21px;
height: 21px;
margin: 0px 20px 0px 5px;
display: inline-block;
}
div.espace-client div.suscribe-menu {
background: url('img/sprite-sous-menu-espace.png') no-repeat 0 -42px;
width: 24px;
height: 24px;
margin: 2px 4px;
position: absolute;
display: inline-block;
}
div.espace-client div.pop-espace-client span {
margin-left: 46px;
}