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 logo bersebelahan dengan naviagasi
Bagaimana cara mengganti tulisan "logo" dengan sebuah gambar ?
berikut kode saya :
File HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav id="menu">
<ul>
<div id="heading">
<a href="#">Logo</a>
</div>
<li><a href="index.html">Beranda</a></li>
<li><a href="artikel.html">Artikel</a></li>
<li><a href="gambar.html">gambar</a></li>
<li><a href="#">list</a>
<ul>
<li> <a href="ul.html">Tips Sukses (ul)</a></li>
<li> <a href="ol.html">Cara Masak Mie (ol)</a></li>
</ul>
</li>
<li><a href="table.html">Data</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="#">Multimedia</a>
<ul>
<li><a href="audio.html">Audio</a></li>
<li><a href="video.html">Video</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
file style.css
*{
margin: 0px;
padding: 0px;
}
body {
font-size: 14px;
font-family: verdana;
}
#heading{
float: left;
width: 640px;
}
#heading a {
line-height: 65px;
text-decoration: none;
padding-left: 60px;
color:#FFF;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 40px;
}
#menu {
background:#26C4C2;
width: 100%;
height: 65px;
margin: 0px;
padding: 0px;
}
#menu ul {
list-style: none;
}
#menu ul li {
float: left;
line-height: 65px
}
#menu ul li a {
float:left;
width:100px;
display:block;
text-align:center;
color:#FFF;
text-decoration:none;
}
#menu ul ul {
display:none;
list-style:none;
position:absolute;
background-color:#26C4C2;
float: none;
top:65px;
width:190px;
}
#menu ul li a:hover {
background-color:#2E9EA2;
display:block;
}
#menu ul li:hover ul {
display:block;
}
#menu ul ul li a {
display:block;
padding-left:30px;
text-align:left;
width:160px;
height: 60px;
line-height: 60px;
}
#menu ul ul li a:hover {
color:#fff;
}
3 Jawaban:
Di headingnya gunakan tag <img> bukan lagi text <div id="heading"> <a href="#">Logo</a> </div>
Kamu bisa <a href='https://sekolahkoding.com/kelas/belajar-html-dari-dasar'>belajar dasar dasar HTML di sini</a>
Gunakan tag <img> didalam tag <a href> Contoh :
<pre> <a href="#"><img src="gambar.jpg"></a> </pre>
masih belum paham? oke deh aku buatin code nya ;(
HTML
<pre> <!--- <div id="heading"> <a href="#">Logo</a> </div> -->
<div id="heading"> <a href="#"><img src="logo.jpeg" alt="Logo"/></a> </div> </pre>
CSS
<pre> .heading img { max-height: 50px; width: auto } </pre>
