Tableless Layouts iepenje nije ûntwerptefanten
Der binne in soad redenen om tabellen foar layout te brûken . Ien fan 'e meast foarkommende redenen jouwe minsken har troch te brûken troch te brûken, omdat it dreech is om Layout mei CSS te dwaan. Hoewol CSS-skript lûkt in learkrêft, as jo begripe hoe't jo CSS-ôfdieling dwaan kinne, kinne jo ferrast wurde oer hoe maklik it kin wêze. En as jo leare, hawwe jo de twadde meast reden bepaald dat minsken net brûke foar CSS- "It is flugger om tabellen te skriuwen." It is flugger om't jo tabellen witte, mar as jo CSS learje, dan kinne jo krekt sa fluch wêze mei dat.
Blêder stipe fan CSS-lokaasje
CSS-positioning is goed stipe yn alle moderne browsers . As jo gjin side meitsje foar Netscape 4 of Internet Explorer 4, moatte jo lêzers gjin problemen hawwe dat jo CSS-posysjonele websiden sjen.
Ferwiderje hoe't jo in side opmeitsje
As jo in side mei tabellen bouwe, moatte jo tinke yn in tabelformaat . Mei oare wurden, tinke jo yn termen fan sellen en rigen en kolommen. Jo websiden sille dizze oanpak reflektearje. As jo nei in CSS-posysje-ûntwerp ferpleatse, sille jo begjinne mei te begjinnen fan 'e ynhâld, om't de ynhâld oeral wylst jo wolle yn' e layout-sels lizze op top fan oare ynhâld.
Ferskillende websides hawwe ferskate struktueren. Om in effektive side te bouwen, beoardielje de struktuer fan elke side foar foardat jo ynhâld ynhâld jaan. In foarbyldblêd soe fiif ferskillende dielen wêze kinne:
- Header . Thús nei de advertinsjes fan 'e banner, de sidenamme, navigaasje keppelings, in artikeltitel en ek in pear oare dingen.
- Rjochtskolom . Dit is de rjochterkant fan 'e side mei it sykfjild, advertinsjes, fideokombes en winkelgebieten.
- Ynhâld . De tekst fan in artikel, blogpost of winkelwagen - de fleis en potato's fan 'e side.
- Inline advertinsjes . De advertinsjes ynline yn 'e ynhâld.
- Fuotnoat . De ûnderste navigaasje, autoriteit, copyright ynformaasje, legere banner-advertinsjes en relatearre keppelings.
Selektearje dizze fiif eleminten yn in tafel, brûk de HTML5-sesje-eleminten om de ferskate dielen fan de ynhâld te beskieden, en brûke dan CSS-posysje om de ynhâld-eleminten op 'e side te pleatsen.
Identifisearje jo ynhâldteksjes
Nei't jo de ferskate ynhâldtriemmen fan jo side bepale hawwe, moatte jo se yn jo HTML skriuwe. Hoewol jo kinne, algemien, jo siden yn elke oarder sette, it is in goeie idee om de wichtichste dielen fan jo side earst te pleatsen. Dizze oanpak sil ek helpe mei sykmasino-optimisearring.
Om posysje te bewizen, befetsje in side mei trije kolommen, mar gjin koptekst of foet. Jo kinne posysje brûke om elke type layout te meitsjen dy't jo wolle.
Foar in trije-kolom-layout beskiede trije dielen: lofts kolom, rjochter kolom, en ynhâld.
Dizze seksjes wurde ynstakke mei it ARTIKEL-elemint foar de ynhâld en twa SECTION-eleminten foar de twa kolommen. Alles sil ek in attribus hawwe dat it identifisearret. As jo it id-attrib brûke, moatte jo in unike namme foar elke id opjaan.
It ynstellen fan de ynhâld
Brûk CSS, markearje de posysje foar jo ID'd-eleminten. Bewarje jo posysjeynformaasje yn in styl oprop as dit:
#content {
}
Ynhâld binnen dizze eleminten sil safolle romte nimme as it kin, nammentlik 100 persint fan 'e breedte fan' e aktive lokaasje of de side. Om de lokaasje fan in seksje te beynfloedzjen sûnder dat te ferstean nei in fêste breed, feroarje de padding of de marigeneigenskippen.
Foar dizze yndieling set de twa kolommen op fêste breedten en sette har posysje absolút, sadat se net beynfloede wurde troch wêr't se yn 'e HTML fûn wurde.
# links-kolom {
posysje: absolute;
links: 0;
width: 150px;
margin-left: 10px;
margin-top: 20px;
color: # 000000;
padding: 3px;
}
# right-column {
posysje: absolute;
links: 80%;
top: 20px;
width: 140px;
padding-left: 10px;
z-index: 3;
color: # 000000;
padding: 3px;
}
Dan foar it ynhâldgebiet set de rânen op 'e rjochter en lofts, sadat de ynhâld de twa bûtenkolumn net oerlappe.
#content {
top: 0px;
margje: 0px 25% 0 165px;
padding: 3px;
color: # 000000;
}
It definiëarjen fan jo side mei CSS ynstee fan in HTML-tafel freget in bytsje technysk feardigens, mar it betellet folget út mear fleksibele en opfrege ûntwerpen en makliker te meitsjen yn struktureel oanpassingen oan jo side letter.