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.

Tags

Post a Comment

Post a Comment

Previous Post Next Post