Bagaimana Menggunakan Opsi Tata Letak di Panel Properti CSS Dreamweaver - dummies

Di bagian atas panel Properti Perancang CSS Anda menemukan properti CSS yang umum digunakan untuk membuat layout halaman. Anda menggunakan opsi ini untuk menentukan ketinggian, lebar, keselarasan, posisi, dan jarak. Pengaturan ini sangat ideal untuk membuat tata letak halaman dengan gaya kelas dan ID untuk melakukan hal-hal seperti menyelaraskan gambar dan tag posisi untuk membuat tata letak multikolumn.

Anda dapat menggunakan opsi Layout di panel Properti CSS untuk menetapkan nilai berikut:

• Lebar: Tentukan lebar untuk elemen yang dapat dimensinya yang ditentukan, seperti tag. Pilihan ukuran adalah pixel (px), titik (pt), pica (pc), persen (%), em, rem, ex, dan ch.

• Tinggi: Tentukan ketinggian untuk elemen yang dapat dimensinya yang ditentukan.

  • Min dan Max Lebar: Tentukan lebar minimum dan maksimum untuk tag dan elemen blok lainnya. Pilihan ini berguna saat Anda menentukan lebar sebagai persentase dari jendela browser. Misalnya, Anda dapat mengatur lebar desain pada 80 persen jendela browser, dan kemudian menetapkan Max Width 1000 px untuk mencegah tata letak Anda tidak membentang lebih lebar dari 1000 piksel.

  • Min dan Max Tinggi: Tentukan ketinggian minimum dan maksimum untuk tag dan elemen blok lainnya.

  • Margin: Tetapkan jumlah ruang di sekitar elemen. Margin dapat digunakan untuk menciptakan ruang antara tepi elemen dan elemen lainnya pada halaman, seperti antara gambar dan teks atau antara dua tag. Anda dapat mengatur margin secara terpisah untuk bagian atas, kanan, bawah, dan kiri. Padding diukur dalam piksel, titik, inci, sentimeter, milimeter, picas, ems, exs, dan persentase.

  • Mengatur jumlah ruang di dalam batas elemen. Misalnya, Anda bisa menggunakan padding untuk membuat spasi di antara batas tag dan isinya. Anda dapat mengatur padding secara terpisah untuk bagian atas, kanan, bawah, dan kiri. Padding diukur dalam piksel, titik, inci, sentimeter, milimeter, picas, ems, exs, dan persentase. Menetapkan padding dan jarak margin bisa jadi rumit. Bila Anda menambahkan margin dan padding ke elemen, seperti gambar atau tag, Anda akan meningkatkan ukuran keseluruhan elemen itu dan jumlah ruang yang dibutuhkannya dalam tata letak.

    Posisi:

• Pilihan Posisi, tersedia dari bagian bawah bagian Tata Letak panel Properties, mengubah cara elemen diposisikan pada halaman. Positioning dapat secara dramatis mengubah cara elemen tingkat blok (seperti tabel, daftar, header, paragraf, dan tag) muncul di browser. Mewarisi:

  • Anda tidak perlu menentukan opsi default ini. Kecuali opsi lain dipilih, masing-masing elemen mewarisi posisi unsur induknya. Statis:

  • Tempatkan konten di lokasi dalam arus dokumen. Secara default, semua elemen HTML yang dapat diposisikan statis. Absolute:

  • Gunakan koordinat atas dan kiri untuk mengontrol posisi elemen yang relatif ke sudut kiri atas jendela browser atau sudut kiri atas dari elemen yang berisi elemen. Fixed:

  • Posisikan elemen relatif ke sudut kiri atas browser. Isi elemen menggunakan penentuan posisi tetap tetap konstan meskipun pengguna menggulir ke bawah atau di seluruh halaman. Relatif:

  • Gunakan posisi relatif terhadap titik di mana Anda memasukkan elemen ke dalam halaman atau relatif ke wadahnya. Float:

    

  • Align elemen, seperti gambar dan tag, ke kiri atau kanan halaman atau kontainer lain yang menyebabkan teks atau elemen lainnya membungkusnya. Klik ikon di bidang Float untuk menentukan empat pilihan berikut: Mewarisi, Kanan, Kiri, atau Tidak Ada. Clear:

  • Mencegah konten mengapung dari tumpang tindih area ke kiri atau kanan, atau ke kedua sisi elemen. Pilihan ini berguna bila elemen yang melayang, seperti tag yang digunakan untuk membuat bilah sisi, tumpang tindih dengan elemen tingkat blok lainnya, seperti tag yang digunakan untuk membuat footer halaman. Overflow-x dan -y:

  • Beritahu browser bagaimana cara menampilkan isi elemen jika wadah, seperti tag, tidak sesuai dengan tinggi atau lebar elemen. Pilihan melimpah Terlihat:

  • Jaga agar konten, seperti gambar atau teks, terlihat, meskipun diperluas melampaui batas tinggi atau lebar wadah yang ditentukan. Tersembunyi:

  • Potong konten jika melebihi ukuran wadah. Pilihan ini tidak menyediakan scroll bar. Gulir:

  • Tambahkan bilah gulir ke penampung terlepas dari apakah kontennya melebihi ukuran elemen. Otomatis:

  • Membuat scroll bar hanya muncul bila isi sebuah wadah melebihi batas-batasnya. Tampilan:

• Tunjukkan apakah, atau bagaimana, untuk membuat elemen di browser. Misalnya, Anda mengubah posisi daftar unordered dari horizontal ke vertikal dengan memilih Inline atau menyembunyikan elemen, membuatnya tidak terlihat, dengan memilih None. Anda bisa menggunakan opsi Display dengan bahasa scripting untuk mengubah tampilan elemen secara dinamis. Visibilitas:

• Kontrol apakah browser menampilkan elemen atau tidak. Pilihan Visibilitasnya adalah Mewarisi:

  • Elemen memiliki visibilitas elemen yang dikandungnya (defaultnya). Terlihat:

  • Elemen ditampilkan. Tersembunyi:

  • Elemen tidak ditampilkan. Collapse:

  • Untuk penggunaan dengan tabel HTML. Keruntuhan dapat digunakan untuk menghapus kolom atau baris tanpa mempengaruhi tata letak tabel lainnya. Z-Index:

• Kontrol posisi elemen pada koordinat Z, yang mengendalikan urutan susunan elemen dalam hubungan satu sama lain.Elemen bernomor tinggi saling tumpang tindih dengan elemen bernomor rendah. Opacity:

• Kontrol tingkat opacity untuk elemen dari 0. 0 (sepenuhnya transparan) menjadi 1. 0 (sepenuhnya buram). Misalnya, jika Anda masuk. 5 di bidang opacity, opacity elemen akan dikurangi menjadi 50 persen.