CSS Float

CSS Float digunakan untuk memposisikan elemen dalam sebuat layout halaman website. Sebuah elemen bisa diposisikan seakan-akan berada mengapung diantara elemen setelahnya. Beberapa value yang digunakan untuk property float yaitu : left, right, none. Secara default float memiliki nilai none.

float: none menentukan bahwa sebuah elemen tidak boleh mengapung (float).

float: none;<!DOCTYPE html> <html> <head> <title>CSS Float</title> </head> <body> <img src="codepolitan.jpg"> <p>CodePolitan adalah media edukasi dan informasi tentang pemrograman dan teknologi. CodePolitan dibangun untuk memfasilitasi para developer dalam mendapatkan informasi dan pengetahuan seputar pemrograman dan teknologi. Konten-konten yang ada di CodePolitan disusun sedemikian rupa dan dalam bahasa Indonesia agar mudah dipahami oleh para developer Indonesia. </p> </body> </html>

Bila kita lihat pada kode diatas float tidak di inisialisasi valuenya maka secara defaultbernilai none, sehingga tampilannya akan seperti di bawah ini

float: left digunakan untuk menentukan bahwa sebuah elemen harus mengapung (float) disebelah kiri dari elemen blok yang menampugnya .

float: left;<!DOCTYPE html> <html> <style> img{ float: left; padding-right: 10px; } </style> <head> <title>CSS Float</title> </head> <body> <img src="codepolitan.jpg"> <p>CodePolitan adalah media edukasi dan informasi tentang pemrograman dan teknologi. CodePolitan dibangun untuk memfasilitasi para developer dalam mendapatkan informasi dan pengetahuan seputar pemrograman dan teknologi. Konten-konten yang ada di CodePolitan disusun sedemikian rupa dan dalam bahasa Indonesia agar mudah dipahami oleh para developer Indonesia. </p> </body> </html>

Bila kita lihat pada kode diatas kita meletakan float: left pada elemen gambar sehingga secara otomatis gambar akan diletakan disamping kiri dan text akan menjorok mengikuti elemen gambar.

float: right digunakan untuk menentukan bahwa sebuah elemen harus mengapung (float) disebelah kanan dari elemen blok yang menampugnya .

float: right;<!DOCTYPE html> <html> <style> img{ float: right; padding-right: 10px; } </style> <head> <title>CSS Float</title> </head> <body> <img src="codepolitan.jpg"> <p>CodePolitan adalah media edukasi dan informasi tentang pemrograman dan teknologi. CodePolitan dibangun untuk memfasilitasi para developer dalam mendapatkan informasi dan pengetahuan seputar pemrograman dan teknologi. Konten-konten yang ada di CodePolitan disusun sedemikian rupa dan dalam bahasa Indonesia agar mudah dipahami oleh para developer Indonesia. </p> </body> </html>

Bila kita lihat pada kode diatas kita meletakan float: right pada elemen gambar sehingga secara otomatis gambar akan diletakan disamping kanan.

CSS Position

Seperti yang kita tahu, CSS Position itu terdiri dari 4 nilai, yaitu static, relative, absolute, dan fixed. Secara default, tag-tag yang kita buat itu sudah memiliki nilai position:static. Berikut kita bahas lebih jauh dari keempat css position tersebut :

Static

position: static;
  1. Static adalah nilai default dari tiap-tiap elemen ketika tidak diberi properti position
  2. Menggunakan position selain static (non-static),akan membuat sebuah elemen menjadi seolah olah berbeda dimensi dari elemen lainnya.
  3. Elemen yang diberi position selain static dapat menggunakan properti top, left, bottom dan right untuk mengatur posisinya .

gambar1

Relative

position: relative;
  1. Ketika kita menggerakan elemen dengan posisi relative (menggunakan properti top, left. bottom dan right), ruang yang ditempati elemen tersebut masih ada
  2. Ketika kita menggerakan elemen dengan posisi relative, elemen akan bergerak relatif terhadap posisi semula-nya
  3. Jika kita memberi properti top: 0; dan left: 0; maka elemen tidak berubah posisinya.

gambar1

Absolute

position: absolute;
  1. Ketika kita menggerakan elemen dengan posisi absolute (menggunakan properti top, left, bottom dan right), ruang yang ditempati oleh elemen tersebut dianggap tidak ada.
  2. Ketika kita menggerakan elemen dengan posisi absolute, elemen akan bergerak relatif terhadap posisi dan elemen parent-nya, selama elemen parent-nya memiliki posisi yang juga non-static.
  3. Jika kita memberi properti top: 0; dan left: 0; maka elemen akan berada di ujung kiri atas dari elemen-nya

gambar1

Jika Absolute tidak memiliki parent relative maka posisinya akan seperti berikut ini :

gambar1

Tetapi jika Absolute memiliki parent relative maka absolute akan menempel pada parent relative seperti dibawah ini :

gambar1

Fixed

