Di bagian kedua panduan desain web dengan 960gs ini, kita akan melihat penggunaan beberapa class untuk memperbaiki tampilan elemen. Walaupun pendek, dengan berbekal artikel ini dan pengetahuan dasar CSS dan HTML Anda akan mampu membuat projek desain web sederhana.
Menggeser Elemen Untuk Perbaikan Tampilan
Di bagian pertama, kita telah melihat keberadaan class dengan nama
push_X dan pull_X. Dalam prakteknya, kedua class ini berguna dalam mengubah tampilan elemen tanpa mengubah posisi markup.
Lihat contoh di atas. Misalnya Anda ingin menyimpan logo situs di tengah dan sebelumnya menambahkan beberapa paragraf. Dalam markup html, mungkin alurnya adalah menempatkan paragraf baru kemudian logo. Cara ini tidak tepat bagi search engine atau pengunjung dengan browser terbatas karena dengan begitu paragraf ditempatkan lebih penting daripada logo. Dengan class
push_X dan pull_X, kita bisa mengubah posisi elemen tanpa perlu menggeser alur markup.Penggunaan Class clear
960gs membuat kolom-kolom dengan cara mengubah element menjadi float (melayang). Dalam kondisi float, kita menarik elemen itu dari alur dokumen dan menarik semua elemen lain ke atas.
Perhatikan layout di atas. Artikel 4 otomatis berada di sebelah artikel 1 karena menyesuaikan dengan sisa area kosong yang diperolehnya. Bagaimana jika Anda ingin menyimpannya di baris baru, tepat di bawah artikel 1?
Anda dapat menambahkan div kosong dengan class
clear untuk mengosongkan div yang sebelumnya dalam kondisi float.
1. Judul Artikel
Lorem ipsum dolor sit amet.
2. Judul Artikel
Quisque accumsan tristique tristique.
3. Judul Artikel
Maecenas consequat pellentesque sem.
4. Judul Artikel
Donec at orci nisi.
5. Judul Artikel
Donec at orci nisi.
6. Judul Artikel
Donec at orci nisi.
/pre>
Kesimpulan
Sistem grid 960.gs memberi kita cara mudah dalam mendesain web secara terstruktur dan rapi. Cukup saja dengan teori. Di artikel berikutnya, saya akan memperlihatkan cara mendesain sebuah situs portfolio menggunakan sistem grid 960.
Tidak ada komentar:
Posting Komentar