Float Left dan Right Menu menggunakan CSS

Float sendiri artinya mengambang sehingga kita kan membahas bagaimana membuat tampilan halaman yang tadinya jatuh kebawah menjadi mengambang (mengapung). Ada banyak sekali tag html yang mempunyai sifat jatuh kebawah.
  • tag p
  • tag div
  • tag img
  • tag li
  • dll
Terkadang kita tidak bermaksud untuk membuat tampilan kebawah, kita ingin tampil kesamping. Nah solusinya kita harus menggunakan properti float di css.

Umumnya tag div akan jatuh kebawah seperti ini.

Mari kita ubah box kuning yang jatuh kebawah menjadi mengapung kiri dan kanan.


#file html
<!DOCTYPE html>
<html>
<head>
<title>Float</title>
<link rel="stylesheet" type="text/css" href="float.css">
</head>
<body>
<div class="kotak1"></div>
<div class="kotak2"></div>
<div class="kotak3"></div>
<div class="kotak4"></div>
</body>
</html>

#file css (float.css)
.kotak1{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.kotak2{
width: 100px;
height: 100px;
background-color: gold;
float: left;
}

.kotak3{
width: 100px;
height: 100px;
background-color: green;
float: right;
}
.kotak4{
width: 100px;
height: 100px;
background-color: gold;
float: right;
}

#tampilan
float left membuat box satu dan dua mengapung kekiri dan float right membuat box tiga dan empat mengapung ke kanan.

Selanjutnya kita akan membuat list menjadi mengapung. Contohnya list seperti ini.
  • Beranda
  • Produk
  • Kontak
  • Tentang Kami
Kita coba membuat list mengapung dan memiliki warna backgroud agar terlihat seperti menu.

#file html
<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="floatlist.css">
</head>
<body>
<ul>
<li>Beranda</li>
<li>Produk</li>
<li>Kontak</li>
<li>Tentang Kami</li>
</ul>
</body>
</html>

#file css (floatlist.css)
ul{
list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: #333333;
}
li{
float: left;
color: white;
padding: 10px;
cursor: pointer;
}
li:hover{
background-color: #111111;
}

#tampilan

Demikian tutorial tentang properti float pada css. Terima Kasih.

Popular posts from this blog

Cara Membuat Kalkulator Dengan Java Script

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

Aplikasi CRUD menggunakan Template Admin LTE