Properti float dan clear ini dalam css di bilang merupakan salah satu properti yang juga sering dipakai dalam pembuatan website pada css, namun sebelum kita memulai perkenalan dan percobaan tentang float dan clear saya sebelumnya akan mengucapkan
Salam sobat semua
Alhamdulillahi robbil 'alamiin atas segala nikmat yang telah diberikan pada diri ini dan salah satu nikmat tersebut ialah diri ini masih diberi kesempatan untuk menulis dan berbagi dalam tulisan ini, dan sekalian tulisan ini untuk simpanan saya pribadi karena manusia itu tempat lupa dan salah. Sholawat serta salamku akan tetap terpanjatkan untuk baginda sayyidina Muhammad ibni abdillah S.A.W. beserta kepada keluarga dan sahabatnya.
untuk kesempatan kali ini kita akan mencoba apa yang namanya properti float dalam css. dan biasanya kalau kita menggunakan float maka kita harus juga menggunakan properti clear. untuk float menurut saya adalah kode dalam css untuk mengubah letak posisi selektor dengan nilai atau value left(kiri) dan right(kanan). dan untuk clear adalah suatu kode dalam css yang berfungsi untuk menghilangkan atau membersihkan efek atau pengaruh dari properti float. untuk properti clear ini nilai atau value yang saya tahu yaitu left(kiri) dan right(kanan) dan yang terakhir yang sering saya gunakan ialah both(kedua-duanya).
biar kita lebih paham dan jelas mari kita coba dan terapkan dalam kode. sekarang kalian yang sudah mengikuti tulisan ini silahkan buka filecss_5.html dan style.css nya. dan jangan lupa di duplikat atau di copy dulu biar data yang kemaren tetap aman dan ada. bagi yang baru mengikut silahkan ketik atau copy paste kode css berikut ini dalam text editor kesayangan kalian, kalau saya pakai notepad++.
body{
margin:0;
padding:0;
}
#main{
min-width:150px;
width:100%;
background:#f5f5f5 ;
margin:0px;
font-size:14px;
font-family:arial;
}
.link{
text-decoration:none;
}
.lis{
list-style:square inside;
}
.terlihat{
display:block;
}
#kepala{
background-color:#00acf4;
color:#fff;
padding:7px;
position:fixed;
width:100%;
}
#isi{
background:#fff;
color:#000;
padding:83px 7px 7px 7px;
width:99%;
}
.letakgambar{
float:left;
}
.clear{
clear:both;
}
dan ini untuk kode htmlnya kita coba dulu properti floatnya pada selektor gambar.
<html>
<head>
<title>My Web</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<div id="kepala">
<h1>Websiteku</h1>
</div>
<div id="isi">
<p>Ini adala isi dari main content yang akan saya buat
sebagai website pertama saya
</p>
<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat
website prtama saya
<div>Sekarang kita lagi mencoba properti display
<p class="terlihat">
<a href="http://notemazdopunk.blogspot.com/" target="_blank" class="link">Link Catatan Mazdopunk</a>
</p>
dan dalam ini kita butuh beberapa langkah.
</div>
<p>Macam-macam nama kota di jawa timur:
<ul class="lis">
<li>Probolinggo</li>
<li>Surabaya</li>
<li>Jember</li>
<li>Pasuruan</li>
<li>Malang</li>
</ul>
</p>
<p>
<h1>Probolinggo</h1>
<br>
Probolinggo adalah salah satu kabupaten di propinsi jawa timur. probolinggo ini tidak terlalu besar juga
untuk kabupatennya
<br>
Kota Probolinggo adalah sebuah kota di Provinsi Jawa Timur, Indonesia. Terletak sekitar 100 km sebelah tenggara Surabaya, Kota Probolinggo berbatasan dengan Selat Madura di sebelah utara, serta Kabupaten Probolinggo di sebelah timur, selatan, dan barat. Wikipedia
<ul class="lis">
<li>Luas: 56,67 km²</li>
<li>Peringkat luas wilayah: 75</li>
<li>Provinsi: Jawa Timur</li>
<li>Populasi: 223.159 (2014)</li>
<li>Hotel: Bintang 3 rata-rata seharga Rp 513.036. Lihat hotel</li>
<li>Cuaca: 31 °C, Angin arah Timur Laut dengan kecepatan 11 km/h, Kelembapan 72% weather.com</li>
<li>Waktu setempat: Sabtu 13.26</li>
</ul>
<div class="letakgambar">
<img src="gambar/back1.jpg">
</div>
</p>
</p>
</div>
</div>
</body>
</html>
maka dari kode diatas akan menghasilkan output seperti berikut
karena kita memakai nilai left(kiri) maka gambar akan tetap seperti defaultnya berada di kiri sekarang kita ubah nilai floatnya menjadi right sehingga kodenya akan
seperti berikut ini
body{margin:0;padding:0;}#main{min-width:150px;width:100%;background:#f5f5f5 ;margin:0px;font-size:14px;font-family:arial;}.link{text-decoration:none;}.lis{list-style:square inside;}.terlihat{display:block;}#kepala{background-color:#00acf4;color:#fff;padding:7px;position:fixed;width:100%;}#isi{background:#fff;color:#000;padding:83px 7px 7px 7px;width:99%;}.letakgambar{float:right;}.clear{clear:both;}
dan sekarang dari kode diatas akan menghasilkan output seperti berikut
nah sekarang untuk mengetahui bagaimana pengaruh tanpa properti clear dan dengan properti clear maka kita coba tambahin konten di bawah selektor class letak gambar dengan data terserah, biar lebih rapi dan semua sama maka pakai kode css dibawah ini
body{margin:0;padding:0;}#main{min-width:150px;width:100%;background:#f5f5f5 ;margin:0px;font-size:14px;font-family:arial;}.link{text-decoration:none;}.lis{list-style:square inside;}.terlihat{display:block;}#kepala{background-color:#00acf4;color:#fff;padding:7px;position:fixed;width:100%;}#isi{background:#fff;color:#000;padding:83px 7px 7px 7px;width:99%;}.letakgambar{float:left;}.clear{clear:both;}
dan untuk kode htmlnya seperti berikut
<html>
<head>
<title>My Web</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<div id="kepala">
<h1>Websiteku</h1>
</div>
<div id="isi">
<p>Ini adala isi dari main content yang akan saya buat
sebagai website pertama saya
</p>
<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat
website prtama saya
<div>Sekarang kita lagi mencoba properti display
<p class="terlihat">
<a href="http://notemazdopunk.blogspot.com/" target="_blank" class="link">Link Catatan Mazdopunk</a>
</p>
dan dalam ini kita butuh beberapa langkah.
</div>
<p>Macam-macam nama kota di jawa timur:
<ul class="lis">
<li>Probolinggo</li>
<li>Surabaya</li>
<li>Jember</li>
<li>Pasuruan</li>
<li>Malang</li>
</ul>
</p>
<p>
<h1>Probolinggo</h1>
<br>
Probolinggo adalah salah satu kabupaten di propinsi jawa timur. probolinggo ini tidak terlalu besar juga
untuk kabupatennya
<br>
Kota Probolinggo adalah sebuah kota di Provinsi Jawa Timur, Indonesia. Terletak sekitar 100 km sebelah tenggara Surabaya, Kota Probolinggo berbatasan dengan Selat Madura di sebelah utara, serta Kabupaten Probolinggo di sebelah timur, selatan, dan barat. Wikipedia
<ul class="lis">
<li>Luas: 56,67 km²</li>
<li>Peringkat luas wilayah: 75</li>
<li>Provinsi: Jawa Timur</li>
<li>Populasi: 223.159 (2014)</li>
<li>Hotel: Bintang 3 rata-rata seharga Rp 513.036. Lihat hotel</li>
<li>Cuaca: 31 °C, Angin arah Timur Laut dengan kecepatan 11 km/h, Kelembapan 72% weather.com</li>
<li>Waktu setempat: Sabtu 13.26</li>
</ul>
<div class="letakgambar">
<img src="gambar/back1.jpg">
</div>
<p>
<ul class="lis">
<li>Luas: 56,67 km²</li>
<li>Peringkat luas wilayah: 75</li>
<li>Provinsi: Jawa Timur</li>
<li>Populasi: 223.159 (2014)</li>
<li>Hotel: Bintang 3 rata-rata seharga Rp 513.036. Lihat hotel</li>
<li>Cuaca: 31 °C, Angin arah Timur Laut dengan kecepatan 11 km/h, Kelembapan 72% weather.com</li>
<li>Waktu setempat: Sabtu 13.26</li>
</ul>
</p>
</p>
</p>
</div>
</div>
</body>
</html>
dari kode diatas saya tambahkan kontent selektor class lis di bawah selektor class letakgambar. sekarang dari kode diatas akan menghasilkan output seperti berikut
dari hasil diatas konten selektor class lis akan berada di sebalah kanannya bukan di bawahnya karena masih terpengaruh dengan properti floatnya, dan sekarang kita coba memberi selektor class clear dibawah selektor class letakgambar dengan kode html seperti berikut.
<div class="clear"></div>
jika diterapakan dalam kode html yang sesungguhnya maka akan mejadi seperti berikut
<html>
<head>
<title>My Web</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<div id="kepala">
<h1>Websiteku</h1>
</div>
<div id="isi">
<p>Ini adala isi dari main content yang akan saya buat
sebagai website pertama saya
</p>
<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat
website prtama saya
<div>Sekarang kita lagi mencoba properti display
<p class="terlihat">
<a href="http://notemazdopunk.blogspot.com/" target="_blank" class="link">Link Catatan Mazdopunk</a>
</p>
dan dalam ini kita butuh beberapa langkah.
</div>
<p>Macam-macam nama kota di jawa timur:
<ul class="lis">
<li>Probolinggo</li>
<li>Surabaya</li>
<li>Jember</li>
<li>Pasuruan</li>
<li>Malang</li>
</ul>
</p>
<p>
<h1>Probolinggo</h1>
<br>
Probolinggo adalah salah satu kabupaten di propinsi jawa timur. probolinggo ini tidak terlalu besar juga
untuk kabupatennya
<br>
Kota Probolinggo adalah sebuah kota di Provinsi Jawa Timur, Indonesia. Terletak sekitar 100 km sebelah tenggara Surabaya, Kota Probolinggo berbatasan dengan Selat Madura di sebelah utara, serta Kabupaten Probolinggo di sebelah timur, selatan, dan barat. Wikipedia
<ul class="lis">
<li>Luas: 56,67 km²</li>
<li>Peringkat luas wilayah: 75</li>
<li>Provinsi: Jawa Timur</li>
<li>Populasi: 223.159 (2014)</li>
<li>Hotel: Bintang 3 rata-rata seharga Rp 513.036. Lihat hotel</li>
<li>Cuaca: 31 °C, Angin arah Timur Laut dengan kecepatan 11 km/h, Kelembapan 72% weather.com</li>
<li>Waktu setempat: Sabtu 13.26</li>
</ul>
<div class="letakgambar">
<img src="gambar/back1.jpg">
</div>
<div class="clear"></div>
<p>
<ul class="lis">
<li>Luas: 56,67 km²</li>
<li>Peringkat luas wilayah: 75</li>
<li>Provinsi: Jawa Timur</li>
<li>Populasi: 223.159 (2014)</li>
<li>Hotel: Bintang 3 rata-rata seharga Rp 513.036. Lihat hotel</li>
<li>Cuaca: 31 °C, Angin arah Timur Laut dengan kecepatan 11 km/h, Kelembapan 72% weather.com</li>
<li>Waktu setempat: Sabtu 13.26</li>
</ul>
</p>
</p>
</p>
</div>
</div>
</body>
</html>
sehingga ketika kita load di browser maka konten dari selektor class lis akan berpindah di bawah selektor class letakgambar karena pengaruh floatnya sudah habis setelah di beri selektor class clear, dan jika di lihat maka akan tampak seperit gambar berikut
sekarang kita coba terapkan dalam peletakan konten dan sidebar, seperti layaknya orang orang yang lain kalau membuat tata letak website mereka. sekarang pertama kita buat selektor id isi di buat left dan kita buat baru selektor id sidekanan untuk selektor sidebar sebelah kanan. sehingga jika diterapkan dalam kode css akan menjadi seperti berikut
body{margin:0;padding:0;}#main{min-width:150px;width:100%;background:#f5f5f5 ;margin:0px;font-size:14px;font-family:arial;}.link{text-decoration:none;}.lis{list-style:square inside;}.terlihat{display:block;}#kepala{background-color:#00acf4;color:#fff;padding:7px;position:fixed;width:100%;}#isi{background:#e8e8e8;color:#000;padding:83px 7px 7px 7px;width:71%;margin-right:17px;float:left;min-width:425px;}#sidekanan{float:left;width:23%;padding:83px 7px 7px 7px;background:#e8e8e8;min-width:345px;}.letakgambar{float:left;}.clear{clear:both;}
dan sekarang kita tambahin nih di kode htmlnya selektor id sidekanan di bawahnya side isi sehingga akan menjadi seperti berikut
<html>
<head>
<title>My Web</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<div id="kepala">
<h1>Websiteku</h1>
</div>
<div id="isi">
<p>Ini adala isi dari main content yang akan saya buat
sebagai website pertama saya
</p>
<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat
website prtama saya
<div>Sekarang kita lagi mencoba properti display
<p class="terlihat">
<a href="http://notemazdopunk.blogspot.com/" target="_blank" class="link">Link Catatan Mazdopunk</a>
</p>
dan dalam ini kita butuh beberapa langkah.
</div>
<p>Macam-macam nama kota di jawa timur:
<ul class="lis">
<li>Probolinggo</li>
<li>Surabaya</li>
<li>Jember</li>
<li>Pasuruan</li>
<li>Malang</li>
</ul>
</p>
<p>
<h1>Probolinggo</h1>
<br>
Probolinggo adalah salah satu kabupaten di propinsi jawa timur. probolinggo ini tidak terlalu besar juga
untuk kabupatennya
<br>
Kota Probolinggo adalah sebuah kota di Provinsi Jawa Timur, Indonesia. Terletak sekitar 100 km sebelah tenggara Surabaya, Kota Probolinggo berbatasan dengan Selat Madura di sebelah utara, serta Kabupaten Probolinggo di sebelah timur, selatan, dan barat. Wikipedia
<ul class="lis">
<li>Luas: 56,67 km²</li>
<li>Peringkat luas wilayah: 75</li>
<li>Provinsi: Jawa Timur</li>
<li>Populasi: 223.159 (2014)</li>
<li>Hotel: Bintang 3 rata-rata seharga Rp 513.036. Lihat hotel</li>
<li>Cuaca: 31 °C, Angin arah Timur Laut dengan kecepatan 11 km/h, Kelembapan 72% weather.com</li>
<li>Waktu setempat: Sabtu 13.26</li>
</ul>
<div class="letakgambar">
<img src="gambar/back1.jpg">
</div>
<div class="clear"></div>
<p>
<ul class="lis">
<li>Luas: 56,67 km²</li>
<li>Peringkat luas wilayah: 75</li>
<li>Provinsi: Jawa Timur</li>
<li>Populasi: 223.159 (2014)</li>
<li>Hotel: Bintang 3 rata-rata seharga Rp 513.036. Lihat hotel</li>
<li>Cuaca: 31 °C, Angin arah Timur Laut dengan kecepatan 11 km/h, Kelembapan 72% weather.com</li>
<li>Waktu setempat: Sabtu 13.26</li>
</ul>
</p>
</p>
</p>
</div>
<div id="sidekanan">
<p>
<h3>Informasi tentangku</h3>
<table>
<tr>
<td valign="top">Alamat</td>
<td>Probolinggo Indonesia</td>
</tr>
<tr>
<td valign="top">Status</td>
<td>Menikah, dan ingin menikah lagi hehehe</td>
</tr>
</table>
</p>
</div>
<div class="clear"></div>
</div>
</body>
</html>
dan dari kode diatas akan dihasilkan output seperti berikut
jika browsernya diperkecil maka untuk selektor isi dan side kanan masih korat karit, untuk biar auto resize nanti kita lanjut di next tulisan.
untuk tulisan float dan clear kali ini saya rasa cukup sekian dulu dan mudah-mudahan bisa memberi dan membawa manfaat untuk kita semua, Aamiiin.
Komentar
Posting Komentar