Kolonat me të njëjtën lartësi në CSS. Paraqitja e lëngshme me tre kolona

Dita e Dobrvy! Sot do të flasim për paraqitjen e faqeve me tre kolona. Rrjeti ka një udhëzues shumë interesant për dhe, i cili padyshim do të jetë i dobishëm për çdo webmaster që respekton veten. Ky burim është htmlbook.ru. Ka shumë informacione të dobishme atje. Në këtë postim, ne do të shikojmë paraqitjen me tre kolona që ofrohet në këtë burim.

Nuk ka asgjë të komplikuar në të. Nëse keni studiuar më parë, atëherë është më e lehtë ta kuptoni! Pra, le të fillojmë. Paraqitja me tre kolona përdoret shpesh kur dy kolona nuk mjaftojnë më ose ju duhet ta ndani materialin në një mënyrë të veçantë. Për shembull, një kolonë jepet për përmbajtjen, e dyta për lidhjet e navigimit dhe kolona e tretë përmban lajme të faqes ose informacione të tjera (Fig. 1).

Korniza e përgjithshme e telit përcaktohet me një shtresë të quajtur kontejner, e cila përcakton gjerësinë dhe shtrirjen e paraqitjes. Kolonat janë të vendosura brenda, dhe renditja e tyre në kod është si më poshtë: majtas (le ta quajmë atë nav), djathtas (mënjanë), qendrore (përmbajtja). Ndërtimi i shtresave tregohet në shembullin 1.

Shembull 1. Kolonat në kod

Pozicioni i shtresave formohet përmes stileve: për kolonën e majtë, gjerësia (gjerësia) dhe mbështjellja përgjatë skajit të majtë (noton: majtas), për kolonën e djathtë - gjerësia dhe mbështjellja përgjatë skajit të djathtë (noton: djathtas), për kolonën qendrore - futeni majtas dhe djathtas me gjerësinë e kolonave majtas dhe djathtas (shembulli 2).

Shembulli 2. Stili i krijimit të kolonave

#container ( gjerësia: 900 px; /* Gjerësia e paraqitjes */ margjina: 0 automatik; /* Shtrirja në qendër */ ) #nav ( gjerësia: 200 px; /* Gjerësia e kolonës së majtë */ float: majtas; ) #aside ( gjerësia: 300 px ; /* Gjerësia e kolonës së djathtë */ float: djathtas; ) #content ( margjina: 0 300px 0 200px; /* Margjina e kolonës majtas dhe djathtas */ )

Kodi i plotë i faqes, duke marrë parasysh këtë stil, është paraqitur në shembullin 3.

Shembulli 3: Paraqitja me tre kolona

Ky zbatim ka disa veçori:

• kolonat kanë lartësi të ndryshme, por duke aplikuar sfondin, krijohet iluzioni i së njëjtës lartësi për të tre kolonat;
• kolona e majtë dhe e djathtë kanë të njëjtën ngjyrë të sfondit, ajo vendoset nga vetia e sfondit për shtresën e kontejnerit;
• pamja e kolonave ruhet vetëm kur lartësia e kolonës qendrore është më e madhe se të tjerat. Nëse shkelet ky kusht, efekti i kolonave do të zhduket (Fig. 2), përndryshe faqosja do të shfaqet në mënyrë korrekte.

Oriz. 2. Kolona e djathtë është më e lartë se pjesa tjetër

Në këtë artikull, ne do të shqyrtojmë hap pas hapi rregullat për paraqitjen e një siti me dy kolona. Kodi që kemi dhënë do t'ju lejojë të shtoni një kokë dhe një fund që përfshin këto dy kolona.

Prezantimi

Për të përfunduar detyrat në këtë artikull, duhet të jeni në gjendje të kodoni si në HTML ashtu edhe në CSS. Nëse jo, atëherë është më mirë të përdorni një redaktues vizual.

Ju lutemi vini re se nuk keni nevojë të jeni fare ekspert në HTML ose CSS. Thjesht duhet të keni njohuri bazë për këto teknologji, përndryshe ky artikull do të jetë i pakuptueshëm për ju.

Përdorimi i vetive float për të krijuar dy kolona

