Tableless Layouts Malfermi Novajn Dezajn Limojn
Estas multaj kialoj por ne uzi tabulojn por aranĝo . Unu el la plej oftaj kialoj, kiujn homoj donas por daŭre uzi ilin, estas ĉar malfacile fari aranĝon kun CSS. Kvankam CSS-skripto enhavas lernan kurbon, kiam vi komprenas kiel fari CSS-aranĝon, vi eble surprizos, kiom facila ĝi povas esti. Kaj kiam vi lernas, vi parolos al la dua plej ofta kialo, kiun homoj donas por ne uzi CSS- "Estas pli rapide skribi tabulojn." Ĝi estas pli rapida ĉar vi konas tabulojn, sed kiam vi lernas CSS, vi eble estu tiel rapide kun tio.
Foliumilo Subtenado de CSS-pozicio
CSS-pozicio estas bone subtenata en ĉiuj modernaj foliumiloj . Krom se vi konstruas retejon por Netscape 4 aŭ Interreto Explorer 4, viaj legantoj ne havu problemon vidi viajn CSS-poseditajn Retpaĝojn.
Ripetante Kiel Vi Konstruas Paĝon
Kiam vi konstruas retejon uzante tabulojn, vi devas pensi en tabula formato. Alivorte, vi pensas pri ĉeloj kaj vicoj kaj kolumnoj. Viaj retpaĝoj reflektos ĉi tiun aliron. Kiam vi moviĝos al CSS-pozicia dezajno, vi komencos pensi pri viaj paĝoj laŭ la enhavo, ĉar la enhavo povas esti lokita ie ajn, kiun vi deziras en la aranĝo-eĉ manteloj sur aliaj enhavoj.
Malsamaj retejoj havas malsamajn strukturojn. Por konstrui efikan paĝon, taksi la strukturon de iu ajn donita paĝo antaŭ ol vi atribuu enhavon al ĝi. Ekzemplo de paĝo povus inkludi kvin apartajn sekciojn:
- Kapo . Hejme al la banner-anonco, la retejo-nomo, ligiloj de navigado, titolo de artikolo kaj ankaŭ kelkaj aliaj aferoj.
- Dekstra kolumno Ĉi tiu estas la dekstra flanko de la paĝo kun la serĉo-skatolo, anoncoj, filmetoj kaj komercaj areoj.
- Enhavo . La teksto de artikolo, poŝto aŭ aĉeto-karno-kaj-terpomoj de la paĝo.
- Inline-anoncoj . La reklamoj enlinas ene de la enhavo.
- Piedo . La malsupra navigado, aŭtoro-informoj, kopirajta informo, pli malaltaj banner-anoncoj kaj rilataj ligoj.
Prefere ol meti tiujn kvin elementojn en tablo, uzu la elementojn de sekcio de HTML5 por difini la malsamajn porciojn de la enhavo kaj poste uzi CSS-pozicion por meti la enhavajn elementojn de la paĝo.
Identiganta viajn enhavajn sekciojn
Post kiam vi difinis la malsamajn enhavajn areojn de via retejo, vi devas skribi ilin en vian HTML. Dum vi povas ĝenerale loki viajn sekciojn en iu ajn ordo, ĝi estas bona ideo meti la plej gravajn partojn de via paĝo unue. Ĉi tiu aliro helpos kun serĉ-optimumigo, ankaŭ.
Por pruvi pozicion, rigardu paĝon kun tri kolumnoj, sed ne kaplinio aŭ piedlinio. Vi povas uzi pozicion por krei ajnan tipon de aranĝo, kiun vi ŝatas.
Por tri-kolumna aranĝo, difini tri sekciojn: maldekstra kolumno, dekstra kolumno kaj enhavo.
Ĉi tiuj sekcioj estos eksploditaj per la elemento de ARTIKO por la enhavo kaj du SECTION-elementoj por la du kolumnoj. Ĉio ankaŭ havas atributon identigante ĝin. Kiam vi uzas la identan atributon, vi devas atribui unikan nomon por ĉiu id.
Pozicio de la Enhavo
Uzante CSS, difini la pozicion por via ID'd-elementoj. Konservu vian pozicion-informon per vokla stilo kiel ĉi:
#kontenta {
}
Enhavo ene de ĉi tiuj elementoj prenos tiom multe da spaco kiel ĝi povas, nome 100 procentojn de la larĝa de la nuna loko aŭ la paĝo. Afekcii la lokon de sekcio sen devigi ĝin al fiksa larĝo, ŝanĝi la kompletigon aŭ la rando-proprietojn.
Por ĉi tiu aranĝo, starigu la du kolumnojn al fiksa larĝeco kaj poste starigu ilian pozicion absoluta, tiel ke ili ne estus tuŝitaj de kie ili troviĝas en la HTML.
# maldekstra kolumno {
pozicio: absoluta;
maldekstra: 0;
larĝa: 150px;
rando-maldekstra: 10px;
rando-supro: 20px;
koloro: # 000000;
kompletigo: 3px;
}
# dekstra kolumno {
pozicio: absoluta;
maldekstra: 80%;
supro: 20px;
larĝa: 140px;
kompletigado-maldekstra: 10px;
z-indekso: 3;
koloro: # 000000;
kompletigo: 3px;
}
Tiam por la enhavo areo, starigu la randojn dekstre kaj maldekstre tiel ke la enhavo ne superposcus la du ekster kolumnojn.
#kontenta {
supro: 0px;
rando: 0px 25% 0 165px;
kompletigo: 3px;
koloro: # 000000;
}
Difini vian paĝon per CSS anstataŭ HTML-tablo postulas iom pli teknikan kapablecon, sed la rekompenco sekvas de pli flekseblaj kaj respondemaj dezajnoj kaj pli granda facileco por fari strukturajn ĝustigas al via paĝo poste.