Blok horizontal paling bawah dari tata letak halaman sering disebut sebagai "footer". Di dalamnya, seperti di blok halaman lainnya, elemen desain ditempatkan, tetapi tidak seperti yang lain, masalah khusus sering muncul dengan penempatan blok khusus ini. Mereka terhubung dengan fakta bahwa browser yang berbeda memahami standar bahasa CSS secara berbeda dan bisa sangat sulit untuk menempatkan footer di tepi bawah jendela browser. Di bawah ini adalah kode untuk salah satu solusi untuk masalah ini.
Diperlukan
Pengetahuan dasar tentang CSS dan HTML
instruksi
Langkah 1
Di baris pertama kode sumber halaman, tempatkan referensi ke spesifikasi Transisi XHTML 1.0:
Langkah 2
Tempatkan blok utama struktur halaman di dalam badan dokumen (antara dan tag). Blok tempat konten utama akan ditempatkan harus terdiri dari dua lapisan bersarang. Misalnya, biarkan bagian luar memiliki pengidentifikasi OuterDiv, dan bagian dalam - InnerDiv:
Di sinilah konten utama halaman akan berada.
Di belakang mereka tempatkan blok footer dengan pengenal, misalnya, FooterDiv:
Footer halaman.
Langkah 3
Tempatkan di bagian kepala kode HTML (antara dan tag) tautan ke file eksternal dengan deskripsi gaya css:
@import "footerStyle.css";
Langkah 4
Simpan kode halaman master lengkap ke file dengan ekstensi html. Ini mungkin terlihat seperti ini:
Footer yang ditekan
@import "footerStyle.css";
Di sinilah konten utama halaman akan berada.
Footer halaman.
Langkah 5
Buat file stylesheet - file teks biasa yang harus disimpan dengan ekstensi css dan nama yang Anda tentukan dalam kode HTML (footerStyle.css). Tulis ke file ini deskripsi gaya berikut untuk blok yang digunakan di halaman:
* {batas: 0; bantalan: 0}
html, badan {tinggi: 100%;}
tubuh {
posisi: relatif;
warna: #222222;
}
#OuterDiv {
margin: 0;
tinggi minimum: 100%;
latar belakang: #aaaaaa;
warna: #222222;
}
* html #OuterDiv {tinggi: 100%;}
#FoterDiv {
posisi: relatif;
jelas: keduanya;
margin-atas: -60px;
tinggi: 60 piksel;
lebar: 100%;
warna latar belakang: Biru Tua;
perataan teks: tengah;
warna: #eeeeff;
}
. InnerDiv {
lebar: 100%;
mengapung: kiri;
}
