Postingan lainnya
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>
