Tableless Layouts Buka Desain Frontiers Anyar
Aya loba alesan teu make tabel for teu ngarenah . Salah sahiji alesan paling sering urang masihan pikeun neraskeun ngagunakeun éta sabab éta hésé do perenah jeung CSS. Sanajan CSS scripting teu entail kurva learning, nalika anjeun ngartos kumaha carana do perenah CSS, Anjeun bisa jadi kaget di kumaha gampang eta tiasa. Sarta sakaligus nu nalungtik, anjeun gé geus kajawab alesan paling umum kadua urang masihan keur teu make CSS- "Ieu gancang nulis tabel." Ieu gancang sabab nyaho tabel, tapi sakali anjeun neuleuman CSS, Anjeun bisa jadi sagampil rusuh kalawan éta.
Browser Rojongan of Positioning CSS
Positioning CSS ieu ogé dirojong ku sababaraha panyungsi modérn. Iwal mun keur ngawangun loka pikeun Netscape 4 atawa Internet Explorer 4, pamiarsa Anjeun teu kedah ngagaduhan gangguan nempo kaca web CSS-diposisikan Anjeun.
Rethinking Kumaha Anjeun Ngawangun Page a
Lamun anjeun ngawangun loka anu ngagunakeun tabel, Anjeun kudu pikir dina tabular format. Dina basa sejen, nu nuju mikir dina istilah sél na barisan jeung kolom. Kaca Wéb anjeun bakal nembongkeun pendekatan ieu. Lamun anjeun mindahkeun ka design CSS positioning, anjeun bakal ngamimitian pamikiran kaca anjeun dina jihat eusi, sabab eusi bisa ditempatkeun mana anjeun dipilampah dina tata perenah-malah layered on luhur kandungan lianna.
jaba béda boga struktur béda. Pikeun ngawangun hiji halaman éféktif, evaluate struktur naon kaca tinangtu sateuacan Anjeun napelkeun eusi ka eta. Hiji halaman conto bisa ngawengku lima bagian béda:
- Lulugu. Imah jeung iklan dina spanduk, nami loka, Tumbu navigasi, hiji judul artikel na ogé sababaraha hal lianna.
- Kolom katuhu. Ieu sisi katuhu kaca sareng kotak search, Iklan, buleud video, sarta wewengkon balanja.
- Eusi. Teks artikel, pos blog atanapi balanja karanjang-daging-na-kentang kaca.
- Iklan Inline. The advertisements inline dina eusi.
- Footer. Handap navigasi, informasi pangarang, informasi hak cipta, Iklan banner handap, sarta Tumbu patali.
Tinimbang putting jalma lima unsur dina méja, nganggo HTML5 sectioning elemen pikeun ngartikeun porsi béda tina kandungan, sarta tuluy make positioning CSS pikeun nempatkeun unsur eusi dina kaca.
Ngidentipikasi Kandungan Bagean anjeun
Saatos Anjeun geus ditetepkeun wewengkon eusi béda loka, anjeun kudu nulis kana HTML Anjeun. Bari bisa, umumna, nempatkeun bagian anjeun dina urutan sagala, éta mangrupakeun ide nu sae pikeun nempatkeun bagian pangpentingna kaca anjeun munggaran. pendekatan ieu bakal ngabantu kalayan optimasi pilarian-mesin, kitu ogé.
Pikeun demonstrate positioning, envision kaca sareng tilu kolom tapi euweuh lulugu atawa footer. Anjeun tiasa make positioning mun nyieun tipe salah sahiji perenah anjeun resep.
Pikeun perenah tilu-kolom, nangtukeun tilu bagian: kolom kénca, kolom katuhu, sarta kandungan.
bagian ieu bakal instantiated ngagunakeun unsur PASAL keur eusi na dua elemen bagian pikeun dua kolom. Sagalana oge kudu hiji atribut identifying eta. Lamun anjeun nganggo atribut id, Anjeun kedah ascribe ngaran unik keur unggal id.
Positioning Kandungan dina
Ngagunakeun CSS, nangtukeun posisi pikeun elemen Anjeun ID'd. Nyimpen informasi posisi anjeun dina panggero gaya kawas kieu:
#content {
}
Eusi dina elemen ieu bakal butuh nepi salaku loba spasi sakumaha mémang, nyaéta 100 persén ti rubak ti lokasi ayeuna atawa kaca. Pikeun mangaruhan lokasi bagian hiji tanpa forcing ka rubak tetep, ngarobah padding atawa pasipatan margin.
Pikeun perenah ieu, nyetel dua kolom ka lebaran dibereskeun lajeng diatur posisi maranéhanana mutlak, ambéh maranéhanana henteu bakal jadi kapangaruhan ku tempat nu kapanggih dina HTML nu.
# Ditinggalkeun-kolom {
posisi: absolut;
kénca: 0;
lebar: 150px;
margin-kénca: 10px;
margin-luhur: 20px;
Warna: # 000000;
padding: 3px;
}
# Katuhu-kolom {
posisi: absolut;
kénca: 80%;
luhur: 20px;
lebar: 140px;
padding-kénca: 10px;
z-indéks: 3;
Warna: # 000000;
padding: 3px;
}
Lajeng keur aréa eusi, nyetel margins on katuhu sarta kénca supados eusi teu bakal tumpang tindih dua kolom luar.
#content {
luhur: 0px;
margin: 0px 25% 0 165px;
padding: 3px;
Warna: # 000000;
}
Watesan kaca anjeun ngagunakeun CSS tinimbang hiji méja HTML merlukeun bit skill leuwih teknis, tapi hasilna kieu ti desain leuwih fleksibel jeung responsif sarta betah gede dina nyieun pangaluyuan struktural ka kaca anjeun engké.