Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
button1 dan button2 bertumpuk
misi gan...ini button kok bertumpuk knapa ya gan.. antara button1 dan button2 bertumpuk..jadi button1 ada di belakang button2..gmna ya ngtasi nya....mhon bntuan para master ini skrip css nya
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 5px;
margin:20px;
cursor:pointer;
text-align: center;
display: inline-block;
font-size: 24px;
border-radius: 10%;
top:50px;
position:fixed;
float:left;
font-family:Arial, Helvetica, sans-serif;
left:207px; /*untuk menggeser posisi dari kiri */
}
ini hover nya
.button:hover {
background-color:#292FED;
color: #000;
border-radius:40%;
}
trus ini pemanggilan di html nya
<div class="button">kamu </div>
<div class="button"> dan</div>
3 Jawaban:
penyebabnya karena agan pake position:fixed ditambah top dan leftnya nilainya sama jadinya menumpuk. coba hapus position fixednya pasti terlihat. kalau agan mau buat buttonnya tidak terscroll masukkan aja kedalam 1 kontainer tertentu. misalnya: html
<div id="anti_scroll">
<div class="button">Kamu</div>
<div class="button">Dan</div>
</div>
css
#anti_scroll{
background-color:#800000;
width:100%;
padding:20px 40px;
position:fixed;
box-sizing:border-box;}
.button{
background-color: #4CAF50;
color: white;
margin-right:20px;
cursor:pointer;
display: inline-block;
font-size: 24px;
border-radius: 10%;
font-family:Arial, Helvetica, sans-serif;
}
.button:hover {
background-color:#292FED;
color: #000;
border-radius:40%;}
Jelas sama karena 2 button berbeda dengan css top dan left yang sama. Buat 2 css untuk masing-masing button. Button pertama pakai class button_satu dan button kedua pakai class button_dua dan ganti nilai pada top and left masing masing class. Contoh:
.button_satu {
border-radius: 10%;
top:50px;
position:fixed;
float:left;
font-family:Arial, Helvetica, sans-serif;
left:207px; /*untuk menggeser posisi dari kiri */
}
Kode di atas untuk class button_satu. Yang dibawah ini untuk class button_dua.
.button_dua {
border-radius: 10%;
top:100px;
position:fixed;
float:left;
font-family:Arial, Helvetica, sans-serif;
left:100px; /*untuk menggeser posisi dari kiri */
