2
J'ai créé un violon:positionnement HTML: ne peut pas obtenir le droit
https://jsfiddle.net/14f5jro7/
Question: Pourquoi le sous-menu "Familien" (vol stationnaire au-dessus pour le voir) pas apparaît ci-dessous, mais décalé vers la droite? Blabla: J'essaye depuis des heures de construire un menu correct et selon les tutoriels que j'ai lus, le parent devrait être position = relatif et la position enfant = absolue. Ensuite, je peux utiliser en haut et à gauche. C'est ce que j'ai essayé de faire et je ne sais pas pourquoi ça échoue.
HTML:
<body>
<div id="header">
</div>
<div id="menu">
<ul>
<li>
<a href="#">Familien</a>
<div class="sub-menu">
<ul>
<li><a href="#">Familie editieren</a></li>
</ul>
</div>
</li>
<li><a href="#">Patienten</a></li>
<li><a href="#">Materialien</a></li>
<li><a href="#">Proben</a></li>
</ul>
</div>
<div id="main">
<h1>
Welcome to biobank v1.0
</h1>
</div>
<div id="footer">footer</div>
</body>
CSS:
#menu ul {
list-style-type: none
}
#menu li {
display: inline-block;
padding:10px 10px;
margin: 5px;
border-radius: 10px;
border-top:3px solid #777777;
border-right:3px solid #333333;
border-bottom:3px solid #444444;
border-left:3px solid #777777;
background: #eee;
position: relative;
}
.sub-menu {
left:0%;
top: 100%;
z-index: -1;
position:absolute;
}
#menu > ul > li:hover .sub-menu {
z-index: 1;
}
#header {
float: left;
width: 100%;
background: url("images/dna.jpg");
}
#menu {
float: left;
width: 100%;
background: #E6E2E1;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
#main {
float: left;
width: 100%;
min-height: 100%;
background:
linear-gradient(to right, blue, white 20%),
linear-gradient(to top, blue, white 20%)
;
}
#footer {
float: left;
width: 100%;
background-color: white;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}
EDIT: J'ai trouvé ma propre solution, inspirée par ces réponses et d'autres recherches. Ici, il est, je l'espère, il aide les autres:
/* body */
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}
/* header */
#header {
float: left;
width: 100%;
background: url("images/dna.jpg");
}
/* menu */
#menu {
width: 100%;
background: #E6E2E1;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
#menu * {
display: inline-block
}
#menu ul {
list-style-type: none;
}
#menu li {
padding:10px 10px;
border-radius: 10px;
border-top:3px solid #777777;
border-right:3px solid #333333;
border-bottom:3px solid #444444;
border-left:3px solid #777777;
background: #eee;
}
#menu > ul > li {
position: relative;
}
.sub-menu {
padding:0;
left:0%; /* ignores border of parent, manual adjustment after placement needed!!*/
margin-left: -3px; /* gotta be behind left:0 !!!!*/
top: 100%;
margin-top: 3px;
z-index: -1;
position:absolute;
}
#menu > ul > li:hover .sub-menu {
z-index: 1;
}
/* main */
#main {
float: left;
width: 100%;
min-height: 100%;
background:
linear-gradient(to right, blue, white 20%),
linear-gradient(to top, blue, white 20%)
;
}
/* footer */
#footer {
float: left;
width: 100%;
background-color: white;
}
mon problème était double: padding défaut ul ET « position: absolute » ne tient pas compte des frontières de la société mère, par exemple, il utilise le premier pixel avant d'une bordure pour son point d'ancrage . votre réponse n'a pas expliqué ce dernier problème mais vous avez abordé les deux problèmes dans votre solution, merci! – user3182532