Tag baru. Cara mendorong footer mengambang dengan benar ke bagian bawah halaman Masukkan spacer dan lawan Internet Explorer
Ini semacam mimpi buruk! Mengapa footer situs Anda muncul lagi dan mengubah desain? Apakah benar-benar tidak mungkin untuk menekan footer ke bagian bawah halaman dengan benar dengan sesuatu? Konten atau batu bata setidaknya! Bata di monitor tidak naik?
Begitu, lalu duduk dan tidak melakukan apa-apa sampai Anda membaca artikel kami sampai akhir.
Membuat footer yang tepat untuk situs web Anda
Banyak pemilik situs mengalami masalah ini ketika footer halaman muncul "up". Dan kemudian tidak jelas apa yang harus dilakukan. Paling sering, desain situs web dibuat dengan tergesa-gesa sendiri ( lingkaran "tangan gila") atau webmaster pemula.
Pada saat yang sama, pada awal kehidupan situs, tidak ada hal mengerikan yang terjadi. Dan idilis seperti itu berlanjut selama konten menekan "dengan beratnya sendiri" di ruang bawah tanah, mencegahnya naik. Tetapi ada baiknya menempatkan lebih sedikit materi di halaman, dan footer "tenang" baru-baru ini langsung naik, menjadikan seluruh desain situs menjadi tampilan yang tidak pantas.
Untuk menghilangkan "cacat" template yang dibuat-buat ini, tidak perlu mengeluarkan uang untuk layanan webmaster. Paling sering, footer situs dapat ditempatkan sendiri. Mari kita pertimbangkan semua opsi yang memungkinkan untuk menghilangkan masalah seperti itu:
Cara pertama
Cara pertama untuk "menjangkar" footer "ke bawah" halaman didasarkan pada CSS. Mari kita mulai dengan kode contoh, dan kemudian melihat lebih dekat implementasinya:
html ( height: 100%; ) header, nav, bagian, artikel, samping, footer ( display: block; ) body ( height: 100%; ) #wrapper ( width: 1000px; margin: 0 auto; min-height: 100 %; height: auto !important; height: 100%; ) #header ( height: 150px; background-color: rgb(0,255.255); ) #content ( padding: 100px; height:400px; background-color: rgb(51,255,102) ; ) #footer ( lebar: 1000px; margin: -100px auto 0; tinggi: 100px; posisi: relatif; warna latar: rgb(51,51,204); )
Untuk menempelkan footer ke bagian bawah tag halaman
html ( tinggi: 100%; ) tubuh ( tinggi: 100%; )
Atur ketinggian minimum lapisan wadah menjadi 100%. Untuk kasus ketika lebar konten lebih besar dari tinggi wadah, setel properti ke auto . Berkat ini, pembungkus akan secara otomatis menyesuaikan dengan lebar konten yang ditempatkan di halaman:
#wrapper ( tinggi minimum: 100%; tinggi: otomatis !penting; tinggi: 100%; )
Baris kode "height: 100%" adalah untuk versi IE yang lebih lama yang tidak menerima properti min-height.
Untuk memisahkan ruang untuk footer dalam desain halaman, kami mengatur indentasi untuk tag
#konten ( padding: 100px; )
Pada titik ini, kami memiliki halaman web layar penuh ditambah 100 piksel tambahan, yang "dinetralisir" oleh nilai padding footer negatif (margin: -100px ) ketika diposisikan relatif terhadapnya ( position: relative ). Jadi, dengan nilai padding negatif, kita "menggeser" footer ke area wadah yang memiliki ketinggian 100%.
Dalam contoh ini, markup dokumen web ditentukan menggunakan tag HTML 5 yang relatif baru, yang mungkin disalahartikan oleh browser lama. Karena itu, seluruh desain halaman mungkin tidak ditampilkan dengan benar. Untuk menghindari ini, Anda perlu mengganti tag baru dari gudang bahasa hypertext versi 5 dengan yang biasa.
Versi yang ditingkatkan
Metode yang dibahas di atas tentang cara membuat footer di bagian bawah halaman "tidak tergoyahkan" tidak cocok untuk semua orang. Jika di masa depan Anda akan memodifikasi dan meningkatkan desain situs Anda menggunakan pop-up, maka lebih baik untuk meninggalkan penggunaan implementasi sebelumnya.
Paling sering dalam implementasi jendela pop-up, properti CSS z-index digunakan. Nilainya menentukan urutan tumpukan lapisan di atas satu sama lain.
Semakin tinggi nilai indeks-z suatu elemen, semakin tinggi pula elemen tersebut dalam tumpukan "pelapisan" keseluruhan.
Tetapi karena kita menggunakan padding footer negatif pada contoh sebelumnya, bagian bawah popup akan tumpang tindih dengan area footer atas. Padahal akan memiliki nilai z-index yang lebih tinggi. Karena induk dari popup (wrapper ) masih memiliki nilai yang lebih kecil untuk properti ini.
Ini versi yang lebih baik:
CSS - kode contoh:
html, body ( height: 100%; ) .header ( height:120px; background-color: rgb(0,255,102); ) .main ( min-height:100%; position: relative; background-color: rgb(100,255,255); ) .footer ( tinggi:150px; posisi: absolut; kiri: 0; bawah: 0; lebar: 100%; background-color: rgb(0,0,153); )
Seperti yang Anda lihat dari kode, kami menempatkan footer sebagai bagian dari elemen utama. Kami telah memberikan wadah posisi relatif, dan posisi absolut untuk footer. Kami memperbaiki footer di bagian paling bawah wadah dengan mengatur posisi kiri dan atas ke 0.
Varian untuk basement dengan ketinggian tidak tetap
Implementasi sebelumnya dapat memastikan bahwa footer selalu berada di bagian bawah halaman. Tetapi hanya jika footer lebarnya tetap. Tetapi bagaimana jika jumlah konten yang ditempatkan di dalamnya tidak dapat diprediksi?
Ini akan membutuhkan opsi yang lebih maju untuk ruang bawah tanah yang tidak tetap. Ini mengatur footer ke tabel-baris untuk properti tampilan. Ini akan membuatnya muncul sebagai baris tabel.
Halo, para pembaca situs blog yang terhormat. Kami melanjutkan topik tata letak blok, yang dimulai dan dilanjutkan di tiga artikel sebelumnya. Pada prinsipnya, kami telah berhasil membuat tata letak situs dua dan tiga kolom, dan kami bahkan berhasil mempertimbangkan nuansa membuat tata letak yang lancar.
Selain itu, pada artikel pertama tentang tata letak situs (), beberapa konsep dasar webmastering dipertimbangkan, tanpa pemahaman yang akan agak sulit untuk memahami nuansa.
Masalah apa yang Anda miliki dengan tata letak situs web kami?
Hari ini kita akan mencoba memecahkan satu masalah kecil yang mungkin muncul dengan layout yang kita buat tadi. Paling sering, situasi ini terjadi saat melihatnya di monitor besar (dengan resolusi tinggi) dan saat menampilkan halaman dengan sedikit informasi.
Dalam hal ini, mungkin footer tidak akan ditekan ke bagian bawah layar, tetapi akan terletak hampir di tengah tingginya, yang dalam banyak kasus akan terlihat jelek dan tidak estetis.
Namun, menurut saya, Anda perlu menekan footer ke bagian paling bawah dari tata letak situs, dan ini akan benar terutama jika tinggi halaman kurang dari tinggi layar pengguna. Secara skematis, ini dapat direpresentasikan sebagai berikut:
Itu. perilaku footer yang benar untuk kasus sejumlah kecil informasi pada halaman dan layar pengguna yang besar adalah sebagai berikut:
Untuk menerapkan ini, kita perlu melakukan sejumlah manipulasi dengan kode tata letak kita. Selain itu, kita akan membuat perubahan tidak hanya pada file styling CSS Style.css, tetapi juga pada Index.html, yang berisi kode Html dan membentuk blok Div. Tapi hal pertama yang pertama.
Misalnya, kita akan menggunakan tata letak situs tiga kolom yang telah kita buat sebelumnya. Dalam hal ini, Index.html akan terlihat seperti ini:
Dan properti CSS berikut ditulis dalam file Style.css:
Body, html ( margin:0px; padding:0px; ) #maket ( width:800px; margin:0 auto; ) #header( background-color:#C0C000; ) #left( background-color:#00C0C0; lebar:200px ; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer (warna-latar belakang:#FFC0FF; jelas:keduanya;)
Nah, tata letaknya sendiri terlihat seperti ini:
Seperti yang Anda lihat, footer tidak ditekan ke bawah dan, oleh karena itu, tidak memenuhi persyaratan kami (selalu terletak di bawah kolom terendah), jadi kami harus melakukan penyesuaian pada kode. Semua hal yang sama dapat dilakukan untuk tata letak dua kolom, dan untuk tata letak cair juga. Metodenya bersifat universal.
Cara mendorong footer ke bagian bawah tata letak situs
Jadi kita perlu memindahkan Div footer ke bagian bawah layar. Untuk melakukan ini, pertama-tama Anda harus mengatur ketinggian seluruh halaman menjadi seratus persen (ini akan memenuhi seluruh layar). Ini akan diperlukan untuk kemudian mengubah ukuran blok utama dengan tata letak juga hingga 100%.
Semua konten halaman situs ditempatkan di tag Body pembuka dan penutup, dan oleh karena itu kita perlu menambahkan satu properti CSS lagi ke tag Body di Style.css yang menyetel tingginya menjadi 100%:
Tubuh, html ( margin:0px; padding:0px; tinggi: 100%; )
Ini tidak akan mempengaruhi tampilan sama sekali, tetapi sekarang blog utama dapat direntangkan setinggi layar. Itu. itu semacam tahap persiapan.
Properti utama CSS, jika Anda mau, Anda bisa melihatnya. Sekarang mari kita atur Div kontainer yang membungkus seluruh tata letak kita ke ketinggian minimum 100%:
Saya juga ingin menyorotnya (div dengan id="maket"). Untuk melakukan ini, kami akan menetapkan bingkai untuknya menggunakan properti Border () yang sesuai:
Batas properti: solid 3px black memungkinkan Anda untuk mengatur batas solid (solid) dengan ketebalan 3 piksel hitam untuk wadah ini. Ini akan memungkinkan Anda untuk melihat dengan jelas bahwa wadah dengan tata letak direntangkan setinggi layar, bahkan dengan sedikit informasi di halaman:
Sekarang kita perlu mengeluarkan blok footer dari wadah umum dan meletakkannya di bawah, segera setelah yang umum. Apa yang akan diberikannya? Dan fakta bahwa, akhirnya, footer di tata letak berkenan untuk turun, dan tidak akan, seperti sebelumnya, menempel ke kolom terpanjangnya. Dalam hal ini, Index.html akan terlihat seperti ini:
Harap dicatat bahwa blok footer tidak lagi berada di dalam wadah umum (maket), dan oleh karena itu lebarnya tidak lagi dikontrol oleh properti CSS yang disetel untuk maket di file Style.css. Footer akan direntangkan melintasi lebar layar, tetapi tetap akan terletak di bagian bawah layar, tepat di bawah blok utama:
Namun lagi-lagi ada masalah, karena untuk melihat footer, sekarang Anda harus menggulir layar di browser (lihat scroll bar pada gambar di atas).
Ternyata ini karena wadah utama (tata letak) menempati seluruh ukuran layar (ini ditentukan oleh properti min-height: 100%), dan footer terletak tepat di belakangnya, dan Anda harus menggunakan menggulir untuk melihatnya, yang sangat tidak nyaman dan fungsional. .
Anda dapat mengatasi masalah ini dengan memberikan padding negatif ke footer container Div sehingga bergerak ke atas dengan jarak yang sama dengan tingginya. Dalam hal ini, wadah footer akan berjalan di atas wadah utama dan sesuai dengan ketinggian layar browser (yaitu, Anda tidak perlu menggunakan pengguliran untuk melihatnya).
Tetapi untuk menetapkan indentasi negatif dari atas, Anda perlu mengetahui ketinggian footer yang sama ini, tetapi kami belum mengetahuinya.
Oleh karena itu, pertama-tama kita atur ketinggian wadah yang berisi footer dengan mengatur properti yang sesuai di Style.css:
#footer( warna latar:#FFC0FF; jelas:keduanya; tinggi: 50px; )
Dan kemudian kami menetapkan bantalan negatif dari atas ke ketinggian yang sama dengan tingginya:
Ini akan memungkinkan footer naik tepat ke ketinggiannya sendiri dan dengan demikian masuk ke layar browser (sekarang kita dapat menghapus batas: properti CSS hitam 3px solid dari aturan untuk maket sehingga ketebalan batas tidak menghalangi seluruh tata letak kita , bersama dengan footer, dari pemasangan ke tinggi layar):
Seperti yang Anda lihat, sekarang bilah gulir tidak muncul di browser dan seluruh tata letak situs berbasis blok tiga kolom kami muat di satu layar (jika ada sedikit informasi di halaman) dan memiliki footer yang terletak di sangat bawah. Itulah yang perlu kami lakukan.
Kami memasukkan spacer dan bertarung dengan Internet Explorer
Tetapi ada masalah, yang hanya akan muncul ketika ada lebih banyak informasi di halaman tata letak dan situasi ini dapat berubah:
Ternyata situasi mungkin muncul ketika informasi di salah satu kolom tata letak akan masuk ke footer, yang tidak akan terlihat bagus. Ini karena padding negatif terkenal yang kami tetapkan untuknya, yang membantu menaikkan footer kami ke dalam wadah tata letak utama.
Itu. ternyata di bagian bawah layar ada dua blok yang saling tumpang tindih di area basement.
Solusi untuk masalah ini adalah menambahkan Div wadah kosong baru (disebut pengatur jarak) ke dalam wadah utama tata letak kami (maket), di tempat blok dengan footer berada sebelumnya.
Dengan mengatur ketinggian container baru ini ke ketinggian footer, kita dapat menghindari informasi dari container utama bertabrakan dengan blok footer. Mari beri wadah ini ID () yang disebut Rasporka dan sebagai hasilnya Index.html dari tata letak tiga kolom kami akan terlihat seperti ini:
Dan di Style.css kami menulis untuk ini ( , yang mengatur tinggi wadah pengatur jarak ini sama dengan tinggi ruang bawah tanah:
#rasporka ( tinggi: 50px; )
Akibatnya, footer akan ditekan dari bawah bukan ke informasi yang terkandung dalam wadah utama (misalnya, teks di kolom tertinggi), tetapi ke area yang sama tingginya dengan footer dengan wadah pengatur jarak yang tidak mengandung informasi apapun.
Dengan cara ini, kami menghindari tabrakan dan distorsi dalam tata letak tiga kolom kami. Semuanya akan menjadi jelas dan indah (kesopanan dan kemuliaan):
Seperti yang saya sebutkan di atas, lebar footer sekarang harus diatur secara terpisah, karena. wadah ini bukan lagi bagian dari wadah utama. Untuk melakukan ini, Anda perlu menambahkan properti tambahan untuk Footer ke file CSS, memungkinkan Anda untuk mengatur lebarnya dan menyelaraskannya secara horizontal di tengah layar.
Masuk akal untuk mengatur lebar sama dengan lebar seluruh tata letak menggunakan properti Lebar, dan perataan horizontal dapat dilakukan dengan cara yang sama seperti yang kita lakukan untuk seluruh tata letak pada tata letak blok.
Jadi, kita perlu menambahkan properti tambahan untuk ID Footer:
#footer( background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; )
Menggunakan properti width:800px, lebar diatur ke 800px, dan menggunakan dua properti margin-left: auto dan margin-right: auto, margin kiri dan kanan footer diatur secara otomatis, sebagai akibatnya margin ini akan sama dan pahlawan kita akan sejajar dengan tengah:
Yah, sepertinya tidak ada lagi yang perlu diperbaiki, tapi itu dia. Seperti biasa, browser favorit kami Internet Explorer 6 tidak memahami sesuatu dari properti CSS yang kami gunakan. Di browser ini (dan mungkin di beberapa yang lama juga), terlepas dari semua upaya kami, footer tidak akan ditekan ke bawah, tetapi akan tetap menempel pada kolom tertinggi dari tata letak situs.
Ini semua karena ( tidak memahami properti min-height: 100% yang kami gunakan untuk mengatur tinggi minimum kotak utama agar sama dengan tinggi layar.
Oleh karena itu, untuk mengatasi masalah ini, kita harus menerapkan apa yang disebut peretasan, yang memungkinkan kita menjelaskan (dengan jari) ke browser lama apa yang harus dilakukan. Sebelum daftar properti CSS untuk maket, Anda harus memasukkan kombinasi berikut:
* html #make ( tinggi: 100%; )
Aturan ini hanya akan diterapkan untuk browser Internet Explorer 6, sisanya tidak akan memperhitungkan dan mengikutinya.
Jadi, tampilan akhir Style.css dengan footer ditekan ke bagian bawah layar adalah sebagai berikut:
Body, html ( margin:0px; padding:0px; height: 100%; ) * html #maket ( height: 100%; ) #maket ( width:800px; margin:0 auto; min-height: 100%; ) # header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content ( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer( background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; margin-kiri: otomatis; margin-kanan: otomatis; ) #rasporka ( tinggi: 50px; )
Nah, bentuk akhir dari Index.html diberikan sedikit lebih tinggi. Itu saja, rangkaian artikel yang dikhususkan untuk tata letak blok 2 dan 3 kolom tetap dan tata letak situs karet dapat dianggap selesai.
Anda juga dapat menonton video "Bekerja dengan tag div HTML":
Semoga sukses untuk Anda! Sampai jumpa di situs halaman blog
Anda mungkin tertarik
Tata letak blok - Kami membuat tata letak dua kolom, tiga kolom, dan lancar untuk situs 
Tata letak DiV - Buat blok untuk tata letak dua kolom dalam HTML, tentukan ukurannya dan atur posisinya dalam CSS
Kami memulai pelajaran kelima tentang mengedit template di CMS Joomla 3, kali ini kami akan berbicara tentang footer untuk situs tersebut. Mari kita menganalisis opsi desain yang mungkin untuk footer dan beberapa pendekatan untuk pembuatannya.
Apa itu footer?
Footer atau footer situs disebut bagian terendah, yang, sebagai aturan, berisi informasi tentang situs, hak cipta, dll. Standar dalam template Protobintang, footer tidak mengandung informasi yang berarti:
Konten standar footer adalah tahun berjalan, nama situs dan tautan "Naik" yang mengarah ke bagian atas halaman. Sejujurnya, versi footer ini sama sekali tidak berguna bagi pengunjung situs kami, selain itu, tautan "Naik" sama sekali tidak diperlukan dalam kasus kami, kami telah membuat tombol yang indah untuk tujuan ini.
Oleh karena itu, untuk memulainya, saya mengusulkan untuk menyingkirkan konten footer standar. Membuka file index.php template Protostar standar dan cari kode yang bertanggung jawab untuk menampilkan footer. Kode antara baris 205 dan 219 bertanggung jawab untuk menampilkan footer, yang terlihat seperti ini (tergantung pada versi Joomla dan perubahan yang dilakukan pada file indeks, baris kode mungkin berbeda):
Dan sekarang mari kita hilangkan kode tambahan dari baris 210 hingga 217, sehingga kode untuk footer akan menjadi seperti ini:
Faktanya, kami telah menghapus semua yang mungkin, hanya menyisakan kemampuan untuk menampilkan modul di footer, baris bertanggung jawab untuk ini:
Kami menyimpan file indeks, pergi ke situs dan memperbarui halaman. Konten footer hilang, itulah yang kami inginkan. Sekarang Anda dapat menambahkan informasi baru ke footer sesuai kebijaksanaan Anda, tetapi sebelum menambahkannya, Anda harus menjawab pertanyaan - apa yang bisa ada di footer situs?
Informasi apa yang ditampilkan di footer situs
Agar footer efektif, footer harus berisi informasi yang mungkin menarik bagi pengunjung situs. Tergantung pada arah situs, informasi ini mungkin berbeda. Berikut adalah contoh kecil dari informasi yang dapat dimuat di footer:
- Menu tambahan- menu ini dapat menduplikasi yang sudah ada, atau menjadi unik. Menu duplikat di footer berguna ketika situs Anda sering diakses dari perangkat seluler, pengunjung, setelah menggulir halaman ke bagian paling bawah, dapat menggunakan navigasi situs tambahan.
- Kontak informasi- untuk situs penjualan, atau untuk situs yang menyediakan berbagai layanan, keberadaan informasi kontak sangat diperlukan, dan di footer itu tempatnya.
- Tombol media sosial- di dunia modern, jejaring sosial adalah segalanya bagi banyak orang, jadi informasi seperti itu tidak akan pernah berlebihan.
- Berbagai tautan- misalnya, tautan ke peta situs, umpan berita, dll.
- Widget- Anda dapat menampilkan informasi footer yang mencerminkan aktivitas di situs, penghitung kehadiran, komentar terbaru, dll.
- Periklanan- ada saatnya Anda ingin mendapatkan dari situs tidak hanya kehadirannya, tetapi juga keuntungan, dalam hal ini footer mungkin bukan wadah yang buruk untuk beriklan.
Jangan mencoba menjejalkan semua hal di atas ke footer situs Anda, informasi yang berlebihan, seperti ketiadaan, juga tidak akan menghasilkan apa-apa.
Di sisi lain, tidak masalah informasi apa yang akan dimuat di footer situs Anda, yang utama adalah cocok dengan keseluruhan desain dan dirancang dengan indah.
Membuat footer untuk situs
Sekarang mari kita tinggalkan teorinya dan lanjutkan langsung ke pembuatan footer. Ada beberapa cara untuk membentuk footer:
- Mobil- melibatkan penggunaan berbagai modul untuk menampilkan informasi tertentu
- manual- modul tidak digunakan, semua perubahan dilakukan secara manual dengan cara mengedit file template
- Campuran- dalam hal ini, kedua opsi di atas digunakan bersama
Masing-masing metode bagus dengan caranya sendiri, misalnya, pada tahap awal, penggunaan modul akan sangat menyederhanakan tugas, dan metode ketika modul tidak digunakan akan mempercepat pemuatan halaman. Bagaimanapun, pilihan ada di tangan Anda.
Untuk mempertimbangkan semua opsi yang mungkin, saya akan memilih opsi ketiga. Dengan demikian, Anda akan memiliki gambaran umum tentang apa yang sedang diedit dan bagaimana caranya.
Sebagai contoh, saya memutuskan untuk membagi footer menjadi tiga bagian vertikal, tautan ke halaman tertentu dari situs akan ditampilkan di sebelah kiri, beberapa jenis logo akan berada di tengah, dan teks kecil akan ditampilkan di sebelah kanan. Modul akan bertanggung jawab untuk menampilkan bagian kiri dan kanan footer, dan kami akan menulis logo secara manual di file indeks.
Untuk memulainya, mari kita buat posisi baru untuk modul di footer (kita berbicara tentang cara melakukan ini dalam pelajaran tentang menyiapkan dan mengedit template) dalam jumlah dua bagian. Karena mereka akan ditempatkan di sisi kiri dan kanan footer, mereka memiliki nama yang sesuai - footer-kiri dan footer-kanan. Kami mendeklarasikannya dalam file templateDetails.xml.
Sekarang kita buat perubahan pada file indeks template, ternyata kode saya seperti ini:
dasar. "templat/". $ini->templat . "/images/joom4all.png"?>" />Dan untuk kejelasan, tangkapan layar:
Bagaimana modul ditampilkan jelas, tetapi saya ingin membahas logo lebih detail. Kode berikut bertanggung jawab untuk menampilkan logo:
Sepintas, ini terlihat seperti tag HTML biasa untuk sebuah gambar, tetapi alih-alih jalur file biasa, kode php ditulis. Pada pandangan pertama, kode ini mungkin tampak rumit dan tidak dapat dipahami, tetapi pada kenyataannya, jika Anda membongkarnya, menjadi jelas bahwa tidak ada yang rumit di dalamnya:
- - awal kode php
- gema- bertanggung jawab untuk mengeluarkan string
- $ini->baseurl- baris ini mengembalikan nama situs
- templat/- di sini kami menunjukkan bahwa gambar disimpan di folder template
- $ini->templat- mengembalikan nama template saat ini
- /images/joom4all.png- jalur ke gambar di dalam folder root template dan nama file dengan gambar
- ?> - akhir kode php
Sebagai hasil dari penggunaan kode php ini, kami mendapatkan jalur relatif ke file gambar. Dengan kata lain, apa pun nama situsnya dan template apa yang digunakan, gambar akan diambil dari folder gambar template yang dipilih.
Kami menyimpan file index.php, sekarang kami dapat menutupnya, itu tidak akan berguna lagi bagi kami.
Sekarang mari kita buat beberapa modul yang akan kita tampilkan di posisi baru yang baru saja kita buat. Modul pertama akan menampilkan menu di footer, dan modul kedua akan menampilkan teks kecil.
Pada tahap selanjutnya, kami membuat modul - untuk menu dengan tipe "Menu" dan untuk teks dengan tipe "HTML code" (cara membuat modul). Sebagai posisi untuk mereka, pilih posisi modul yang baru dibuat:
Untuk membedakan menu footer kami dari menu lainnya di situs, dalam pengaturan modul menu, tambahkan akhiran kelas "_footer" ke dalamnya:
Agar tidak menjelaskan jenis modul apa dengan tipe "kode HTML", saya akan menunjukkan prinsip operasinya di tangkapan layar:
Saya mengisi modul ini dengan beberapa teks yang akan ditampilkan di footer, selain teks biasa, saya menulis kode php kecil yang menampilkan tahun berjalan:
Kami menyimpan modul dan pergi ke situs untuk memeriksa hasilnya dan inilah yang saya dapatkan:
Hasilnya, meski ada, tapi tidak terlalu mengesankan. Sekarang kita perlu menata elemen footer dengan CSS secara lebih memadai.
Mari kita mulai dengan blok footer baru:
Foot-left, .foot-center(float: left;) /*footer block alignment*/ .foot-left (width: 20%;) /*left block width*/ .foot-center (margin-left: -6px ;) /*center block padding*/ .foot-right ( /*right block*/ float: none; height: 60px; )
Kandidat desain berikutnya adalah menu, yang saya terapkan gaya berikut:
Ul.nav.menu_footer (margin: 0;) /*zero menu margins*/ ul.nav.menu_footer li ( /*menu text styling*/ font-family: "Lobster", kursif; ukuran font: 16px; baris - tinggi: 18px; ) ul.nav.menu_footer li.item-179 a ( /* Item menu peta situs*/ margin-left: 15px; warna: #fc8f30; ) ul.nav.menu_footer li.item-180 a ( /* Butir menu Tentang situs*/ warna: #5aa426; border-top: 3px solid #5aa426; ) ul.nav.menu_footer li.item-181 a ( /*Item menu Kontak*/ margin-left: 45px; border- bottom: 3px solid #0f70ad; warna: #0f70ad; )
Dan akhirnya, kami memisahkan footer dari bagian utama konten:
Footer.footer hr (border-top: 3px solid #fc8f30;) /*pisahkan footer dari konten utama*/
Kami menyimpan file gaya, pergi ke situs dan lihat hasilnya:
Jadi kami membuat footer untuk situs kami, yang terlihat jauh lebih menyenangkan daripada yang standar. Dalam hal ini, saya menganggap pelajaran ini selesai, dan dalam pelajaran berikutnya kita akan memeriksa kemungkinan kesalahan desain adaptif dan memperbaiki beberapa kekurangan. Selain itu, saya menyarankan Anda untuk membaca artikel tentang cara membuat template Joomla 3 dan khususnya footer dari awal dengan cepat menggunakan Bootstrap.
HTML5 memperkenalkan beberapa tag baru untuk struktur kode: