Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Error pada bagian header
Saya sedang membuat website menggunakan html5 , css3 namun ketika saya ingin mengetik text baru pada div baru , text tersebut muncul pada sebelah header bukan dibawahnya.
image.png
image.png
berikut html saya : <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Pembelian </title>
<link rel="icon" href="asset/icon.jpg">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css">
</head>
<body>
<div class="background">
<aside class="menubar">
<div class="logo">
<a href="" class="alogo"><i class="fa fa-store"></i> Pembelian </a>
<ul class="ul1">
<li>
<a href=""> <i class="fa fa-home"></i> Home </a>
</li>
</ul>
<ul class="ul2">
<li>
<a href=""> <i class="fa fa-sign-in-alt"></i> Login</a>
</li>
<li>
<a href=""> <i class="fa fa-registered"></i> Register</a>
</li>
<li>
<a href=""> <i class="fa fa-shopping-basket"></i> Pembelian </a>
</li>
<li>
<a href=""> <i class="fa fa-database"></i> Management Data </a>
</li>
</ul>
</div>
</aside>
<div class="top">
<header class="hdr">
<div class="headcont">
<button class="bar"> <i class="fa fa-bars"></i> </button>
<div class="ssi">
<ul class="ul4">
<li>
<h3> Sekolah Sistem Informasi</h3>
</li>
</ul>
</div>
<div class="admin">
<ul class="ul3">
<li>
<h3><i class="fa fa-user"></i> Administrator </h3>
</li>
</ul>
</div>
</div>
</header>
</div>
dan berikut css saya :
*{
padding: 0;
margin: 0;
list-style-type: none;
}
.background{
background-color: rgba(18,19,23,1);
height: 947px;
display: flex;
}
.menubar{
background-color: rgba(26,28,35,1);
z-index: 20;
}
@media (min-width:768px) {
.menubar{
display: block;
}
}
.logo{
padding: 20px;
}
.alogo{
text-decoration: none;
color : white;
font-size: x-large;
margin: 16px 16px 16px 16px;
}
.ul1{
padding-top: 48px;
padding-bottom: 0px;
}
.ul1 li{
box-sizing: border-box;
display: list-item;
padding: 12px 16px 12px 16px;
}
.ul1 a{
text-decoration: none;
color: white;
font-size: large;
align-items: center;
display: inline-flex;
width: 100%;
}
.ul1 i{
margin-right: 15px;
}
.ul2{
display: block;
margin-block-start: 0px;
margin-block-end: 0px;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
}
.ul2 li{
position: relative;
padding: 12px 16px 12px 16px;
}
.ul2 a{
text-decoration: none;
color: white;
font-size: large;
align-items: center;
display: inline-flex;
}
.ul2 i{
margin-right: 15px;
}
.top{
width: 100%;
display: flex;
flex-direction: column;
flex: 1 1 0%;
}
.hdr{
display: block;
background-color: rgba(26,28,35,1);
z-index: 10;
padding-top: 36px;
padding-bottom: 36px;
}
.headcont{
color: rgba(202,191,253,1);
padding-left: 20px;
padding-right: 20x;
margin-left: 0;
margin-right: 0;
display: flex;
justify-content: space-between;
height: 100%;
align-items: center;
width: 100%;
}
@media (min-width :768px) {
.headcont{
max-width: 768px;
}
}
.bar{
padding: 5px;
margin-left: -5px;
margin-right: 20px;
cursor: pointer;
display: inline-block;
}
@media (min-width : 768px) {
.bar{
display: none;
}
}
.ssi{
align-items: center;
}
.admin{
flex-direction: column;
}
.mid{
height: 100%;
overflow-y: auto;
display: block;
justify-content: st;
}
<main class="mid">
<div class="content">
<h2> wwfwfwf w</h2>
</div>
</main>
</div>
</body>
</html>
Tanggapan
Kode kamu sulit dibaca, coba taro di tag kode dan dirapikan agar bisa dibantu
Uplaod ke js fiddle atau rapihkan susah di baca betul kata om di atas
"text tersebut muncul pada sebelah header bukan dibawahnya" . Text yang mana ya? terus mau nya jadi seperti apa?
1 Jawaban:
<div>coba code nya taro di https://carbon.now.sh trus export baru share ke sini</div>