Ka shumë mënyra për të përdorur CSS për të krijuar një faqe interneti me dy kolona. Në këtë tutorial, ne do të përdorim veçorinë float për të vendosur një kolonë në anën e tjetrës. Në shumë mënyra, kjo metodë është më e thjeshtë dhe më fleksibël se metoda e pozicionimit të elementit absolut. Gjithashtu ju lejon të shtoni opsionalisht një kokë dhe një fund që përfshin këto dy kolona.

Unë nuk e përdora këtë metodë vetë, sepse faqosja e burimit tim u krijua kur sapo po hidhja hapat e parë në zhvillimin e CSS dhe nuk dija asgjë për rregullat bazë të paraqitjes. Por mos u shqetësoni. Kam krijuar disa faqe demo duke përdorur këtë format, mund t'i shihni më vonë.

Kodi bazë HTML për një faqe interneti me dy kolona

Pjesa HTML e kodit është mjaft e thjeshtë. Na duhen vetëm dy blloqe div, një për secilën kolonë:

Fjalët "Menyja e navigimit" dhe "Përmbajtja" janë vetëm tregues për shiritin anësor të navigimit dhe përmbajtjen kryesore. Ju do t'i hiqni këto fjalë më vonë kur të vendosni përmbajtje reale në blloqe. Div "container" është një bllok që përmban dy kolona. Mund të përdoret nëse dëshironi të aplikoni stile të caktuara në të dy kolonat.

Kodi CSS për një sajt me dy kolona

