Tata letak CSS mengharuskan Anda memikirkan tata letak situs web Anda secara keseluruhan, lalu mengambil potongan dan menyatukannya. Pelajari cara membuat tata letak 3 kolom sederhana dengan CSS.
01 09
Gambarkan Layout Anda
Anda dapat menggambar tata letak Anda di atas kertas atau dalam program grafis . Jika Anda sudah memiliki desain kerangka atau bahkan lebih luas dalam pikiran, sederhanakan ke kotak dasar yang membentuk situs. Desain yang menyertai artikel ini memiliki tiga kolom di area konten utama, serta header dan footer. Jika Anda melihat lebih dekat, Anda dapat melihat bahwa ketiga kolom tidak memiliki lebar yang sama.
Setelah tata letak Anda ditarik keluar, Anda dapat mulai memikirkan dimensi. Desain contoh ini akan memiliki dimensi dasar berikut:
- Tidak lebih dari 900 piksel lebar
- 20 px selokan di sebelah kiri
- 10 px antara kolom dan baris
- Kolom yang memiliki lebar 250px, 300px, dan 300px
- Baris atas memiliki tinggi 150 piksel
- Baris paling bawah adalah 100px
02 09
Tulis HTML Dasar / CSS dan Buat Elemen Kontainer
Karena halaman ini akan menjadi dokumen HTML yang valid, Mulai dengan wadah HTML kosong
Tambahkan gaya dasar CSS untuk meniadakan margin halaman, batas, dan paddings . Meskipun ada gaya CSS standar lain untuk dokumen baru, gaya ini adalah minimum yang Anda butuhkan untuk mendapatkan tata letak yang bersih. Tambahkan mereka ke kepala dokumen Anda:
Untuk mulai membangun tata letak, masukkan elemen penampung. Terkadang terjadi bahwa Anda dapat membuang penampungnya nanti, tetapi untuk tata letak dengan lebar tetap, memiliki elemen penampung membuatnya lebih mudah untuk dikelola di seluruh browser Web yang berbeda. Jadi di dalam tubuh tuliskan ini:
Dan dalam style sheet CSS, letakkan:
#container {}03 09
Beri Gaya Kontainer
Penampung menentukan seberapa lebar konten laman web, serta margin apa pun di sekitar luar dan padding di bagian dalam. Untuk dokumen ini, wadah berukuran 870px dengan selaput piksel 20 di sebelah kiri. Selokan diatur dengan gaya margin, tetapi padding pada wadah memusatkan perhatian untuk mencegah setiap elemen dari selebar wadah.
#container {width: 870px; margin: 0 0 0 20px; / * kiri bawah kanan * / padding: 0; }Jika Anda menyimpan dokumen Anda sekarang, akan sulit untuk melihat wadah karena tidak ada isinya. Jika Anda menambahkan teks placeholder, Anda akan dapat melihat elemen penampung lebih jelas.
04 09
Gunakan Tag Headline untuk Header
Cara Anda memutuskan gaya baris tajuk sangat bergantung pada apa yang ada di dalamnya. Jika baris header hanya akan memiliki grafik logo dan judul, maka menggunakan tag judul (
) lebih masuk akal daripada menggunakan . Anda dapat menata judul dengan cara yang sama seperti Anda memberi gaya pada div, dan Anda menghindari tag yang asing.
HTML untuk baris tajuk berada di bagian atas penampung dan terlihat seperti ini:
Baris Header Saya h1>
Kemudian, untuk mengatur gaya di atasnya, perbatasan merah ditambahkan di bagian bawah sehingga Anda bisa melihat di mana ujungnya, margin dan padding dimaksimalkan, lebar diatur ke 100% dan tinggi ke 150px:
#container h1 {margin: 0; padding: 0; lebar: 100%; tinggi: 150px; float: kiri; border-bottom: # c00 solid 3px; } Jangan lupa untuk mengapungkan elemen ini dengan float: left; milik. Kunci untuk menulis tata letak CSS adalah mengapung semuanya - bahkan hal-hal yang lebarnya sama dengan wadah. Dengan begitu, Anda selalu tahu di mana letak elemen-elemen itu di halaman.
Gaya pemilih CSS diterapkan hanya untuk elemen H1 yang ada di dalam elemen #container.
05 09
Untuk Mendapatkan Tiga Kolom, Mulai dengan Membangun Dua Kolom
Saat Anda membuat tata letak tiga kolom dengan CSS, Anda perlu membagi tata letak menjadi dua kelompok. Jadi untuk tata letak tiga kolom ini, kolom tengah dan kanan dan dikelompokkan dan ditempatkan di sebelah kolom kiri dalam tata letak dua kolom di mana kolom kiri adalah lebar 250px, dan kolom kanan adalah lebar 610px (masing-masing 300 untuk dua kolom , ditambah 10px untuk selokan di antara mereka).
HTML terlihat seperti ini:
Ut aliquip ex ea commodo consequat. Karena itu, Anda tidak perlu khawatir, lorem ipsum dolor duduk amet. Dalam reprehenderit dalam latihan quad rostrud, eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris nisi ut aliquip ex ea commodo consequat. P> div>
Ut enim ad minim veniam, sed do eiusmod tempri incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. P> div>
Teks placeholder di kolom membuatnya lebih terlihat saat pengujian. CSS terlihat seperti ini:
#container # col1 {width: 250px; float: kiri; } #container # col2outer {width: 610px; float: benar; margin: 0; padding: 0; } Kolom di sebelah kiri melayang ke kiri, sementara yang lain melayang ke kanan. Karena total lebar kedua kolom adalah 860px, ada selokan 10px di antara keduanya.
06 09
Tambahkan Dua Kolom Di Dalam Kolom Lebar Kedua
Untuk membuat tiga kolom, tambahkan dua div di kolom kedua yang lebih luas, seperti Anda menambahkan 2 div di dalam kolom kontainer pada langkah terakhir. HTML terlihat seperti ini:
Ut enim ad minim veniam, sed lakukan eiusmod tempid incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. P> div>
Nam libero tempore, quia voluptas duduk aspernatur dicta sunt explicabo. Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur a sapiente delectus, sed ut perspiciatis unde omnis tempora incidunt ut labore et dolore. P> div> div>
Dan CSS terlihat seperti ini:
# col2outer # col2mid {width: 300px; float: kiri; } # col2outer # col2side {width: 300px; float: benar; } Karena kedua kotak lebar 300px berada di dalam kotak selebar 610px, akan ada lagi selokan 10px di antara keduanya.
07 09
Tambahkan di Footer
Setelah sisa halaman ditata, Anda dapat menambahkan footer. Gunakan div terakhir dengan id "footer", dan tambahkan konten sehingga Anda dapat melihatnya. Anda juga dapat menambahkan batas di bagian atas, sehingga Anda akan tahu di mana itu dimulai.
HTML:
HTML untuk baris tajuk berada di bagian atas penampung dan terlihat seperti ini:
Baris Header Saya h1>
Kemudian, untuk mengatur gaya di atasnya, perbatasan merah ditambahkan di bagian bawah sehingga Anda bisa melihat di mana ujungnya, margin dan padding dimaksimalkan, lebar diatur ke 100% dan tinggi ke 150px:
#container h1 {margin: 0; padding: 0; lebar: 100%; tinggi: 150px; float: kiri; border-bottom: # c00 solid 3px; }Jangan lupa untuk mengapungkan elemen ini dengan float: left; milik. Kunci untuk menulis tata letak CSS adalah mengapung semuanya - bahkan hal-hal yang lebarnya sama dengan wadah. Dengan begitu, Anda selalu tahu di mana letak elemen-elemen itu di halaman.
Gaya pemilih CSS diterapkan hanya untuk elemen H1 yang ada di dalam elemen #container.
05 09
Untuk Mendapatkan Tiga Kolom, Mulai dengan Membangun Dua Kolom
Saat Anda membuat tata letak tiga kolom dengan CSS, Anda perlu membagi tata letak menjadi dua kelompok. Jadi untuk tata letak tiga kolom ini, kolom tengah dan kanan dan dikelompokkan dan ditempatkan di sebelah kolom kiri dalam tata letak dua kolom di mana kolom kiri adalah lebar 250px, dan kolom kanan adalah lebar 610px (masing-masing 300 untuk dua kolom , ditambah 10px untuk selokan di antara mereka).
HTML terlihat seperti ini:
Ut aliquip ex ea commodo consequat. Karena itu, Anda tidak perlu khawatir, lorem ipsum dolor duduk amet. Dalam reprehenderit dalam latihan quad rostrud, eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris nisi ut aliquip ex ea commodo consequat. P> div>
Ut enim ad minim veniam, sed do eiusmod tempri incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. P> div>
Teks placeholder di kolom membuatnya lebih terlihat saat pengujian. CSS terlihat seperti ini:
#container # col1 {width: 250px; float: kiri; } #container # col2outer {width: 610px; float: benar; margin: 0; padding: 0; }Kolom di sebelah kiri melayang ke kiri, sementara yang lain melayang ke kanan. Karena total lebar kedua kolom adalah 860px, ada selokan 10px di antara keduanya.
06 09
Tambahkan Dua Kolom Di Dalam Kolom Lebar Kedua
Untuk membuat tiga kolom, tambahkan dua div di kolom kedua yang lebih luas, seperti Anda menambahkan 2 div di dalam kolom kontainer pada langkah terakhir. HTML terlihat seperti ini:
Ut enim ad minim veniam, sed lakukan eiusmod tempid incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. P> div>
Nam libero tempore, quia voluptas duduk aspernatur dicta sunt explicabo. Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur a sapiente delectus, sed ut perspiciatis unde omnis tempora incidunt ut labore et dolore. P> div> div>
Dan CSS terlihat seperti ini:
# col2outer # col2mid {width: 300px; float: kiri; } # col2outer # col2side {width: 300px; float: benar; }Karena kedua kotak lebar 300px berada di dalam kotak selebar 610px, akan ada lagi selokan 10px di antara keduanya.
07 09
Tambahkan di Footer
Setelah sisa halaman ditata, Anda dapat menambahkan footer. Gunakan div terakhir dengan id "footer", dan tambahkan konten sehingga Anda dapat melihatnya. Anda juga dapat menambahkan batas di bagian atas, sehingga Anda akan tahu di mana itu dimulai.
HTML: