Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Trouble = = = = a:hover background
Selamat siang teman2 SK,
Yang saya ingin tanyakan adalah,
mengapa hover background saya tidak full menutup ketika kursor berada di atas link nya, saya sedikit susah menjelaskannya, namun agar mudah di mengerti saya menyertakan gambar dan kodingan nya.
Mohon bantuannya
CSS:
nav{ background-color: #333; margin-top:5px; margin-bottom:30px; border-radius: 5px; height : 35px; color:white; font-family:Arial, Helvatica, sans-serif; font-size:15px; }
.navigation ul li a{ text-decoration:none; color:white; position:relative; top:10px; left:10px; padding-left:12px; }
.navigation ul li a:hover{ background:white; color:black; }
li { display:inline; }
HTML :
- HOME
- DAFTAR KOMIK
- DAFTAR VIDEO
- FILM BIOSKOP
- LOWONGAN
- GAME
- GROUP
- OST ANIME
- PARTNER
- CONTACT
5 Jawaban:
Kodeny disisipin pake ['code']['/code'] biar rapih gan. (ilangin ') Html:
<nav>
<ul>
<li><a class="nav" href="#">HOME</a></li>
<li><a class="nav" href="#">DAFTAR KOMIK</a></li>
<li><a class="nav" href="#">DAFTAR VIDEO</a></li>
<li><a class="nav" href="#">FILM BIOSKOP</a></li>
<li><a class="nav" href="#">GAME</a></li>
<li><a class="nav" href="#">GROUP</a></li>
<li><a class="nav" href="#">OST ANIME</a></li>
<li><a class="nav" href="#">PARTNER</a></li>
<li><a class="nav" href="#">CONTACT</a></li>
</ul>
</nav>
CSS:
ul {
list-style-type: none;
overflow: hidden;
background-color: white;
position: relative;
top: -20px;
}
.nav {
height: 20px;
width: 100px;
margin-top: 12px;
padding: 0;
line-height: 10px;
float: left;
display: inline-block;
}
a.nav,a {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 15px;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color: #333;
}
a.nav:hover,a.nav:focus,a:hover,a:focus {
color: white;
background-color: black;
}
JSFiddle: https://jsfiddle.net/y7L78k96/
Silahkan diedit sendiri...
Terima kasih mas Havok atas bantuannya , by the way itu di depan File css class nav nya ada huruf a,
( a.nav, a )
itu sebagai apa mas havock ? saya belum mengerti, karena setau saya untuk pemanggilan class di css cukup menggunakan titik saja.
@Adityajhordan memanggil tag a yang ada di class nav. Supaya ga bentrok sama link lain.
itu karena link bersifat inline jadi harus diubah ke inline-block untuk lebih jelasnya.. http://jagocoding.com/tutorial/607/Tutorial_Lengkap_Memahami_CSS_Display
@havok siap makasih atas bantuannya mas.. @tony siap, terima kasih atas refrensi nya..