Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Membuat navigasi rapih dengan html dan css
mau bertanya, bagaimana sih membuat navigasi yang rapih, saya sudah mencoba coba kode css nya ko masih saya tidak benar ya , saya inin membuat navigasi seperti di sekolah koding ini yang bersebelahan dengan judul websitenya, sepertinya kesalahan pengukuran width dan heightnya ini kode html dan cssnya.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Membuat Menu Navigasi </title>
<style>
* {
margin:0;
padding:0;
font-family: sans-serif;
}
body {
font-size: 13px;
}
.header-nav {
width: 100%;
height: 100px;
background: aqua;
}
.header-nav header, .header-nav nav {
width: 50%;
float: left;
}
header .header, nav .nav {
width: 80%;
margin: auto;
}
header h1 {
display: block;
width: 100%;
margin-top: 30px;
font-size: 2.5em;
color: white;
}
.nav ul {
background: black;
width: 100%;
text-align: center;
}
.nav li {
display: inline-block;
width: 25%;
}
</style>
</head>
<body>
<div class="header-nav">
<header>
<div class="header">
<h1> M.Khoirul Fikri </h1>
</div>
</header>
<nav>
<div class="nav">
<ul>
<li><a href="#"> Home </a></li>
<li><a href="#"> Contact </a></li>
</ul>
</div>
</nav>
</div>
<main>
</main>
<aside class="sidebar">
</aside>
<footer> </footer>
</body>
</html>
0
1 Jawaban:
<div class="header-nav">
<header>
<div class="header">
<h1> M.Khoirul Fikri </h1>
</div>
</header>
<nav>
<header class="nav">
<ul>
<li><a href="#"><h1>Home</h1></a></li>
<li><a href="#"><h1>Contact </h1></a></li>
</ul>
</header>
</nav>
</div>
1
