Apa itu wadah div? Kontainer bawaan. Model pemformatan visual CSS secara detail
w3 css (17)
Diberikan HTML berikut:
Saya ingin #hak cipta menempel di bagian bawah #container.
Bisakah saya mencapai ini tanpa menggunakan pemosisian absolut? Jika properti float mendukung nilai "bawah", sepertinya ini adalah triknya, tetapi sayangnya tidak.
HTML:
CSS:
html, body ( lebar: 100%; tinggi: 100%; ) .overlay ( tinggi minimum: 100%; posisi: relatif; ) .container ( lebar: 900px; posisi: relatif; padding-bottom: 50px; ) .height ( lebar: 900px; tinggi: 50px; ) .footer ( lebar: 900px; tinggi: 50px; posisi: absolut; bawah: 0; )Tidak ada apa pun di CSS yang disebut float:bottom . Cara terbaik adalah menggunakan pemosisian dalam kasus berikut:
Posisi: mutlak; bawah:0;
Bagi mereka hanya ada satu anak per wadah, Anda dapat menggunakan pendekatan sel tabel dan perataan vertikal yang telah bekerja dengan andal untuk memposisikan satu div di bagian bawah induknya.
Perhatikan bahwa menggunakan table-footer-group sebagai jawaban lain yang disebutkan akan mematahkan perhitungan height dari tabel induk.
#container ( tampilan: tabel; lebar: 100%; tinggi: 200 piksel; ) #item ( tampilan: sel tabel; perataan vertikal: bawah; )
Jika Anda ingin "menempel" di dasar, berapa pun tinggi wadahnya, maka penentuan posisi absolut adalah cara yang tepat. Tentu saja, jika elemen hak cipta berada di urutan terakhir dalam penampung, maka elemen tersebut akan selalu berada di bagian bawah.
Bisakah Anda memperluas pertanyaan Anda? Jelaskan apa sebenarnya yang ingin Anda lakukan (dan mengapa Anda tidak ingin menggunakan pemosisian absolut)?
Ini pertanyaan lama, tapi ini pendekatan unik yang dapat membantu dalam beberapa kasus.
CSS murni, tanpa pemosisian absolut, tanpa penetapan ketinggian apa pun, lintas browser (IE9+)
Karena aliran normal adalah dari atas ke bawah, kita tidak bisa begitu saja meminta div #copyright untuk tetap berada di bawah induknya tanpa adanya posisi apa pun. Namun jika kita ingin div #copyright tetap berada di atas induknya, itu akan sangat mudah - karena itu adalah alur yang normal.
Jadi kami akan menggunakan ini untuk keuntungan kami. Kita akan mengubah urutan div di HTML, sekarang div #copyright berada di atas dan konten segera mengikutinya. kami juga membuat div konten meregang sepenuhnya (menggunakan elemen semu dan metode pembersihan)
sekarang tinggal mengembalikan tatanan itu ke dalam tampilan. yang dapat dengan mudah dilakukan dengan menggunakan CSS-transformasi.
Kami memutar wadah 180 derajat, dan sekarang: ke atas dan ke bawah. (dan kami mengembalikan konten agar terlihat normal kembali)
Jika kita ingin memiliki scrollbar di area konten, kita perlu menerapkan lebih banyak keajaiban CSS. bagaimana cara menampilkan [dalam contoh ini kontennya ada di bawah header tetapi idenya sama]
* ( margin: 0; padding: 0; ) html, body, #Container ( tinggi: 100%; warna: putih; ) #Container:before ( konten: ""; tinggi: 100%; float: kiri; ) #Hak Cipta ( warna latar: hijau; ) #Stretch ( warna latar: biru; ) #Stretch:setelah ( konten: ""; tampilan: blok; hapus: keduanya; ) #Container, #Container>div ( -moz-transform: putarX(180 derajat); -transformasi ms: putarX(180 derajat); -transformasi webkit: putarX(180 derajat);
Faktanya, jawaban yang diterima @Pengguna hanya akan berfungsi jika jendelanya tinggi dan kontennya pendek. Namun jika kontennya tinggi dan jendelanya pendek, informasi hak cipta akan ditempatkan pada konten halaman dan kemudian gulir ke bawah untuk melihat kontennya, meninggalkan Anda dengan pemberitahuan hak cipta mengambang. Hal ini membuat solusi ini tidak berguna untuk sebagian besar halaman (seperti halaman ini).
Cara paling umum untuk melakukan ini adalah dengan mendemonstrasikan pendekatan "CSS sticky footer", atau perubahan yang sedikit lebih halus. Pendekatan ini berfungsi dengan baik - jika Anda memiliki header footer yang tetap.
Jika Anda menginginkan footer dengan tinggi variabel yang akan muncul di bagian bawah jendela jika kontennya terlalu pendek, dan di bagian bawah konten jika jendelanya terlalu pendek, apa yang Anda lakukan?
Telan harga diri Anda dan gunakan meja.
Misalnya:
* ( padding: 0; margin: 0; ) html, isi ( tinggi: 100%; ) #container ( tinggi: 100%; border-collapse: runtuh; )
|
Lorem ipsum, dll.
|
Cobalah. Ini akan berfungsi untuk ukuran jendela apa pun, untuk jumlah konten berapa pun, untuk footer apa pun di browser apa pun... bahkan IE6.
Jika Anda mendapat ide untuk menggunakan tabel untuk tata letak Anda, luangkan waktu sejenak untuk bertanya pada diri sendiri alasannya. CSS seharusnya membuat hidup kita lebih mudah - dan itu secara umum - namun kenyataannya bahkan setelah bertahun-tahun, CSS masih tetap berantakan dan tidak konsisten. Itu tidak bisa menyelesaikan setiap masalah. Itu tidak lengkap.
Tabel memang tidak keren, tapi setidaknya untuk saat ini terkadang memang keren cara terbaik memecahkan masalah desain.
Jika Anda tidak mengetahui ketinggian blok anak:
#parent(background:green;width:200px;height:200px;display:table-cell;vertical-align:bottom;) .child(background:red;vertical-align:bottom;)
Jika Anda tahu bahwa tinggi blok anak menambah blok anak, tambahkan padding-top/margin-top:
#parent(latar belakang:hijau;lebar:200px;tinggi:130px;padding-top:70px;) .child(latar belakang:merah;penyelarasan vertikal:bawah;tinggi:130px;)
Induk ( tampilan: fleksibel; arah fleksibel: kolom; ) .child ( margin-top: auto; )
Induk ( tinggi: 100 piksel; batas: 5 piksel solid #000; tampilan: fleksibel; arah fleksibel: kolom; ) .child ( tinggi: 40 piksel; lebar: 100%; latar belakang: #f00; margin-top: otomatis; )
Solusi di atas mungkin lebih fleksibel, namun ini adalah solusi alternatif:
Induk ( display: flex; ) .child ( align-self: flex-end; )
Induk ( tinggi: 100px; batas: 5px solid #000; tampilan: flex; ) .child ( tinggi: 40px; lebar: 100%; latar belakang: #f00; align-self: flex-end; )
Sebagai catatan tambahan, Anda dapat menambahkan awalan vendor untuk dukungan tambahan.
Juga, jika ada posisi yang menggunakan position:absolute; atau posisi:relatif; , Anda selalu dapat mencoba padding orang tua div atau tempatkan margin-top:x; Dalam kebanyakan kasus, ini bukan metode yang baik, tetapi dalam beberapa kasus ini bisa berguna.
Hanya karena tidak disebutkan sama sekali, yang biasanya berfungsi dengan baik dalam situasi seperti Anda:
Anda perlu memformat hak cipta div serupa dengan wadah lain (lebar keseluruhan yang sama, bagian tengah, dll.) dan semuanya akan baik-baik saja.
Satu-satunya saat hal ini mungkin tidak ideal adalah ketika div container Anda dideklarasikan dengan height:100% dan pengguna perlu menggulir ke bawah untuk melihat hak ciptanya. Namun Anda pun bisa melakukannya (misalnya margin-top:-20px - bila tinggi elemen hak cipta Anda adalah 20px).
- Penempatan mutlak
- Tidak ada tata letak meja
- Tidak ada css gila yang terlihat berbeda di setiap browser lain (setidaknya IE, lho)
- Pemformatan sederhana dan jelas
Juga: Saya tahu OP meminta solusi yang mana "...menempel di bagian bawah div 'wadah'...", bukan sesuatu di bawahnya, tapi ayolah, orang-orang melihat solusi yang baik di sini dan ini yang ini!
Div gaya, position:absolute;bottom:5px;width:100%; berfungsi, tetapi memerlukan situasi yang lebih bergulir.
Window.onscroll = function() ( var v = document.getElementById("hak cipta"); v.style.position = "tetap"; v.style.bottom = "5px"; )
Ini adalah pendekatan yang dirancang untuk membuat elemen dengan tinggi dan lebar yang diketahui (setidaknya kira-kira) dengan pelampung di sebelah kanan dan tetap berada di bawah sementara elemen tersebut berperilaku sebagai elemen sejajar dengan elemen lainnya. Ini menargetkan sudut kanan bawah karena Anda dapat dengan mudah menempatkannya di sudut lain menggunakan metode lain.
Saya perlu membuat bilah navigasi, yang akan memiliki tautan sebenarnya di sudut kanan bawah dan elemen saudaranya yang acak, sekaligus memastikan bahwa bilah itu sendiri meregang dengan benar tanpa merusak tata letaknya. Saya menggunakan elemen "bayangan" untuk mengambil ruang tautan di bilah navigasi dan menambahkannya di akhir node anak penampung.
#container(width:100%; float:left; position:relative;) #copyright(position:absolute; bottom:0px; left:0px; background:#F00; width:100%;) #container(background:gray; tinggi:100 piksel;)
Coba ini;
Buat div container lain untuk elemen di atas #copyright . Tepat di atas hak cipta tambahkan div baru:
Dia akan memaksa catatan kaki berada di bawah segalanya, seolah-olah menggunakan pemosisian relatif (bawah:0px;).Ya, Anda dapat melakukan ini tanpa pemosisian absolut dan tanpa menggunakan tabel (yang disekrup dengan markup, dll).
DEMO
Ini diuji untuk bekerja dengan IE > 7, chrome, FF dan merupakan opsi yang sangat sederhana untuk ditambahkan ke tata letak yang ada.
Ini secara efektif melakukan apa yang float:bottom lakukan, bahkan mempertimbangkan masalah yang ditunjukkan dalam jawaban @Rick Reilly!
Menggunakan properti TranslateY dan Top
Cukup atur anak ke position: relative dan pindahkan ke atas: 100% (ini adalah 100% tinggi induknya) dan tempelkan ke bagian bawah induk dengan mengubah: TranslateY(-100%) (ini adalah -100% tinggi badan anak).
- Anda Bukan mengambil elemen dari aliran halaman
- itu dinamis
Tapi masih hanya solusi :(
Hak Cipta( posisi: relatif; teratas: 100%; transformasi: TranslateY(-100%); )
Jangan lupa awalan untuk browser lama.
Wadah adalah elemen halaman HTML yang dirancang untuk menyorot bagian tertentu dari halaman tersebut. Ini bisa berupa paragraf, judul, kutipan, potongan teks, dll. Browser tidak menyorot wadah pada halaman html dengan cara apa pun.
Dengan menggunakan container, webmaster dapat “mengikat” gaya yang diinginkan ke elemen tertentu pada halaman HTML. Selain itu, penampung menyediakan "pengikatan" perilaku ke elemen halaman html.
Ada dua jenis kontainer: kontainer blok dan kontainer inline.
Wadah bawaan adalah bagian dari elemen blok halaman html. Misalnya, wadah blok dapat berupa fragmen teks paragraf, gambar grafis, yang ditempatkan dalam paragraf, dll.
Tag berpasangan digunakan untuk membuat wadah tertanam MENJANGKAU. Fragmen yang diperlukan elemen blok ditempatkan di dalam tag MENJANGKAU, dan gaya yang diinginkan dibuat dalam CSS, yang kemudian “ditempelkan” ke tag MENJANGKAU.
| CONTOH:
Blokir (warna font: merah) ... buah rowan merah warna. |
Blokir kontainer
Wadah blok dibentuk menggunakan tag berpasangan DIV dan cukup sering digunakan. Berbagai elemen blok ditempatkan dalam wadah blok: paragraf, judul, tabel, dll.
Terkadang perlu untuk menyelaraskan blok besar dokumen yang tidak hanya berisi teks, tetapi juga gambar, tabel, dll. Untuk tujuan ini, elemen wadah digunakan DIV. Spesifikasi elemen DIV:
SELURUH=”penyelarasan”>
Atribut ALIGN menentukan jenis perataan konten dan dapat memiliki nilai yang sama dengan elemen P.
lekukan
Terkadang Anda ingin menampilkan blok teks dengan lekukan. Untuk melakukan ini, satu blok teks ditempatkan di elemen wadah BLOKQUOTE. Kemudian isi elemen ini akan ditampilkan dengan indentasi kecil di kiri dan kanan, serta dipisahkan dari teks lainnya dengan baris kosong.
Tabel
Salah satu fitur paling kuat dan banyak digunakan dalam HTML adalah tabel. Mereka digunakan tidak hanya secara tradisional sebagai metode penyajian data, tetapi juga sebagai sarana memformat halaman Web. Dokumen HTML dapat berisi tabel dalam jumlah berapa pun, dan penggabungan tabel satu sama lain diperbolehkan.
Setiap tabel dimulai dengan tag<MEJA> dan diakhiri dengan tagMEJA>. Di dalam pasangan tag ini terdapat deskripsi isi tabel. Tabel apa pun terdiri dari satu atau lebih baris yang datanya ditentukan untuk masing-masing sel.
Setiap baris dimulai dengan tag<TR> dan diakhiri dengan tagTR>. Satu sel dalam satu baris dibingkai oleh sepasang tag<TD> danTD> atau<TH.> danTH.>. Menandai
Tag
Contoh tabel:
Contoh ini akan muncul di browser seperti ini:
Spesifikasi tanda
SELURUH = "penyelarasan" BGCOLOR="warna latar belakang" COLSPAN="jumlah sel" TINGGI="tinggi sel" ROWSPAN="jumlah sel" VALIGN="penjajaran vertikal" WIDTH="lebar sel" Atribut ALIGN menentukan perataan isi sel. Ini dapat memiliki salah satu dari tiga nilai: LEFT (tepi kiri), RIGHT (tepi kanan) dan CENTER (tengah). Standarnya adalah PUSAT. Atribut BGCOLOR menentukan warna latar belakang sel. Nilainya dapat ditentukan dalam notasi simbolik atau dalam format RGB. Atribut COLSPAN memungkinkan Anda menggabungkan beberapa sel yang berdekatan secara horizontal. Nilai atribut ini adalah jumlah sel yang akan digabungkan. Atribut HEIGHT menentukan tinggi sel dalam piksel. Atribut ROWSPAN memungkinkan Anda menggabungkan beberapa sel yang berdekatan secara vertikal. Nilai atribut ini adalah jumlah sel yang akan digabungkan. Atribut VALIGN menentukan perataan vertikal isi sel. Ini dapat memiliki nilai berikut: TOP (tepi atas), MIDDLE (tengah) dan BOTTOM (tepi bawah). Standarnya adalah TENGAH. Atribut WIDTH menentukan lebar sel dalam piksel.
Pertanyaan untuk konsolidasi. 4. Pekerjaan rumah: 1. Buat tabel yang berisi satu sel di baris pertama, dua sel di baris kedua, dan tiga sel di baris ketiga. 2. Amati dalam praktiknya efek penggunaan nilai yang berbeda untuk atribut ALIGN tag Halo, para pembaca situs blog yang budiman. Di , saya mencoba untuk mulai berbicara tentang prinsip-prinsipnya, tetapi sayangnya, perhatian saya harus sangat teralihkan dengan menjelaskan konsep dasar webmastering. Saya sebenarnya tidak ingin mengabaikan hal-hal mendasar ini, dan saya benar-benar meminta maaf kepada mereka yang sudah mengetahui semua ini, tetapi ingin mendengar persis perbincangan tersebut dan tidak mendengar. Pada artikel ini saya akan mencoba mengejar dan meningkatkan. Saya harap saya tidak perlu terlalu menyimpang dari topik utama. Baiklah, kita akan menganggap permintaan maaf dan pertobatan sudah selesai, dan inilah saatnya untuk mulai berbisnis. Kami membuat layout website dalam 2 kolom berdasarkan tata letak DIVJadi, pada artikel sebelumnya, kami membuat folder TEST di hosting kami (meskipun untuk tujuan ini, lihat ikhtisar kemampuannya) folder TEST, di mana kami menempatkan dua file utama tata letak masa depan kami: Index.html dan Style .css. Sebenarnya, mereka akan membuat versi bingkai yang paling sederhana. Sekali lagi, Anda mungkin harus mengambil sedikit istirahat dari tata letak sebenarnya, karena... tidak semua orang memahami cara membuat folder TEST di direktori root yang terletak di tuan rumah sebenarnya. Dan juga apa itu - root situs dan di mana mencarinya saat mengakses melalui FTP. Namun memang pertanyaan tersebut bukanlah hal yang sepele bagi pengguna yang baru pertama kali mengenal hosting. Jadi, Anda harus terhubung terlebih dahulu melalui FTP. Detail untuk terhubung melalui FTP seharusnya diberikan kepada Anda oleh penyedia hosting Anda (baca secara umum, a). Setelah Anda terhubung melalui FTP (saya menggunakan program FileZilla untuk tujuan ini - seluruh kebenaran telah ditulis tentangnya, dan saya akan menceritakan semuanya menggunakan contohnya), maka di jendela kanan program ini Anda akan melihat isi direktori yang telah dialokasikan oleh penghosting untuk situs Anda, skrip, dan sejenisnya. Namun direktori ini tidak akan menjadi folder root. Root harus berisi file Index.php, serta semua file dan folder lain dari mesin yang Anda gunakan. Direktori terpisah digunakan untuk tujuan ini, meskipun namanya mungkin berbeda tergantung pada hosting tertentu. Struktur folder internal di direktori utama (dibuka saat terhubung ke situs melalui FTP) mungkin juga berbeda, tetapi intinya tetap sama. Sebagai contoh, Anda dapat melihat gambar berikut: Anda harus menyalin file mesin bukan ke direktori paling atas ini, yang dapat Anda akses melalui FTP, tetapi ke folder yang disebut root. Bagaimana cara mengetahui direktori mana yang ada yang memiliki root? Nah, sebagai upaya terakhir, Anda bisa bertanya langsung kepada pemilik hostingnya. Nah, mereka wajib membantu Anda dalam hal seperti itu. Namun secara umum, paling sering dipanggil baik PUBLIC_HTML atau HTMLDOCS. Jika Anda belum menemukan direktori seperti itu, maka Anda perlu bertanya kepada pemilik hosting, dan jika ada yang serupa, maka ini adalah yang paling terkenal. akar dan di dalamnya Anda harus membuat folder TEST kami yang telah lama menderita, yang saya tulis, dan Anda, saya harap, membaca beberapa paragraf ini. Bagaimana cara membuat direktori menggunakan FileZilla? Ya, sangat sederhana. Yang harus Anda lakukan adalah membuka direktori akhir di sisi kanan program dan klik kanan pada ruang kosong, dan dari menu konteks pilih "Buat direktori". Fiuh, kami membuat folder TEST di direktori root situs. Dan terima kasih untuk itu. Secara umum, tidak perlu repot dengan hal ini. Bagaimana bisa? Dan ini dia. Direktori TEST dapat dibuat di beberapa folder internal website, namun akan tetap lebih mudah di root. Untuk server lokal Denver, Anda perlu membuat direktori TEST di direktori berikut: C:\server\home\localhost\www\ Alih-alih drive "C", Anda perlu menentukan drive di komputer Anda tempat server lokal diinstal. Kemudian, untuk melihat layout 2 kolom yang kita buat berdasarkan layout Div, Anda perlu mengetikkan jalur berikut di bilah alamat browser: http://localhost/tes/ Sial, jika Anda menceritakan semuanya dengan sangat detail, Anda akan mendapatkan buku kecil tentang tata letak blok, dan sebagian besar akan membahas dasar-dasar webmastering, tetapi saya tidak bisa menulis dengan cara lain, saya sudah terbiasa memilah-milahnya. semua nuansa di rak. Jangan khawatir, kami adalah webmaster yang cukup paham dan masih jauh dari kata baru dalam hal ini. Mari kita lanjutkan pembicaraan tentang tata letaknya. Dalam file Index.html kita akan mendefinisikan sendiri wadah DIV tempat frame kita akan dibuat, dan dalam file Style.css kita akan menjelaskan posisi dan penampilan wadah DIV ini. Singkatnya, tetapi Anda akan melihat bagaimana hasilnya nanti. Untuk mengamati hasil pekerjaan kami di browser, kami akan mengakses secara berkala folder TEST yang terletak di hosting Anda atau di server lokal. Dalam kasus host asli, Anda perlu mengetikkan sesuatu seperti ini di bilah alamat browser Anda: https://situs/tes Namun ada dua “tetapi” di sini. Pertama, alih-alih https://site/ Anda harus memasukkan URL Anda, dan kedua, perhatikan huruf Latin yang membentuk nama direktori TEST Anda. Jika Anda menulis nama folder dalam huruf kapital, lalu di bilah alamat Anda perlu mengetikkan nama folder dengan huruf kapital (saya menulis TEST di sini dalam huruf besar, hanya untuk menyorotnya dengan latar belakang teks lainnya). Faktanya adalah bahwa pada hosting sebenarnya, dalam banyak kasus, server berjalan di bawah sistem UNIX sistem operasi, di mana huruf kapital dan huruf kecil berbeda(tidak seperti Windows, yang biasa kami gunakan). Kami mulai menata tata letak situs web dalam 2 kolom pada divSeperti yang sudah saya sebutkan, pertama-tama kita akan mencoba membuat layout dua kolom, yang secara skematis dapat direpresentasikan seperti ini:
Kami akan menempatkan semua elemen dalam satu wadah Div besar sehingga Anda dapat mengubah ukuran dan penyelarasan seluruh tata letak melalui properti wadah ini. Di dalam Div utama akan ada container yang bertanggung jawab untuk membentuk blok individual (header, kolom kiri, area konten, footer). Kami akan mengukurnya dan menyesuaikan posisinya di halaman menggunakan CSS. Jadi mari kita mulai. Mari kita mulai dengan Index.html. Buka untuk mengedit di editor yang nyaman bagi Anda (saya menggunakan yang gratis terbaik untuk tujuan ini editor teks Buku Catatan++ - ). Agar terbiasa dengan desain yang benar dokumen HTML, ayo segera tuliskan bagian standarnya (Saya baru saja membahas ini di artikel sebelumnya. Akan ada DOCTYPE () dan semua tag teratas lainnya yang, jika hilang, dapat ditambahkan sendiri oleh browser (sudah menjadi pintar - itu menakutkan):
Arti semua baris dalam kode ini telah saya jelaskan secara detail di artikel sebelumnya (lihat link di awal publikasi ini), jadi sekarang saya akan fokus hanya pada baris:
Baris ini memberi tahu browser di mana mencarinya dan apa nama file cascading style sheet (memiliki ekstensi CSS), yang dibutuhkan browser untuk menampilkan dengan benar desain templat situs masa depan yang telah kita rencanakan. Dalam kasus kami, ini disebut Style.css(), dan Anda perlu mencarinya di folder yang sama tempat Index.html berada (sebenarnya, di mana baris ini ditulis). Mengapa di folder yang sama ini? Karena jika Anda tidak menentukan jalur apa pun ke file tersebut (hanya sebutkan namanya), maka browser akan mencarinya di direktori yang sama dengan tempat file yang sedang dieksekusi berada (dalam kasus kami, ini adalah Index.html). Itu. tidak adanya path akan sama seperti jika saya menulis path ke Style.css dalam bentuk:
Namun opsi perekaman pertama lebih pendek dan lebih universal, karena jalur ke folder dengan file tidak secara langsung ditunjukkan di sana, yang berarti Anda dapat menempatkan file Index.html dan Style.css di direktori lain, mengakses Index.html dari bilah alamat, dan Style.css akan tetap dimuat. Baca lebih lanjut tentang tautan relatif dan absolut). Dalam hal ini, saya ingin mencatat bahwa Anda tidak perlu repot dengan hosting atau server lokal sama sekali. Hanya buat di komputer Anda folder mana saja dan tempatkan Index.html dan Style.css kita di dalamnya. Tulis jalur pertama ke file Style.css dalam bentuk:
Itu saja. Anda sekarang seharusnya dapat membuka Index.html ( klik dua kali arahkan mouse ke atasnya) di browser default untuk membuka file dengan ekstensi HTML di komputer Anda, dan Style.css akan dimuat secara otomatis. Metode ini nyaman pada tahap pembelajaran, tetapi tetap saja, semua yang saya ceritakan tentang bekerja di hosting asli atau server lokal juga pasti akan berguna bagi Anda di masa depan. Dan kini bekerja dari folder di komputer Anda bisa menjadi lebih nyaman daripada di hosting. Meskipun, siapa yang peduli. Kami mendaftarkan kumpulan blok yang diperlukan di index.htmlSekarang kita perlu membuat empat wadah DIV untuk semua bagian tata letak 2 kolom kita (header, kolom kiri, area konten, footer) dan menyertakannya dalam satu Div besar. Nama-nama blok ini dapat dimasukkan ke dalam wadah Div untuk bagian tata letak agar lebih jelas. Kami akan menulis semua ini di antara pembukaan dan penutupan tag HTML Tubuh. Anda akan mendapatkan kode seperti ini di Index.html:
Topi
Kolom kiri
Konten halaman
Itu. Tepat setelah tag Body pembuka, kami menulis tag pembuka Div utama wadah tata letak:
Di mana ID ditentukan (dalam kasus kami id="maket"). Selanjutnya, untuk ID ini (), dalam file cascading style sheet Style.css, kita akan menambahkan properti CSS yang memungkinkan kita menentukan ukuran dan perataan Div utama. Setelah tag pembuka Div utama, kami menulis kode untuk empat container yang akan menjadi elemen tata letak.
Topi
Kolom kiri
Konten halaman
Kami menetapkan keempat Div ini ID masing-masing, yang kemudian kami akan menulis properti CSS di Style.css untuk membantu mengonfigurasi ukuran dan penempatan relatif (pemosisian) wadah ini. Untuk kejelasan, saya menuliskan tujuan mereka di dalamnya. Nah, sebelum tag Body penutup, kita letakkan tag penutup Div utama untuk keseluruhan layout: Sekarang, jika kita membuka Index.html yang kita buat di browser, kita hanya akan melihat nama-nama bagian dari layout 2 kolom yang tercantum dalam sebuah kolom. Jika Anda membuka Index.html di browser dan memilih “Garis Besar” - “Garis Besar Elemen Tingkat Blok” dari menu plugin ini, Anda akan melihat sesuatu seperti berikut:
Itu. semuanya menjadi persis seperti yang kami inginkan - empat Div dimasukkan ke dalam satu wadah utama. Namun mengapa semuanya terlihat berbeda dari apa yang kami uraikan? diagram struktural tata letak berdasarkan tata letak blok? Hanya saja kami belum menulis apa pun di Style.css kami, yang akan membantu secara ajaib (menggunakan properti CSS) menempatkan semua div pada tempatnya. Menulis properti CSS untuk blokBuka di editor Style.css yang nyaman dan tulis gaya CSS untuk kontainer yang baru dibuat. Pertama, di Style.css Anda harus menulis aturan untuk tag Body dan Html, yang memungkinkan Anda mengatur ulang indentasi tata letak situs dari batas internal dan eksternal layar (untuk memastikan kompatibilitas lintas-browser): Isi, html ( margin:0px; padding:0px; ) Anda mungkin pernah mendengar atau melihat bahwa tata letak memiliki lebar yang tetap (misalnya, 800 piksel), dan dapat berupa karet - lebarnya disesuaikan dengan resolusi layar pengunjung. Opsi kedua (dapat disesuaikan) cukup sering digunakan di forum, dan untuk situs web, tata letak dengan lebar tetap paling sering digunakan. Hal ini terutama berlaku sekarang, dengan munculnya monitor layar lebar resolusi tinggi layar (yang berbahan karet tidak akan terlihat bagus pada monitor seperti itu). Oleh karena itu, kami akan menulis sejumlah properti CSS untuk Div utama kami di Style.css, yang memungkinkan kami membuat tata letak dengan lebar tetap (misalnya, 800 piksel) dan menyelaraskannya di tengah relatif terhadap tepi layar (dalam Index.html untuk wadah utama kami menulis ID yang disebut maket): Jadi mari kita pecahkan rekor ini. Anda mungkin sudah menyadari bahwa #MAKET() artinya entri ini pada file CSS hanya akan diterapkan pada Div yang berisi ID="MAKET". DI DALAM kurung kurawal Properti CSS ditulis dengan nilainya. Sintaks umum Struktur entri dalam file CSS terlihat seperti ini: Pemilih ( property1: value; property2: value; ... ) Apa yang luar biasa adalah bahwa kode CSS akan bekerja dengan baik terlepas dari karakternya, apakah ia menambahkan jeda baris, spasi, atau tab di antara elemen kodenya atau tidak - secara umum, tulislah dengan cara yang paling nyaman bagi Anda. Namun saya berencana untuk membicarakan hal ini secara mendetail dalam serangkaian artikel tentang bekerja dengan gaya untuk webmaster pemula. Mari kita lihat setiap properti secara terpisah. Properti CSS pertama dari tata letak dua kolom adalah: Lebar:800 piksel; Semoga beruntung untukmu! Sampai jumpa lagi di halaman situs blog Anda mungkin tertarik
Setiap halaman web terdiri dari elemen-elemen yang terletak di dalamnya, dan hampir selalu bertanggung jawab atas penempatannya tata letak blok div. Tentu saja ada juga tata letak tabel yang menggunakan tag
|
