Belajar CSS - Mengenal Float Pada CSS
Di dalam pembuatan website, kita banyak menggunakan Properti pada CSS dan salah satunya adalah Float.
Oke selamat datang kembali teman teman, Pada kesempatan ini kita akan membahas tentang Float, sekilas pembahasan ada diatas halaman ini, dan kurang lebih seperti itu pembahasan nya.
Oke teman teman, dibawah ini kita akan mencoba Float yang sebenarnya!! hehe
Oke teman teman, jadi sesuai dengan code diatas itu kita menggunakan float left, dan right serta di tambah lebar pada gambar..
Oke selamat datang kembali teman teman, Pada kesempatan ini kita akan membahas tentang Float, sekilas pembahasan ada diatas halaman ini, dan kurang lebih seperti itu pembahasan nya.
Penjelasan Float
Float merupakan sebuah properti yang banyak digunakan di dalam pembuatan sebuah website, ada 4 value yang biasa kita gunakan di dalam properti ini, yaitu Left, Right, Initial dan Inherit..Penjelasan Sekilas
Jika diartikan Float memiliki arti "mengapung", Maksud mengapung disini berarti elemen yang memilik float tersebut akan dipindahkan ke halaman kiri (left) ataupun kanan (right), seperti yang disebutkan di penjelasan diatas..
float: left; digunakan untuk mengatur bahwa elemen harus mengapung kesebelah kiri dari posisi block / elemen block yang menampung nya.
float: right; digunakan untuk mengatur bahwa elemen harus mengapung kesebelah kanan dari posisi block / elemen block yang menampung nya.
float: none; digunakan bahwa elemen tidak boleh mengapung (float).
float: inherit; value / nilai dari float mengikuti elemen induk yang menampung sebelumnya.
Elemen yang menggunakan float, tidak bisa digunakan untuk elemen yang menggunakan position absolute. contoh seperti code dibawah, coba teman teman hapus property float ataupun property position. dan lihat apa efeknya.
 |
| Float Pada CSS |
<html>
<head>
<meta charset="UTF-8" />
<title>Box Model</title>
<style>
h1 {
margin: 10px;
text-align: center;
}
img {
width: 240px;
height: 150px;
margin: 20px;
float: left;
}
p {
font-size: 20px;
}
#header {
width: 500px;
height: 100px;
background: #00ffab;
float: left;
border: solid 10px;
border-color: #550047;
}
#navkiri {
position: absolute;
width: 500px;
height: 400px;
background: #00ffab;
float: left;
border: solid 10px;
border-color: #550047;
margin-top: 10%;
}
#isi {
width: 750px;
height: 540px;
background: #00ffab;
float: right;
border: solid 10px;
border-color: #550047;
}
</style>
</head>
<body>
<div>
<h1>
Latihan Belajar CSS Float
</h1>
</div>
<div id="header">
<h1>Header</h1>
</div>
<div id="navkiri">
<h1>Navigasi kiri</h1>
</div>
<div id="isi">
<h1>Halaman Isi</h1>
<img src="CSS.png" alt="css" />
<p>
Hai Semua, Halo Teman Teman , Bagaimana Keadaan Teman Teman
Semua? Semoga Baik Baik saja yah. Oke pada Kesempatan ini, kita
akan memasuki Materi Selanjutnya dari HTML, yaitu CSS. Ingin
mengetahui apa itu CSS lebih lengkap? Mari kita jelajahi di Blog
Ini! Nah pada Bagian Ini ada beberapa Tips yang ingin saya
bagikan untuk memudahkan teman teman dalam belajar CSS Yang
pertama ini, teman teman bisa memulai dengan sering berlatih
membuat sebuah halaman web dengan imajinasi kalian sendiri, dan
saya yakin pasti teman teman lebih kreatif untuk mencari kode
ini, kode itu, nah seperti itu Gunakan sebuah plugin atau tools
tambahan pada code editor teman teman, nah kalau saya sih masih
menggunakan Sublime Text, dan saya pakai Emmet untuk
Mempermudahkan nya. Cara Mudah CSS dengan EMMET Teman Teman juga
bisa menggunakan Cheat Sheets CSS, disini Cheat Sheets CSS Nah
teman teman sekalian mungkin cukup itu dulu yang bisa saya
sharing pada kesempatan kali ini, selanjutnya kita akan membahas
Tentang Struktur Dasar CSS.
</p>
</div>
</body>
</html>Oke teman teman, jadi sesuai dengan code diatas itu kita menggunakan float left, dan right serta di tambah lebar pada gambar..
dan hasil dari HTML diatas adalah seperti ini.
 |
| Hasil Float |
Jadi teman teman bisa lihat, contoh pada gambar di Halaman Isi, nah itu kita menggunakan Sebuah Float Left pada gambar yang kita masukan, sehingga teks akan auto mengisi di halaman samping nya.
Teman teman juga bisa mencoba beberapa hal lain dengan Properti Float, bisa menggunakan beberapa Value seperti Left, Right, Initial dan Inherit.
Nah mungkin cukup seperti itu teman teman, terimakasih sudah berkunjung.
Teman teman juga bisa mencoba beberapa hal lain dengan Properti Float, bisa menggunakan beberapa Value seperti Left, Right, Initial dan Inherit.
Nah mungkin cukup seperti itu teman teman, terimakasih sudah berkunjung.
Salam Semangat!!
Posting Komentar untuk "Belajar CSS - Mengenal Float Pada CSS"