Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
menu responsive
sebelum memakai z-index
<a href='[url=https://postimg.org/image/5uy3kqs9v/]
[/url]
'>[url=https://postimg.org/image/5uy3kqs9v/][/url]
</a>
sesudah memakai z-index
<a href='
[url=https://ibb.co/gZdk2a]
[/url]
'>
[url=https://ibb.co/gZdk2a][/url]
</a>
gan saya mau tanya kan saya bikin menu top dengan css terus saya kasih gambar di bawah menu itu pas layar saya kecilin menu nya kan ikut ke bawah tapi karna ada gambar jadi terhalang terus saya pakai z-index di gambar tapi konten lain yang harusnya di bawah gambar malah naek jadi di dalam gambar gimana yah cara nya supaya menu nya tidak terhalang gambar dan konten lain yang seharusnya di bawah gambar gak nimpa gambar/ berada di dalam gambar mohon bantuan dan jawabannya! terima kasih.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>branda</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
padding: 0;
margin: 0;
}
.header{
position: absolute;
width: 100%;
height: 340px;
z-index: -5;
}
.navbar{
width: 100%;
background: #84a7b2;
height: 50px;
border: 1px solid black;
z-index: 10;
}
.navbar .navigation{
width: 100%;
float: right;
box-sizing: content-box;
}
.navbar ul{
left: 100px;
float:right;
box-sizing: border-box;
}
.navbar > .navigation > ul > li{
display: inline-block;
list-style: none;
margin: 0;
background: #f23f3f;
padding: 10px;
float: left;
text-align: center;
box-sizing: border-box;
}
.navbar > .navigation > ul > li:hover{
background: rgba( 244, 30, 30, 0.806 );
}
.navbar > .navigation > ul > li:hover > a{
color: black;
}
.navbar > .navigation > ul > li > a{
display: block;
min-width: 120px;
height: 30px;
text-align: center;
line-height: 30px;
color: white;
text-decoration:none;
}
.navbar .navigation ul li ul li{
display: none;
}
.navbar ul li:hover ul li{
display: block;
}
.navbar .navigation ul li ul{
width: 100%;
margin: 0;
}
.navbar .navigation ul li ul li {
background: black;
height: 20px;
width: 100%;
padding:10px;
position: relative;
z-index: 10;
left: -10px;
top: 10px;
}
.navbar .navigation ul li ul li a{
text-decoration: none;
color: white;
}
.navbar .navigation ul li ul li:hover{
background: rgba( 248, 140, 98, 0.722 );
}
label{
position: relative;
left: -2px;
top: 0px;
width:50px;
text-align: center;
height: 27px;
float: right;
line-height: 23px;
display: none;
border: 1px solid black;
padding: 10px;
}
#toggle{
display: none;
}
.navbar p.logo{
display: inline-block;
float:left;
position: relative;
top:-1px;
padding: 15px;
margin-right: 20px;
font-weight: bold;
color: #1c1c0c;
}
@media screen and (max-width:860px){
.navbar{
width: 100%;
}
.navbar p.logo{
width: 100%;
float: none;
text-align:center;
}
.navbar > .navigation > ul {
float: none;
}
.navbar > .navigation > ul > li{
width: 20%;
border-right: 1px solid white;
}
.navbar > .navigation > ul > li:last-child{
border-right: none;
}
}
@media screen and (max-width:720px){
.navbar{
width: 100%;
}
label{
display: block;
cursor: pointer;
}
.navbar p.logo{
width: auto;
}
.navbar > .navigation > ul >li{
display: none;
}
.navbar .navigation ul li{
width: 100%;
border-bottom: 1px solid white;
}
#toggle:checked + ul > li{
display: block;
}
}
.bungkus{
height: 40%;
width: 100%;
}
.bungkus .content{
width: 100%;
height: 30%;
padding: 10px;
background-color: #30e311;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar">
<div class="navigation">
<p class="logo">Alone.com</p>
<label for="toggle" class="show">Menu</label>
<input type="checkbox" id="toggle"/>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Category</a>
<ul>
<li><a href="#">Html</a></li>
<li><a href="#">Css</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">php</a></li>
</ul>
</li>
<li><a href="#">Forum</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</nav>
<img src="media/pexels-photo-66421.jpeg" class="header">
</div>
<div class="bungkus">
<div class="content">
<h3>SELAMAT DATANG</h3>
</div>
</div>
</body>
</html>
0
1 Jawaban:
mungkin maksudnya gini?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>branda</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
padding: 0;
margin: 0;
}
.header{
position: absolute;
width: 100%;
height: 340px;
z-index: -5;
}
.navbar{
width: 100%;
background: #84a7b2;
height: 50px;
border: 1px solid black;
z-index: 10;
}
.navbar .navigation{
width: 100%;
float: right;
box-sizing: content-box;
}
.navbar ul{
left: 100px;
float:right;
box-sizing: border-box;
}
.navbar > .navigation > ul > li{
display: inline-block;
list-style: none;
margin: 0;
background: #f23f3f;
padding: 10px;
float: left;
text-align: center;
box-sizing: border-box;
}
.navbar > .navigation > ul > li:hover{
background: rgba( 244, 30, 30, 0.806 );
}
.navbar > .navigation > ul > li:hover > a{
color: black;
}
.navbar > .navigation > ul > li > a{
display: block;
min-width: 120px;
height: 30px;
text-align: center;
line-height: 30px;
color: white;
text-decoration:none;
}
.navbar .navigation ul li ul li{
display: none;
}
.navbar ul li:hover ul li{
display: block;
}
.navbar .navigation ul li ul{
width: 100%;
margin: 0;
}
.navbar .navigation ul li ul li {
background: black;
height: 20px;
width: 100%;
padding:10px;
position: relative;
z-index: 10;
left: -10px;
top: 10px;
}
.navbar .navigation ul li ul li a{
text-decoration: none;
color: white;
}
.navbar .navigation ul li ul li:hover{
background: rgba( 248, 140, 98, 0.722 );
}
label{
position: relative;
left: -2px;
top: 0px;
width:50px;
text-align: center;
height: 27px;
float: right;
line-height: 23px;
display: none;
border: 1px solid black;
padding: 10px;
}
#toggle{
display: none;
}
.navbar p.logo{
display: inline-block;
float:left;
position: relative;
top:-1px;
padding: 15px;
margin-right: 20px;
font-weight: bold;
color: #1c1c0c;
}
@media screen and (max-width:860px){
.navbar{
width: 100%;
}
.navbar p.logo{
width: 100%;
float: none;
text-align:center;
}
.navbar > .navigation > ul {
float: none;
}
.navbar > .navigation > ul > li{
width: 20%;
border-right: 1px solid white;
}
.navbar > .navigation > ul > li:last-child{
border-right: none;
}
}
@media screen and (max-width:720px){
.navbar{
width: 100%;
}
label{
display: block;
cursor: pointer;
}
.navbar p.logo{
width: auto;
}
.navbar > .navigation > ul >li{
display: none;
}
.navbar .navigation ul li{
width: 100%;
border-bottom: 1px solid white;
}
#toggle:checked + ul > li{
display: block;
}
}
.bungkus{
height: 40%;
width: 100%;
}
.bungkus .content{
width: 100%;
height: 30%;
padding: 10px;
background-color: #30e311;
}
.hero{
background-img: url(media/pexels-photo-66421.jpeg);
background-attachment: scrool;
background-position: center center;
background-size: cover;
height: 100vh;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar">
<div class="navigation">
<p class="logo">Alone.com</p>
<label for="toggle" class="show">Menu</label>
<input type="checkbox" id="toggle"/>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Category</a>
<ul>
<li><a href="#">Html</a></li>
<li><a href="#">Css</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">php</a></li>
</ul>
</li>
<li><a href="#">Forum</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</nav>
</div>
<div class="hero"></div>
<div class="bungkus">
<div class="content">
<h3>SELAMAT DATANG</h3>
</div>
</div>
</body>
</html>
1
