Tata letaknya mudah dengan CSS. Jika Anda terbiasa menggunakan tata letak tabel, awalnya akan sulit. Tidak sulit, hanya saja motivasinya berbeda-beda dan lebih masuk akal dalam praktiknya.

Anda dapat memperlakukan setiap bagian halaman ini sebagai bagian terpisah, apa pun bagian yang Anda pilih. Anda dapat mengganti blok ini dengan blok itu secara absolut atau relatif.

digunakan untuk menentukan apakah suatu elemen bersifat absolut, relatif, statis, atau tetap.

Nilai statis adalah nilai default untuk elemen, yang dihasilkan dalam urutan normal seperti yang muncul di HTML.

relatif seperti statis, tetapi Anda dapat menggunakan properti atas, kanan, bawah, dan kiri untuk mengimbangi posisi aslinya.

Absolut memisahkan elemen dari aliran normal HTML dan mengirimkannya ke dunia pemosisiannya sendiri. Di dunia yang sedikit gila ini, elemen absolut ini dapat ditempatkan di mana saja selama nilai atas, kanan, bawah, dan kiri ditetapkan.

Tetap juga berperilaku seperti absolut, tetapi menempatkan elemen absolut relatif terhadap jendela browser relatif terhadap halaman, jadi, secara teori, elemen tetap tetap sepenuhnya berada di area pandang browser saat halaman digulir. Mengapa secara teoritis? Jika tidak ada yang lain, berfungsi dengan baik di Mozilla dan Opera, tetapi tidak di IE.

Anda dapat menggunakan pemosisian absolut untuk membuat tata letak dua kolom tradisional dengan menggunakan aturan yang serupa dengan yang berikut dalam HTML:

Ra ra banjo banjo

Selamat datang di Ra ra

halaman

ra banjo

banjo.

Dan

terapkan CSS berikut:

Contoh Kode Sumber [www.52css.com]

#navigation

{

position: absolute; top: 0; left: 0; width

10em

;

bilah navigasi dengan panjang 10em diatur di sebelah kiri. Karena navigasi benar-benar diposisikan, maka tidak akan berdampak apa pun pada alur halaman lainnya, jadi yang perlu Anda lakukan hanyalah mengatur lebar batas kiri area konten agar sama dengan lebar navigasi. batang.

Sangat mudah! Namun Anda tidak dibatasi oleh pendekatan dua kolom ini. Dengan pemosisian cerdas, Anda dapat menyusun blok sebanyak yang Anda perlukan. Misalnya, jika Anda perlu menambahkan kolom ketiga, Anda dapat menambahkan blok "navigation2" ke HTML dan menerapkan CSS berikut:

Contoh Kode Sumber [www.52css.com]

#navigation {

position: absolute; kiri: 0; lebar: 10em;

}

#navigation2 {

posisi: absolut; atas: 0; kanan: 0; lebar: 10em;

}

#content {

margin: 0 10em; margin to 10em */

}

Satu-satunya efek samping dari elemen pemosisian absolut adalah, karena elemen tersebut hidup di dunianya sendiri, tidak ada cara untuk memutuskan secara pasti di mana elemen tersebut berakhir. Jika Anda menggunakan contoh di atas dalam area navigasi yang lebih sedikit dan lebih banyak konten, tidak ada masalah, namun, terutama saat menggunakan nilai relatif untuk panjang dan lebar, Anda sering kali harus putus asa untuk meletakkan sesuatu seperti catatan kaki di bawahnya. Jika Anda benar-benar ingin melakukannya, alih-alih memposisikannya sepenuhnya, apungkanlah.

Float

Floating akan memindahkan elemen ke kiri atau kanan pada baris yang sama, sementara konten di sekitarnya akan melayang.

Mengambang sering digunakan untuk memposisikan elemen kecil di dalam halaman (dalam CSS default asli situs ini, tautan "halaman berikutnya" dari Panduan Dasar HTML dan Panduan Dasar CSS melayang ke kanan. Lihat juga: elemen semu pertama di contoh huruf), tetapi juga dapat digunakan di blok yang lebih besar, seperti kolom navigasi.

Ambil contoh HTML berikut, Anda dapat menerapkan CSS berikut:

Contoh Kode Sumber [www.52css.com]

#navigation {

float: left

;

width: 10em;

}

#navigation2 {

float: right

: 10em

;

margin: 0 10em;

}

Jika Anda tidak ingin elemen berikutnya membungkus objek melayang, Anda dapat menggunakan properti clear. clear: left akan menghapus elemen kiri, clear: right akan menghapus elemen kanan, dan clear: keduanya akan menghapus elemen kiri dan kanan. Jadi, misalnya Anda memerlukan footer halaman, Anda dapat menambahkan blok ke HTML dengan id "footer", lalu gunakan CSS berikut:

Contoh Source Code [www.52css.com]

#footer {

clear: keduanya;

}

Baiklah, Anda sudah mendapatkannya. Catatan kaki muncul di bawah semua kolom, tidak peduli berapa panjang kolomnya.

Perhatikan bahwa

kita telah membahas positioning dan floating secara umum, dengan penekanan pada blok "besar" pada halaman, namun perlu diingat bahwa metode ini juga dapat digunakan pada elemen apa pun di dalam blok tersebut. Menggabungkan positioning, floating, border, padding dan border, Anda dapat mereproduksi desain tata letak apa pun, tidak ada yang dapat dilakukan tabel tanpa CSS.

Satu-satunya alasan untuk menggunakan tata letak tabel adalah jika Anda mencoba mengakomodasi browser kuno. Di sinilah CSS sebenarnya menunjukkan kemajuannya - halaman dengan kegunaan tinggi hanya berukuran sebagian kecil dari ukuran file halaman berbasis tabel

Tata Letak Halaman Tutorial Lanjutan CSS

Ra ra banjo banjo