... Dhe tashmë kjo etiketë ka një atribut " rreshtoj", vlera e së cilës përcakton pozicionin e këtij kontejneri. Janë tre vlera:" majtas", "qendër", "drejtë". Si parazgjedhje, ia vlen" majtas“Megjithatë, mendoj se nuk jeni të befasuar.

Le të shkruajmë të njëjtën gjë tani Kodi HTML por me përdorimin e kontejnerëve, përveç kësaj, le të mos përafrim në qendër, por djathtas.

Siç mund ta shihni, gjithçka funksionon. Unë ju këshilloj të ndryshoni edhe vlerat e atributeve " rreshtoj"Për të parë llojet e tjera të shtrirjes së kontejnerëve.

Një mënyrë tjetër për të lidhur elementët HTML- këto janë tabela, por kjo temë meriton një diskutim më vete, kështu që ne do të flasim për të në një nga artikujt e mëposhtëm.

Deri atëherë, faqja juaj duhet të duket si kjo:

Titulli i nivelit 1, në qendër

Përshëndetje, Mikhail Rusakov.

P.S. Nëse dëshironi të dini më shumë rreth HTML, pastaj shikoni kursin tim falas me një shembull të krijimit të një faqe interneti në HTML:

Dritaret: Internet Explorer 3.0+, Firefox 1.0+, Google Chrome, Opera 3.51 - 6.xx dhe 9.0+, Safari 3.1+, SeaMonkey 1.0+ [1].

Linux: Firefox 1.0+, Chromium, Opera 5.0 - 6.xx dhe 9.0+, SeaMonkey 1.0+ [2].

Përafrimi i përmbajtjes së faqes në qendër në zonën e dukshme të dritares së shfletuesit duke përdorur HTML - pa CSS. Kontejneri, i cili do të përmbajë përmbajtjen e faqes së internetit, është i përqendruar - në gjerësi dhe lartësi: [Hap faqen e shembullit].

Dhe gjithashtu në Netscape 2.02 - 4.80 dhe Offbyone. Në Netscape 2.02 - 4.80 ka një zhvendosje të përmbajtjes së faqes në këndin e sipërm të majtë të zonës së dukshme të dritares së shfletuesit për shkak të faktit se këto programe rezervojnë hapësirë ​​për shiritat e lëvizjes.

Dhe gjithashtu në Netscape 2.02 - 4.80. Në Netscape 2.02 - 4.80 ka një zhvendosje të përmbajtjes së faqes në këndin e sipërm të majtë të zonës së dukshme të dritares së shfletuesit për shkak të faktit se këto programe rezervojnë hapësirë ​​për shiritat e lëvizjes.

Subditos dhe tema të tjera

Ka disa programe për marrjen e pamjeve të ekranit në DOS. Për shembull SNARF. Duke përdorur këtë aplikacion, ne arritëm të bënim pamje nga ekrani në numrin më të madh të rasteve. Gjithashtu, cilësia e pamjeve të ekranit (skedarët BMP) të marra nga SNARF rezulton të jetë më e mira ndër programet e testuara: ScreenThief, VideoThief, FLIP, GRABBER, SNARF. Përdorimi i SNARF me cilësimet e paracaktuar është i thjeshtë, por ka një pengesë - SNARF e ruan gjithmonë pamjen e ekranit në dosjen ku ndodhet aktualisht përdoruesi. E cila mund të jetë e papërshtatshme ose e papranueshme. Dhe nuk ka asnjë mënyrë të qartë për ta ndryshuar atë. Megjithatë, ekziston një zgjidhje. Ideja origjinale gjendet në këtë lidhje. Bazuar në këtë, u mor si më poshtë: 1. SNARF [Shkarko] 2. Duke përdorur një redaktues teksti, hapni skedarin SNARF.EXE në modalitetin e tekstit, gjeni snarf000.bmp dhe ndryshoni në s: scn000.bin 3. Krijo një skedar grupi , për shembull S.BAT, në të cilin, përveç linjës së nisjes SNARF.EXE, do të ketë një komandë për të krijuar një pseudodisk S: për shtegun drejt dosjes në të cilën do të ruhen pamjet e ekranit kur SNARF po funksionon. Dosja dhe rruga drejt saj mund të jenë çdo: C: \ SOFT \ SNARF.EXE SUBST S: C: \ SCREENS \ 4. Ekzekutoni SNARF: S [ose S.BAT] 5. Për të marrë një pamje nga ekrani: Alt + S Do të jetë dy sinjale zanore. E para në fillim dhe e dyta si shenjë e përfundimit me sukses të procesit. Pasi të merren pamjet e ekranit, duhet të shkoni te dosja ku ruhen dhe të zëvendësoni shtesën e skedarit nga BIN në BMP SNARF - Freeware.