position: fixed;
  1. Ketika kita menggerakan elemen dengan posisi fixed (menggunakan properti top, left, bottom dan right), ruang yang ditempati oleh elemen tersebut dianggap tidak ada
  2. Ketika kita menggerakan elemen dengan posisi absolute, elemen akan bergerak relatif terhadap window (browser), meskipun elemen parent-nya bernilai non-static
  3. Jika kita memberi properti top: 0; dan left: 0; maka elemen akan berada di ujung kiri atas dari elemen parent-nya
  4. Elemen akan 'terkunci' dan tidak bergerak dari posisinya meskipun halaman di-scroll. 

    Apa CSS Background itu ?

    Properties background dalam css digunakan untuk mendefinisikan efek background dalam suatu elemen, Terdapat beberaoa properties background yang dapat digunakan dalam CSS, antara lain :

    1. background-color properti background-color ini adalah untuk menentukan warna background dari sebuah element. Berikut contoh penggunaanya:

    body{
    background-color: #b0c4de;
}

    Di dalam CS, warna ditentukan oleh :

    1. HEX value – seperti “#ff0000”
    2. RGB value – seperti “rgb(255,0,0)”
    3. Nama Warna – seperti “red”

    2. background-image properti background-image ini adalah untuk menentukan background berupa gambar. Contoh penggunaanya :

    body{
    background-image: url(image.jpg);
}

    3. background-repeat secara default, properto background-repeat mengulang gambar secara horizontal dan vertikal. Gambar dapat diulang dengan menggunakan repeat-x atau repeat-y

    body{
    background-image: url(image.jpg);
    background-repeat: repeat-y;
}

    4. background-position kita dapat menentukan posisi background, value yang dapat digunakan antara lain: left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom.

    Contoh penggunaannya yaitu seperti dibawah ini :

    body { 
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: center; 
}

Komentar

Posting Komentar

Jika ingin mengkritik :
"Dimohon untuk menggunakan bahasa yang sopan santun."

Postingan populer dari blog ini

Mengenal Fitur CSS3

Gambar
Chrome | 43.0  4.0 -webkit- | | Internet Explore / Edge | 10.0 | | Firefox | 16.0 5.0 -moz- | | Safari | 9.0 4.0 -webkit- | | Opera | 30.0 15.0 -webkit- 12.0 -o- | Keterangan : Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti. Angka-angka yang diikuti oleh -webkit-, -moz-, atau -o- menentukan versi pertama yang bekerja dengan awalan -webkit-, -moz-, atau -o-. Contoh Pengguna opera versi 30.0 ke atas : div { animation-iteration-count: 2; } Sedangkan pengguna opera versi 15.0 hingga 29.0 : div { -webkit-animation-iteration-count: 2; } Nilai Properti : animation-name menentukan nama  keyframe  yang akan dikaitkan ke  selector animation-duration menetukan berapa lama waktu (dalam satuan detik atau mili detik) yang diperlukan untuk menyelesaikan animasi animation-timing-function Menentukan kurva kecepatan animasi Nilai properti : linear mengatur animasi dengan kecepatan yang sama dari awal hingga akhir ease Nilai default  an
Baca selengkapnya

Command Line

Gambar
Version control system  atau disingkat VCS adalah kategori perangkat lunak yang dapat membantu Kamu atau tim Kamu untuk mengelola setiap perubahan yang dilakukan dari waktu ke waktu. VCS merekam setiap perubahan kode yang dilakukan sehingga jika terjadi kesalahan kita dapat melakukan rollback untuk membanding code sebelum dan sesudah perubahan dilakukan sehingga dapat membantu kita dalam meminimalisir kesalahan. Bagi seorang programmer source yang telah dibuat adalah aset yang berharga karena berisi kumpulan solusi dari masalah yang telah dipecahkan dan diselesaikan. Dengan adanya VCS dapat melindungi source code dari kesalahan yang dilakukan oleh manusia dan dari hal-hal lain yang tidak diinginkan. Tanpa VCS Kamu akan kesulitan dalam mengelola dan berkordinasi dengan tim terkait perubahan yang telah dilakukan sehingga tidak saling timpa-menimpa satu sama lain. Dalam mengembangkan perangkat lunak tanpa menggunakan VCS sangat beresiko, seperti tidak memiliki backup. VCS juga dapat memb
Baca selengkapnya

7+ Tipe Data C++ Berserta Contoh Program dan Jangkauannya

Mari kita ingat kembali, tipe data digunakan untuk menentukan jenis nilai atau value yang akan disimpan ke dalam variabel untuk kemudian di proses dalam program kita. Ketika anda mendeklarasikan sebuah variabel, pada dasarnya anda sedang memesan sebuah ruang didalam memori. Lalu besarnya memori dipengaruhi oleh Tipe Data. Nah tugas besar seorang programmer adalah bisa menentukan tipe data yang tepat, karena kita dituntut untuk membuat program yang efektif dan tidak boros memori. Untuk itu, kita akan mengenal beberapa tipe data dalam Bahasa C++. Tipe Data Primive C++ Pada dasarnya tipe data dibagi menjadi 3 jenis: Tipe Data Angka  - untuk angka dan berhubungan dengan aritmetika. Tipe Data Karakter  - untuk karakter dan angka bukan untuk operasi aritmetika. Tipe Data Logika  - untuk logika benar ( true ) atau salah ( false ). Untuk penjelasan lebih detail silahkan baca:  macam macam tipe data dan fungsinya Pada dasarnya C++ memiliki beberapa tipe data  built-in
Baca selengkapnya