Tableless Layoutën Open New Design Frontiers
Et gi vill Grënn déi Tabellen net fir Layout ze benotzen . Ee vun den heefegsten Ursaachen, déi d'Leit weiderhëllefen fir se ze benotzen ass, ass et schwéier ze layout ze maachen mat CSS. Och wann d'CSS Scripting léiert eng Léierkuritéit, wann Dir se verstitt, wéi Dir de CSS-Layout erleedegt, kënnt Dir iwwerrascht ginn wéi et einfach ass. A wéi Dir geléiert hutt, hutt Dir d'zweet géigensäiteg Ursaach uginn datt Leit do net mat CSS benotzen- "Et ass méi séier Tabellen ze schreiwen." Et ass séier méi, well Dir Dëscher kennt, awer wann Dir CSS léiert, kënnt Dir genee sou séier wéi méiglech sinn mat deem.
Browser ënnerstëtzt vun der CSS Positioning
CSS Positioning ass gutt an all modernen Browser ënnerstëtzt . Wann Dir en Site net fir Netscape 4 oder Internet Explorer 4 gebaut hutt, sollt Är Lieser keng Problemer hunn Är CSS-positionéiert Websiten ze gesinn.
Alles Ignoréieren Wéi Dir eng Säit baut
Wann Dir e Site mat Tabellen bauen, musst Dir an engem tabuläre Format sinn. An anere Wierder, du denken am Sënn vun Zellen a Reihen a Spalten. Är Websäiten wäerten dës Approche reflektéieren. Wann Dir op eng CSS Positioning-Konstruktioun réckelt, fänkt Dir un Är Säiten un d'Inhalter Gedanken ze iwwerzeegen, well de Inhalt kann iwwerall an der Layout plazéiert sinn - och iwwerall op anere Inhalt geliwwert ginn.
Verschidden Websiten hunn verschidden Strukturen. Fir eng effektive Säit ze bauen, wësst d'Struktur vun enger gejügter Säit unzefänken, ier Dir et Inhalter unzeginn. Eng Beispill Säit kéint fënnef ënnerschiddlech Rubriken:
- Header . Home op d'Bannerwerbung, de SiteName, Navigatiounslinn, en Artikeltitel a wéi och e puer aner Saachen.
- Richteg Kolonn . Dëst ass déi riets Säit vun der Säit mat der Sichbox, Annoncen, Video Boxen an Akafsberäicher.
- Inhalt . Den Text vun engem Artikel, Blog Post oder Akafskuerf, d'Fleesch an d'Kartoffel vun der Säit.
- Inline Annoncen . D'Annoncë vun der Inline am Inhalt.
- Fousszeilen . Déi drëtt Navigatioun, Auteurinformatioun, Urheberrechter Informatiounen, ënnen Bannerwerbung an verwandte Links.
Vill méi wéi dës fënnef Elementer an enger Tabelle ze setzen, benotzen d'HTML5-Sektiounselementer déi verschidde Portioune vum Inhalt festzeléeren an dann de CSS Positioning benotze fir d'Inhaltselementer op der Säit ze setzen.
Identifikatioun vun Ären Inhalt Sektiounen
Nodeems Dir déi verschidden Inhalebezëmmer vun ärem Site definéiert hutt musst se se an Äre HTML ze schreiwen. Wann Dir normalerweis Är Rubriken an all Optrag plazéiere kann, ass et eng gutt Idee fir déi wichtegst Deeler vun Ärer Säit z'erreechen. Dës Approche wäert och mat der Sich-Motoroptiméierung hëllefen.
Fir d'Positionéiere virzestellen, kuckt eng Säit mat dräi Kolonnen awer keng Header oder Fousszeilen. Dir kënnt d'Positionéiere benotze fir all Layout auszemaachen deen Dir wëllt.
Fir e Dreiersäppchen Layout definéieren dräi Sektiounen: lénks Kolonn, riets Kolonn an Inhalt.
Dës Rubriken ginn an d'Artikele Element fir den Inhalt an zwee SECTION Elementer fir déi zwee Säulen instantiéiert. Alles wäert och e Attribut dat identifizéieren. Wann Dir d'Id Attribut benotzt, musst Dir e spezielle Numm fir all Id.
D 'Plazéierung vum Inhalt
CSS benotzt Dir déi Positioun fir Är ID'd Elementer. Gitt Är Positiounen Informatiounen an engem Stilufank wéi:
#content {
}}
Inhalt an dësen Elementer hëlt sou vill Plaz wéi et kann, nämlech 100 Prozent vun der Breet vum aktuelle Stand oder der Säit. Fir d'Positioun vun engem Sekt ze beaflossen, ouni et an enger fixer Breedung ze zwéngen, de Fëllement ze änneren oder d'Margineleegenschaften.
Fir dëse Layout setzen déi zwee Säulen op fixe Breet a setzen se hir Positioun absolut, fir datt se net vun deem wat se am HTML fonnt gi sinn.
# lénks Säule {
Positioun: absolut
lénks: 0;
Breet: 150px;
Linke margin: 10px;
Randspëtzt: 20px;
Faarf: # 000000;
Polsterei: 3px;
}}
# Rechter-Kolonn {
Positioun: absolut
lénks: 80%;
Top: 20px;
Breet: 140px;
Padding-lénks: 10px;
z-Index: 3;
Faarf: # 000000;
Polsterei: 3px;
}}
Da fir den Inhaltsraum d'Margen op der rietser Säit fort a lénks sou datt déi Inhalter net déi zwou Aussoe Säulen iwwerlappt.
#content {
Uewen: 0px;
Rand: 0px 25% 0 165px;
Polsterei: 3px;
Faarf: # 000000;
}}
Definéiert Är Säit mat CSS anstelle vun enger HTML Tabelle ofgeschloss ass e bësse méi technesch Fäegkeeten, mee d'Léisung follegt méi flexibel a reagéiert Designen a méi grouss gëtt et strukturéiert Anpassungen op Är Säit spéider.