Bagaimana membuat DIVs yang diposisikan secara relatif di Adobe Dreamweaver CS6 - dummies

Posisi presisi dan posisi piksel AP (Absolute-Positioned) Divs di Adobe Dreamweaver CS6 bisa sangat membebaskan desainer, terutama Mereka yang menyukai fleksibilitas layout berbasis cetak.

Namun, pada kesempatan tertentu, Anda mungkin ingin kotak mengalir sesuai dengan konten lainnya di halaman. AP Divs melayang di atas elemen lain, sehingga menggeser konten halaman lainnya tidak berpengaruh pada posisinya, yang bisa menjadi hal baik atau buruk.

Untuk perilaku inline yang lebih tradisional, Anda dapat membuat DIV yang menggunakan posisi relatif . Hal ini memungkinkan sebuah elemen digeser bersama dengan konten yang mengelilinginya, membuat tata letak yang lebih cair. Jenis posisi ini penting untuk konten bersarang atau situasi dimana item harus sesuai dengan konten halaman lainnya.

Untuk tugas ini, gunakan alat Insert Div Tag, yang dapat Anda temukan di dalam kategori Common dan Layout panel Sisipkan.

Ikuti langkah-langkah ini untuk membuat DIV yang relatif diposisikan:

1. Klik di dalam halaman Anda untuk memposisikan kursor dalam AP Div yang ada dan kemudian klik alat Insert Div Tag di bawah Insert's Common and Layout kategori.

2. Saat kotak dialog Insert Div Tag muncul, selesaikan lokasi DIV baru Anda dengan memilih lokasi dari daftar drop-down Insert.

   Misalnya, pilih After Start of Tag untuk menempatkannya dalam tag DIV yang ada di halaman Anda.

   Anda juga dapat menggunakan daftar drop-down kotak dialog Insert Div Tag untuk menempatkan DIV sebelum, setelah, atau di dalam elemen yang ada pada halaman. Biarkan daftar turun Sisipkan ditetapkan ke At Insertion Point untuk meninggalkan kotak tempat Anda menggambarnya atau memilih lokasi lain yang Anda inginkan DIV dibuat.

   

3. Jika Anda memiliki pemilih kelas yang ada yang ingin Anda terapkan, pilih dari daftar drop-down Kelas; Jika tidak, biarkan kosong.

4. Jika ID yang ada tidak tersedia, masukkan nama baru di kolom ID dan klik tombol New CSS Rule untuk membuatnya.

5. Saat kotak dialog New CSS Rule muncul, pastikan pemilih baru Anda disetel ke ID dan nama itu memiliki tanda pon (#) di depannya. Klik OK

6. Saat kotak dialog Definisi Rule CSS muncul, klik dan pilih Positioning dari daftar Category di sebelah kiri untuk melihat properti positioning CSS.

7. Di area Positioning, pilih Relative dari menu Position, masukkan nilai width dan height pada kotak Width and Height text, dan masukkan nilai Top and Left di bawah Positioning properties.Klik OK

8. Klik OK untuk menutup kotak dialog Insert Div Tag.

   DIV yang baru dan relatif diposisikan muncul dengan teks placeholder.

   

Nilai-nilai Atas dan Kiri berperilaku sedikit berbeda untuk DIV absolut versus posisi yang relatif. Dalam kasus penentuan posisi relatif, nilai-nilai ini menunjukkan offset dari konten sekitarnya, berlawanan dengan posisi yang ditetapkan di dalam halaman.