Daftar dan Belajar Sekarang!

Membuat logo bersebelahan dengan naviagasi

foto Rhakim
13 Kontribusi 9 Coto
2 bulan yang lalu
Bagaimana cara mengganti tulisan "logo" dengan sebuah gambar ? http://i.imgur.com/DDPC3Pl.png 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;
}

Jawaban
foto hilmanski
2109 Kontribusi 1668 Coto
2 bulan yang lalu
Di headingnya gunakan tag <img> bukan lagi text <div id="heading"> <a href="#">Logo</a> </div> Kamu bisa belajar dasar dasar HTML di sini

foto muhammadnirwansyah
2 Kontribusi 0 Coto
2 bulan yang lalu
Gunakan tag <img> didalam tag <a href> Contoh :
<a href="#"><img src="gambar.jpg"></a>

foto hellogerafis
17 Kontribusi 1 Coto
1 bulan yang lalu
masih belum paham? oke deh aku buatin code nya ;( HTML
<!--- <div id="heading">
                <a href="#">Logo</a>
            </div> -->

<div id="heading">
                <a href="#"><img src="logo.jpeg" alt="Logo"/></a>
            </div>
CSS
.heading img {
    max-height: 50px;
    width: auto
}


Login untuk diksusi di forum sekolah koding