Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
menu responsive
gan saya mau tanya kan sayq 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 gk nimpa gambar mohon bantuannya
0
3 Jawaban:
[[/url]
[url=https://id.imgbb.com/]upload photo[/url] '> [url=https://ibb.co/frpbQv]
[/url]
[url=https://id.imgbb.com/]upload photo[/url]]( [url=https://ibb.co/frpbQv]<img src=)
ini gan scriptnya mohon bantuannya
<!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
Urutannya jadikan seperti ini. Sebenernya nggak peru z-index. Cukup pake position aja. Karena img nya ada css nya kalau masuk div.
<div class="bungkus">
<div class="content">
<h3>SELAMAT DATANG</h3>
</div>
</div>
<img src="tanya.jpg" class="header">
0
