Belajar CSS Part 11 : Mengatur Float Dengan CSS
MENGATUR FLOAT DENGAN CSS
Teknik Floating dalam web design merupakan kebutuhan yang paling banyak diperlukan. Float berfungsi untuk mengatur letak element secara Horizontal. Ada emapat value yang dapat digunakan di properti float yaitu left, right, inherit, none.
Salah satu contoh yang sering digunakan dengan teknik Floating adalah Membuat posisi gambar disamping teks pada website
index.html
<!DOCTYPE html>
<html>
<head>
<title>Border style CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tutorial Float dengan CSS di <br/>
Script_Kiddies</h1>
<div class="kotak">
<img class="gambar" src="background.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum efficitur neque ac feugiat. Maecenas tincidunt, ex sit amet finibus gravida, leo lorem venenatis lacus, a rutrum tellus erat a ipsum. Praesent at ullamcorper nibh, id finibus arcu. Praesent facilisis rhoncus elit vitae interdum. Integer sagittis ultrices tellus, sed euismod eros gravida eu. Sed porta in augue et molestie. Phasellus tempor efficitur arcu, vitae auctor sem tincidunt ultrices. Sed porta vehicula ante, vitae varius urna ullamcorper ut. Vivamus est augue, iaculis in pretium sit amet, mollis ut mauris. Donec sit amet justo vel eros ultrices sodales at ac nisl. Curabitur a ornare sapien. Curabitur consequat scelerisque mauris, ut auctor urna sodales vitae.
<br><br>
Aenean ornare quam eu lorem lobortis fermentum. In vel urna a quam sodales vestibulum vitae a mauris. Integer id metus a nulla laoreet gravida. Ut sem dui, ultricies et ultricies non, blandit id neque. Pellentesque eu lacus magna. Aliquam in eleifend velit. In posuere lectus magna, ac suscipit diam ultricies vitae. Donec tempus hendrerit dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum efficitur neque ac feugiat. Maecenas tincidunt, ex sit amet finibus gravida, leo lorem venenatis lacus, a rutrum tellus erat a ipsum. Praesent at ullamcorper nibh, id finibus arcu. Praesent facilisis rhoncus elit vitae interdum. Integer sagittis ultrices tellus, sed euismod eros gravida eu. Sed porta in augue et molestie. Phasellus tempor efficitur arcu, vitae auctor sem tincidunt ultrices. Sed porta vehicula ante, vitae varius urna ullamcorper ut. Vivamus est augue, iaculis in pretium sit amet, mollis ut mauris. Donec sit amet justo vel eros ultrices sodales at ac nisl. Curabitur a ornare sapien. Curabitur consequat scelerisque mauris, ut auctor urna sodales vitae.
</p>
</div>
</body>
</html>
style.css
h1{
text-align: center;
}
.gambar{
width: 300px;
float: left;
margin-right: 10px;
}
Perhatikan pada contoh diatas. Kita meletakkan float:left pada element gambar sehingga gambar berada disamping kiri dan text akan menjorok mengikuti element gambar.
untuk lebih lanjut anda bisa mencoba menggunakan float:right dan inherit untuk melihat perbedaan dari masing-masing value property float CSS. Sekian Terima Kasih
Referensi : Malas Ngoding
TUTORIAL CSS LAINYA
- Belajar CSS Part 1 : Pengertian dan Mengenal CSS
- Belajar CSS Part 2 : Cara Penulisan CSS
- Belajar CSS Part 3 : Mengubah Background Dengan CSS
- Belajar CSS Part 4 : Margin dan Padding CSS
- Belajar CSS Part 5 : Mengatur Font Dengan CSS
- Belajar CSS Part 6 : Mengatur Hyperlink Dengan CSS
- Belajar CSS Part 7 : Mengatur Format Text Dengan CSS
- Belajar CSS Part 8 : Mengenal Position CSS
- Belajar CSS Part 9 : Mengatur Border Dengan CSS
- Belajar CSS Part 10 : Mengatur List Dengan CSS
- Belajar CSS Part 11 : Mengatur Float Dengan CSS
Tidak ada komentar :
Posting Komentar