Rreshtimi vertikal CSS i një elementi blloku që përmban tekst dhe imazhe. Punon për kombinime të ndryshme të elementeve bllok dhe inline. Shembull: Rreshtimi vertikal CSS Shtrirja vertikale CSS HTML / XHTML. Kodi:

CSS. Kodi: .prind (pozicioni: i afërm; majtas: 0px; lart: 0px; lartësia: 200px; shfaqja: tabela;) : mes;) .childcontent (pozicioni: relative; majtas: 0px; lart: 0px;) Shënim: .parent dhe .childcontent mund të lihen të rreshtuara ("float: majtas;") ose jo të përafruar, por në mënyrë që kjo mënyrë të jetë vertikale Shtrirja CSS funksionoi, .fëmija duhet të jetë pa "float: majtas;". [1] Dhe gjithashtu në Netscape 6.01+, Mozilla 0.6+. [2] Dhe gjithashtu në Netscape 6.01+, Mozilla 0.6+.

Kur shtroni një faqe, shpesh është e nevojshme të kryhet shtrirja në qendër në një mënyrë CSS: për shembull, përqendroni bllokun kryesor. Ekzistojnë disa opsione për zgjidhjen e këtij problemi, secila prej të cilave herët a vonë duhet të përdoret nga çdo projektues i paraqitjes.

Përafrimi i tekstit në qendër

Shpesh, për qëllime dekorative, duhet të vendosni shtrirjen e tekstit në qendër, CSS në këtë rast ju lejon të zvogëloni kohën e shtypjes. Më parë, kjo bëhej duke përdorur atributet HTML, por tani standardi kërkon shtrirjen e tekstit duke përdorur fletë stilesh. Ndryshe nga kutitë, për të cilat ju duhet të ndryshoni kufijtë, në CSS, shtrirja në qendër e tekstit bëhet me një rresht të vetëm:

• text-align: qendër;

Kjo pronë trashëgohet dhe kalohet nga prindi te të gjithë pasardhësit. Ndikon jo vetëm tekstin, por edhe elementë të tjerë. Për ta bërë këtë, ato duhet të jenë inline (për shembull, span) ose blloqe inline (çdo blloqe që ka grupin e vetive të ekranit: bllok). Opsioni i fundit ju lejon gjithashtu të ndryshoni gjerësinë dhe lartësinë e elementit, të rregulloni në mënyrë më fleksibël dhëmbëzat.

Shpesh në faqet përafrimi i atribuohet vetë etiketës. Kjo menjëherë e bën kodin të pavlefshëm, pasi atributi align është zhvlerësuar nga W3C. Nuk rekomandohet përdorimi i tij në faqe.

Përafrimi i një blloku në qendër

Nëse ju duhet të vendosni div të jetë në qendër, CSS mund të ofrojë një mënyrë mjaft të përshtatshme për ta bërë atë: përdorni margjinat. Indencat mund të vendosen si për elementët e bllokut ashtu edhe për elementët e blloqeve të brendshme. Vlera e pronës duhet të marrë vlerat 0 (hyrje vertikale) dhe automatike (hyrje automatike horizontale):

• marzhi: 0 auto;

Tani ky opsion i veçantë njihet si absolutisht i vlefshëm. Përdorimi i hyrjeve të jashtme gjithashtu ju lejon të vendosni shtrirjen qendrore të imazhit: ju lejon të zgjidhni shumë probleme që lidhen me pozicionimin e një elementi në faqe.

Rreshtoni një bllok majtas ose djathtas

Ndonjëherë shtrirja në qendër të CSS nuk kërkohet, por ju duhet të vendosni dy blloqe krah për krah: një në të majtë, tjetri në të djathtë. Për ta bërë këtë, ekziston vetia float, e cila mund të marrë një nga tre vlerat: majtas, djathtas ose asnjë. Le të themi se keni dy blloqe që duhet të vendosen krah për krah. Atëherë kodi do të jetë si ky:

• .majtas (lundrues: majtas;)
• .djathtas (lundrues: djathtas)

Nëse ka edhe një bllok të tretë që duhet të vendoset nën dy blloqet e para (për shembull, një fund), atëherë duhet të regjistrojë pronën e qartë:

• .majtas (lundrues: majtas;)
• .djathtas (lundrues: djathtas)
• fundi (i qartë: të dyja)

Fakti është se blloqet me klasa majtas dhe djathtas bien jashtë rrjedhës së përgjithshme, domethënë, të gjithë elementët e tjerë injorojnë vetë ekzistencën e elementeve të rreshtuar. E qarta: të dy vetitë lejojnë që fundi ose çdo bllok tjetër të shohë elementë jashtë rrjedhës dhe nuk lejon notimin majtas dhe djathtas. Prandaj, në shembullin tonë, futeri do të lëvizë poshtë.

Rreshtimi vertikal

Ka raste kur nuk mjafton të vendosni shtrirjen qendrore duke përdorur metodat CSS, gjithashtu duhet të ndryshoni pozicionin vertikal të bllokut të fëmijëve. Çdo element inline ose inline-block mund të ngjitet në skajin e sipërm ose të poshtëm, në mes të elementit prind ose kudo. Më shpesh, kërkohet shtrirja e bllokut në qendër; për këtë përdoret atributi vertikal-align. Le të themi se ka dy blloqe, njëri i vendosur brenda tjetrit. Në këtë rast, blloku i brendshëm është një element inline-block (ekrani: inline-block). Ju duhet të rreshtoni bllokun e fëmijëve vertikalisht:

• shtrirje nga lart - .fëmijë (vertical-align: sipër);
• shtrirje në qendër - .fëmijë (vertikal-linjë: në mes);
• shtrirje nga fundi - .fëmijë (vertical-align: fund);

As rreshtimi i tekstit dhe as ai vertikal nuk ndikon në elementët e bllokut.

Probleme të mundshme me blloqe të rreshtuara

Ndonjëherë rreshtimi i një div në qendër në një mënyrë CSS mund të shkaktojë pak probleme. Për shembull, kur përdorni float: le të themi se ka tre blloqe: .first, .second dhe .third. Blloku i dytë dhe i tretë janë në të parën. Elementi me klasën e dytë është i rreshtuar majtas dhe blloku i fundit është i rreshtuar djathtas. Pas shtrirjes, të dy ranë nga përroi. Nëse elementi prind nuk ka një lartësi të caktuar (për shembull, 30em), atëherë ai do të ndalojë shtrirjen përgjatë lartësisë së blloqeve të fëmijëve. Për të shmangur këtë gabim, përdorni një "spacer" - një bllok i veçantë që sheh .second dhe .treth. Kodi CSS:

• .e dyta (lundrues: majtas)
• .e treta (lundrues: djathtas)
• .clearfix (lartësia: 0; qartë: të dyja;)

Përdoret shpesh pseudo-klasa: after, e cila gjithashtu ju lejon të vendosni blloqet përsëri në vend duke krijuar një pseudo-layout (në shembull, një div me një klasë kontejneri shtrihet brenda .first dhe përmban .majtas dhe .djathtas):

• .majtas (lundrues: majtas)
• .djathtas (lundrues: djathtas)
• .container: pas (përmbajtja: ""; shfaqja: tabela; pastruar: të dyja;)

Opsionet e mësipërme janë më të zakonshmet, megjithëse ka disa variacione. Gjithmonë mund të gjeni mënyrën më të lehtë dhe më të përshtatshme për të krijuar një pseudo-faqosje përmes eksperimentimit.

Një problem tjetër me të cilin shpesh përballen dizajnerët e paraqitjes është shtrirja e elementeve të blloqeve në linjë. Një hapësirë ​​shtohet automatikisht pas secilit prej tyre. Vetia e marzhit ndihmon për të përballuar këtë, e cila është vendosur në një diferencë negative. Ka metoda të tjera që përdoren shumë më rrallë: për shembull, zeroizimi Në këtë rast, madhësia e shkronjave: 0 shkruhet në vetitë e elementit prind. Nëse ka tekst brenda blloqeve, atëherë madhësia e kërkuar e fontit është kthyer tashmë në vetitë e elementeve të blloqeve inline. Për shembull, madhësia e shkronjave: 1em. Metoda nuk është gjithmonë e përshtatshme, prandaj, opsioni me hyrje të jashtme përdoret shumë më shpesh.

Përafrimi i blloqeve ju lejon të krijoni faqe të bukura dhe funksionale: kjo është faqosja e paraqitjes së përgjithshme, dhe vendndodhja e mallrave në dyqanet në internet dhe fotot në një sit të kartës së biznesit.