Lapleless Layouts Nyissa meg az új design határokat
Számos ok van arra, hogy ne használjon táblákat az elrendezéshez . Az egyik leggyakoribb ok, amit az emberek azért adnak, hogy továbbra is használják őket, mert nehéz elrendezni a CSS-t. Bár a CSS-szkriptek tanulási görbével járnak, ha megértitek a CSS-elrendezést, akkor meglepődhet, hogy milyen könnyű lehet. És ha egyszer megtanulja, akkor a második leggyakoribb ok, amiért az emberek nem adják meg a CSS-et. "Gyorsabb táblázatokat írni." Gyorsabb, mert ismeri a táblázatokat, de ha egyszer megtudod a CSS-et, azzal.
CSS pozicionálás böngésző támogatása
A CSS pozícionálás jól támogatott minden modern böngészőben . Hacsak nem építesz egy webhelyet a Netscape 4 vagy az Internet Explorer 4 programhoz, olvasóidnak nem szabad semmilyen nehézséget okozni a CSS által elhelyezett weboldalak megtekintéséhez.
Felidézni, hogyan építesz egy oldalt
Ha táblázatok segítségével építesz egy webhelyet, akkor táblázatos formában kell gondolkodnod. Más szóval, sejtek, sorok és oszlopok tekintetében gondolkodik. Weboldalai tükrözik ezt a megközelítést. Amikor áttérsz a CSS pozícionálási tervre, elkezdesz gondolkodni az oldalakról a tartalom szempontjából, mert a tartalom tetszőleges helyen helyezhető el az elrendezésben - akár más tartalmak tetején is rétegezve.
A különböző webhelyek különböző struktúrákkal rendelkeznek. Hatékony oldal megalkotásához értékelje az adott oldal struktúráját, mielőtt hozzárendelne hozzá tartalmat. Egy példaoldal öt különböző szakaszból állhat:
- Fejléc . A banner hirdetés, a webhely neve, navigációs linkek, cikkcím, valamint néhány egyéb dolog.
- Jobb oszlop . Ez az oldal jobb oldala a keresőmezővel, hirdetésekkel, videokazánokkal és bevásárló területekkel.
- Tartalom . Egy cikk szövege, blogbejegyzés vagy bevásárlókosár - az oldal húsa és burgonyája.
- Inline hirdetések . A hirdetések a tartalom belsejében vannak.
- Lábléc . A navigáció alsó része, a szerzői adatok, a szerzői jogi információk, az alsó banner hirdetések és a kapcsolódó linkek.
Ahelyett, hogy ezeket az öt elemet egy táblázatban elhelyezné, használja a HTML5 szakaszelemeket a tartalom különböző részeinek meghatározásához, majd a CSS pozícionálással helyezze el a tartalomelemeket az oldalon.
Tartalmi részek azonosítása
Miután megadta a webhely különböző tartalmi területeit, be kell írnia a HTML-kódba. Bár általában tetszőleges sorrendben helyezheti el szakaszainkat, először helyezze el az oldal legfontosabb részeit. Ez a megközelítés segít a keresőmotor optimalizálásában is.
A pozícionálás bemutatásához három oszlopos, de fejlécet vagy láblézt tartalmazó oldalt fogalmaz meg. A pozícionálás segítségével tetszőleges elrendezést hozhat létre.
Háromoszlopos elrendezés esetén határozzon meg három szakaszt: a bal oldali oszlop, a jobb oldali oszlop és a tartalom.
Ezeket a részeket a cikk ARTICLE elemével és a két oszlophoz tartozó SECTION elemekkel lehet instantiálni. Mindennek van egy attribútuma, amely azonosítja azt. Az id attribútum használatakor minden egyes azonosítóhoz egyedi nevet kell megadnia.
A tartalom elhelyezése
A CSS használatával határozza meg az azonosított elemek pozícióját. Tárolja pozícióinformációit egy ilyen stílusú hívásban:
#tartalom {
}
Az ezen elemeken belüli tartalom annyi helyet foglal el, mint amennyire lehetséges, nevezetesen a jelenlegi hely szélességének vagy az oldal szélességének 100 százaléka. Ha egy szakasz helyét a rögzített szélességűre kényszeríti, módosítsa a párnázást vagy a margó tulajdonságait.
Ehhez az elrendezéshez állítsa be a két oszlopot fix szélességűre, majd állítsa be a pozícióját abszolút értékre, hogy ne befolyásolhassák őket a HTML-ben található helyek.
# bal oldali oszlop {
pozíció: abszolút;
balra: 0;
szélesség: 150px;
margó-balra: 10px;
margin-top: 20px;
szín: # 000000;
párnázottság: 3px;
}
# jobb oszlop {
pozíció: abszolút;
balra: 80%;
top: 20px;
szélesség: 140px;
padding-left: 10px;
z-index: 3;
szín: # 000000;
párnázottság: 3px;
}
Ezután a tartalomterületen állítsa be a margókat jobbra és balra úgy, hogy a tartalom ne fedje át a két külső oszlopot.
#tartalom {
top: 0px;
margin: 0px 25% 0 165px;
párnázottság: 3px;
szín: # 000000;
}
Az oldal HTML-kód helyett a CSS használatával egy kicsit több technikai készségre van szükség, de a kifizetés a rugalmasabb és rugalmasabb tervekből származik, és a könnyebb könnyebb későbbi strukturális alkalmazkodás az oldalra.