Kodi CSS më poshtë përdor përqindjet ("%) për të përcaktuar gjerësinë e të dy kolonave. Meqenëse ato maten në njësi relative, ato do të zgjerohen ose tkurren për të mbushur të gjithë dritaren e shfletuesit, pavarësisht sa e gjerë është. Për shembull, nëse ndryshoni madhësinë e dritares së shfletuesit, shablloni do ta riorganizojë kolonën për t'iu përshtatur sa më afër kufijve të dritares.

Kodi CSS është shumë i thjeshtë:

#content ( float: djathtas; gjerësia: 80% ; ) #navbar (float: djathtas; gjerësia: 20%; )

Sipas rregullave të paraqitjes së faqes, kodi CSS duhet të vendoset në seksionin e stilit të një faqe interneti ose në një skedar të jashtëm.

Se si funksionon kodi i mësipërm në praktikë mund të shihet këtu.

Si funksionon: Kodi CSS i shpjeguar

Rregulli "float: djathtas" përcakton se si blloku DIV tërhiqet nga rrjedha e përgjithshme e dokumentit, dhe gjithashtu vendoset në të djathtë të të gjithë elementëve të tjerë që rrjedhin rreth tij nga e majta. Blloku i parë DIV që ndodh në një faqe HTML është futur së pari.

Në shembullin e mësipërm, "#content" zhvendoset së pari djathtas dhe vendoset në një gjerësi prej 80% të gjerësisë së dritares së shfletuesit. Rregulli ynë tjetër gjithashtu nxjerr "#navbar" nga rrjedha e dokumentit dhe e zhvendos atë në të djathtë.

Meqenëse tashmë kemi një element lundrues në këtë pozicion. Sipas rregullave të dhëna të paraqitjes responsive, blloku i dytë vendoset në të majtë të elementit ekzistues nëse ka hapësirë ​​të mjaftueshme për të. Përndryshe do të vendoset nën elementin e parë. Duke pasur parasysh këtë, shuma e anëve të të dy blloqeve duhet të jetë e barabartë me 100% ose më pak, përndryshe nuk do të kemi hapësirë ​​të mjaftueshme për t'i vendosur ato krah për krah.

Si të vendosni kolonën e lundrimit në të djathtë

Kodi i mësipërm vendos menunë e navigimit në kolonën e majtë. Nëse dëshironi që menyja e navigimit të jetë në të djathtë, ndryshoni kodin si më poshtë:

#content (float: majtas; gjerësia: 80% ;) #navbar (float: majtas; gjerësia: 20% ; )

Ju mund ta shihni këtë kod në veprim këtu duke klikuar në butonin e ndryshimit në kolonën e djathtë të menusë së navigimit.

Si të ndryshoni saktë gjerësinë

Sipas rregullave të përcaktuara të paraqitjes teknike, stilet e mësipërme vendosin gjerësinë e kolonës anësore në 20% të gjerësisë së dritares së shfletuesit, dhe në kolonën e përmbajtjes - 80%, e cila në total jep 100%.

Nëse planifikoni t'i ndryshoni këto vlera, sigurohuni që shuma totale e tyre të jetë e barabartë ose më e vogël se 100%, përndryshe shfletuesi do të vendosë njërën kolonë poshtë tjetrës.

Nëse njëra nga kolonat zhvendoset poshtë tjetrës: si ta rregulloni atë

Nëse gjeni se njëra nga kolonat përshtatet nën tjetrën në vend që të jetë krah për krah, kjo do të thotë se gjerësia e kombinuar e të dy kolonave është më shumë se 100% e gjerësisë së dritares së shfletuesit.

Kjo mund të ndodhë edhe nëse përdorni vlerat e mia "20%" dhe "80%". Për shembull, nëse shtoni margjina, kufij dhe mbushje për një ose të dyja kolonat. Gjerësia e këtyre kolonave do të rritet gjithashtu, duke bërë që totali të kalojë 100%.

Rregullat e përputhshmërisë dhe paraqitjes së ndër-shfletuesve nënkuptojnë dy mënyra për të zgjidhur këtë problem:

• Zvogëloni gjerësinë e kolonave derisa shfletuesi t'i shfaqë ato ashtu siç dëshironi. Por mbani mend se përqindjet janë një njësi matëse relative. Ajo është e lidhur me gjerësinë e dritares së shfletuesit të përdoruesit. Pra, nëse keni testuar paraqitjen në sistemin tuaj dhe keni gjetur se shtimi i 10 px në një nga kolonat tuaja në padding-left dhe ulja e gjerësisë me 1% funksionon mirë, nuk mund të arrini në përfundimin se 1% = 10px. Me fjalë të tjera, 1% e 1024 pikselëve është e ndryshme nga 1% e 1920 pikselëve, e kështu me radhë. Sigurohuni që të keni parasysh dallimet në gjerësinë e dritareve në shfletues të tjerë dhe madhësive të ekranit;
• Zgjidhja që preferoj është të krijoj një DIV të mbivendosur brenda blloqeve "#navbar" dhe "#content" dhe të vendos të gjithë mbushjen, kufijtë, kufijtë dhe përmbajtjen aktuale në të. Kështu, për blloqet e jashtme, mund të lini 20% dhe 80% të vjetër pa u shqetësuar për rregullimet për kufijtë, dhëmbëzat, etj.

Për shembull, në faqe demo me dy kolona duke përdorur kodin e mëposhtëm HTML për të krijuar një bllok të mbivendosur DIV:

Shtoni vetitë e mëposhtme për "#innercontent" dhe "#innernavbar" në stilet CSS që keni shkruar më parë:

#innercontent (mbushje-majtas: 10px; mbushje-djathtas: 10px;) #innernavbar (mbushje-majtas: 5px; mbushje-djathtas: 5px; )

CSS për "#content" dhe "#navbar" mbetet e njëjtë siç përshkruhet në gjysmën e parë të këtij artikulli.

Për shkak se mbushja aplikohet në DIV të brendshëm, dimensionet e kutive të jashtme mbeten të njëjta dhe kemi një plan urbanistik me dy kolona.

Si të shtoni një kokë dhe një fund të faqes që përfshin të dy kolonat

Disa sajte përfshijnë një kokë që përfshin të dyja kolonat në gjerësi. Sipas rregullave ekzistuese të paraqitjes së faqes, ju mund të vendosni një logo, titull të faqes apo edhe parulla reklamuese në të. Disa burime përfshijnë gjithashtu një fund që përfshin të dy kolonat. Përveç kësaj, futeri mund të përdoret për artikuj të tillë si njoftimet për të drejtat e autorit.

Në artikullin e sotëm, dua të flas për një mënyrë të re për të krijuar kolona me lartësi të barabartë duke përdorur CSS. Nuk ka më nevojë të përdorni Javascript për t'i bërë lartësitë e kolonave të njëjta për të gjithë. Thelbi i kësaj metode është përdorimi i vetive të re CSS3, e cila na jep shumë më tepër opsione sesa thjesht krijimi i kolonave me të njëjtën lartësi. Por në këtë mësim do të shohim se sa e lehtë është të zgjidhet ky problem i lënduar.

Pamja e faqes

pjesë HTML

Le të përcaktojmë dy kolona, ​​të cilat më vonë do t'i bëjmë të njëjtën lartësi duke përdorur CSS:

Kjo do të thotë, ne duhet të sigurohemi që blloku