Tableless Layouts Miftuħ New Design Frontiers
Hemm bosta raġunijiet biex ma jintużawx tabelli għat-tqassim . Waħda mir-raġunijiet l-iktar frekwenti li n-nies jagħtu biex tkompli tużahom hija għaliex huwa diffiċli li tagħmel it-tqassim mas-CSS. Għalkemm is-scripting tas-CSS jinvolvi kurva tat-tagħlim, meta tifhem kif tista 'tagħmel tqassim tas-CSS, jista' jkun sorpriż kemm ikun faċli. U ladarba titgħallem, ikollok indirizzat it-tieni raġuni l-iktar komuni li n-nies jagħtu biex ma jużawx CSS- "Huwa aktar mgħaġġel biex tikteb tabelli." Huwa aktar mgħaġġel għaliex taf tabelli, imma meta titgħallem CSS, tista 'tkun daqstant malajr ma 'dak.
Appoġġ għall-Browser tal-Pożizzjonament tas-CSS
Il-pożizzjonament tas-CSS huwa appoġġjat sew fil -browsers moderni kollha . Sakemm ma tkunx qed tibni sit għal Netscape 4 jew Internet Explorer 4, il-qarrejja tiegħek m'għandux ikollhom xi problemi biex jaraw il-paġni tal-Web tiegħek pożizzjonati bis-CSS.
Nirriflettu mill-ġdid kif inti tibni paġna
Meta tibni sit bl-użu ta 'tabelli, għandek taħseb f'format tabulari . Fi kliem ieħor, qed taħseb f'termini ta 'ċelloli u ringieli u kolonni. Il-paġni tal-Web tiegħek jirriflettu dan l-approċċ. Meta tiċċaqlaq għal disinn ta 'pożizzjonament CSS, tibda l-ħsieb tal-paġni tiegħek f'termini tal-kontenut, minħabba li l-kontenut jista' jitqiegħed kullimkien li tixtieq fit-tqassim saffi fuq il-quċċata ta 'kontenut ieħor.
Il-websajts differenti għandhom strutturi differenti. Biex tibni paġna effettiva, tevalwa l-istruttura ta 'kwalunkwe paġna partikolari qabel ma tassenja kontenut għaliha. Paġna ta 'eżempju tista' tinkludi ħames taqsimiet distinti:
- Header . Dħul għar-reklam banner, l-isem tas-sit, links tan-navigazzjoni, titlu ta 'l-artiklu u kif ukoll ftit affarijiet oħra.
- Kolonna tal-lemin . Dan huwa l-lemin tal-paġna bil-kaxxa tat-tfittxija, reklami, kaxxi tal-vidjo u żoni tax-xiri.
- Kontenut . It-test ta 'oġġett, blog post jew shopping cart-laħam u patata tal-paġna.
- Reklami inline . Ir-reklami inline fil-kontenut.
- Footer . In-navigazzjoni tal-qiegħ, l-informazzjoni tal-awtur, l-informazzjoni dwar id-drittijiet tal-awtur, reklami aktar baxxi tal-banner,
Minflok ma tqiegħed dawk il-ħames elementi f'tabella, uża l-elementi ta 'taqsima HTML5 biex tiddefinixxi l-porzjonijiet differenti tal-kontenut, u mbagħad tuża l-pożizzjonament tas-CSS biex tqiegħed l-elementi tal-kontenut fuq il-paġna.
Identifikazzjoni tas-Sezzjonijiet tal-Kontenut Tiegħek
Wara li tkun iddeterminat l-oqsma tal-kontenut differenti tas-sit tiegħek, għandek tiktebhom fis-HTML tiegħek. Filwaqt li tista ', ġeneralment, tqiegħed is-sezzjonijiet tiegħek fi kwalunkwe ordni, hija idea tajba li tpoġġi l-aktar partijiet importanti tal-paġna tiegħek l-ewwel. Dan l-approċċ se jgħin ukoll bl-ottimizzazzjoni tat-search engine, ukoll.
Biex turi l-pożizzjonament, ippjana paġna bi tliet kolonni imma l-ebda header jew footer. Tista 'tuża l-pożizzjonament biex toħloq kwalunkwe tip ta' tqassim li tixtieq.
Għal tqassim bi tliet kolonni, iddefinixxi tliet taqsimiet: kolonna tax-xellug, kolonna tal-lemin, u kontenut.
Dawn it-taqsimiet se jkunu istenzati bl-użu tal-element ARTIKOLU għall-kontenut u żewġ elementi tas-SEZZJONI għaż-żewġ kolonni. Kollox ikollu wkoll attribut li jidentifikaha. Meta tuża l-attribut id, trid attribwixxi isem uniku għal kull id.
Pożizzjonar tal-Kontenut
Bl-użu tas-CSS, iddefinixxi l-pożizzjoni għall-elementi ID'd tiegħek. Aħżen l-informazzjoni dwar il-pożizzjoni tiegħek f'sejħa stil bħal din:
#kontenut {
}
Il-kontenut f'dawn l-elementi se jieħu kemm jista 'jkun spazju, jiġifieri 100 fil-mija tal-wisa' tal-post attwali jew il-paġna. Biex taffettwa l-lok ta 'taqsima mingħajr ma sfurzaha f'wisa' fiss, ibdel il-padding jew il-proprjetajiet tal-marġni.
Għal dan it-tqassim, issettja ż-żewġ kolonni għal wisa 'fissi u mbagħad issettja l-pożizzjoni assoluta tagħhom, sabiex ma jkunux affettwati minn fejn jinsabu fl-HTML.
# xellug-kolonna {
pożizzjoni: assoluta;
xellug: 0;
wisa ': 150px;
marġni xellug: 10px;
margin-top: 20px;
kulur: # 000000;
ikkuttunar: 3px;
}
# kolonna tal-lemin {
pożizzjoni: assoluta;
xellug: 80%;
top: 20px;
wisa ': 140px;
ikkuttunar-xellug: 10px;
z-index: 3;
kulur: # 000000;
ikkuttunar: 3px;
}
Imbagħad għall-erja tal-kontenut, issettja l-marġini fuq il-lemin u lejn ix-xellug sabiex il-kontenut ma jikkoinċidix iż-żewġ kolonni ta 'barra.
#kontenut {
top: 0px;
marġini: 0px 25% 0 165px;
ikkuttunar: 3px;
kulur: # 000000;
}
Id-definizzjoni tal-paġna tiegħek permezz tas-CSS minflok it-tabella HTML teħtieġ daqsxejn iktar ħiliet tekniċi, iżda l-ħlas ġej minn disinji aktar flessibbli u responsivi u faċilità akbar biex isiru aġġustamenti strutturali fil-paġna tiegħek aktar tard.