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 09Gambarkan 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
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: 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 atas * / 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. Cara Anda memutuskan gaya baris tajuk sangat tergantung pada apa yang ada di dalamnya. Jika baris tajuk hanya akan memiliki grafik logo dan judul, lalu gunakan tag judul ( HTML untuk baris tajuk berada di bagian atas penampung dan terlihat seperti ini: 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. 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. Ut enim iklan minim veniam, sed lakukan eiusmod tempri incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Teks placeholder di kolom membuatnya lebih terlihat saat pengujian. CSS terlihat seperti ini: #container # col1 { lebar: 250px; float: kiri; } #container # col2outer { lebar: 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. 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 iklan minim veniam, sed lakukan eiusmod tempri incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. 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. 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. 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: CSS: #container #footer {
float: kiri;
width: 870px;
border-top: # c00 solid 3px;
} 08 09 Setelah tata letak selesai, Anda dapat mulai menambahkan gaya dan konten pribadi Anda sendiri. Ingat bahwa batas pada header dan footer ditambahkan untuk menunjukkan bagian tata letak, tidak khusus untuk desain. Berikut ini seluruh dokumen, HTML, dan CSS: Beri Gaya Kontainer
Gunakan Tag Headline untuk Header
) lebih masuk akal daripada menggunakan
My Header Row
Untuk Mendapatkan Tiga Kolom, Mulai dengan Membangun Dua Kolom
Tambahkan Dua Kolom Di Dalam Kolom Lebar Kedua
Tambahkan di Footer
Tambahkan Gaya Pribadi dan Konten Anda
HTML / CSS Akhir
