Wordpress səhifəsinin altına altbilgi əlavə edin. Altbilgi və ya altbilgini CSS veb səhifəsinin altına necə bağlamaq olar? Spacer daxil edirik və Internet Explorer ilə mübarizə aparırıq

Gəlin işlək bir nümunəyə keçək

Gördüklərimiz layout qüsurları mismarlı altbilgi effektinin həyata keçirilməsi baxımından? Biz bunu görürük
1) Saytdakı altbilgi faiz hündürlüyü olmayan id=layout ilə blokun içərisindədir. Teorik olaraq, o, valideynlər və .content-left məzmun bloku 100% yüksəkliyə təyin edilməlidir. Sonuncu ilə problemlər yaranır - bunun üçün uyğunlaşdırılmayıb. Buna görə, bir interlayer bloku yoxdur və ya altbilgi səhv səviyyədədir. Bundan başqa,
2) altbilginin hündürlüyü dəyişkəndir (siyahıdakı elementlərin sayından və şrift ölçüsündən asılıdır, bu HTML-dən deyil, CSS-dən görünür). VƏ
3) yuxarıda #layout sabit hündürlüyü 90px olan bir reklam bloku var;
4) nə altbilgidə, nə də (ümumiyyətlə) blokda hizalama blokları yoxdur #layout(Bəli, amma blokun üstündə .rotated_posts; lakin, bəlkə də bunu altbilgiyə aid etmək lazımdır).

4-cü nöqtə - bir ssenari ilə çəkməlisiniz.
Deyəsən, #layout(margin-top:-90px;) əlavə etməklə üçüncü məqamı anlamaq asan olardı. Ancaq unutmayın ki, bu blok mövcud olmaya bilər - o, banner kəsici tərəfindən sıxışdırılır və ya reklamçılar qəfildən imtina etməyə qərar verirlər. göstər. Saytda olmayan bir sıra səhifələr var. Buna görə də asılılıq kənar-üst reklam blokundan çıxmaq pis fikirdir. Daha yaxşı - içəriyə qoyun #layout Onda o, mane olmayacaq.

Birinci məqam odur ki, mismarlanmış altbilginin ümumiyyətlə işləməsi üçün altbilgi blokunu altına yerləşdirmək lazımdır #layout. Bununla belə, javascript-in köməyi ilə siz digər mismarlanmış altbilgi sxemlərini həyata keçirə bilərsiniz, lakin hər halda, onsuz etmək üçün JS və ya ilkin düzgün tərtibata ehtiyacınız var.

Saytın altbilgisini məzmuna “şillələyən” saytın ən son tərtibatçısından güclü ola bilmədiyimiz üçün altbilgini gələcək saytımıza düzgün yerləşdirmək fikrini təxirə salacağıq (buna görə də “daha ​​soyuq” olacaq) Habr!-dan daha çox!) və biz Habr-ı javascript (istifadəçi yazısı) ilə düzgün vəziyyətlərə ayıracağıq. (Dərhal deyək ki, günahkar olan layout dizayneri, keçidçi deyil, saytın növü, əlbəttə ki, layihə rəhbərliyinin strateji qərarını müəyyən edir.) Bu yolla biz ideala nail olmayacağıq, çünki yükləmə prosesi zamanı ilk və ya iki saniyədə səhifə səhv tərtibatda olacaq. Lakin İT insanlarının dünyadakı ən populyar saytı üstələmək konsepsiyası və bacarığı bizim üçün vacibdir.

Buna görə də, skriptin lazımi yerində (əvvəllər, səhifənin yüklənməsinin sonunda) DOM reklam bloklarının və altbilginin düzgün yerlərə köçürmələrini yazacağıq. (Gəlin istifadəçi skriptlərinə görə həllin təmizdən daha mürəkkəb olacağına hazır olaq.)
var dQ = function(q)(return document.querySelector(q);) //qısaldılması üçün var topL = dQ("#topline"), lay = dQ("#layout"), foot = dQ("#footer" ); if(topL && lay) //banner - məzmun blokunun daxilində lay.insertBefore(topL, lay.firstChild); if(lay && foot && lay.nextSibling) //altbilgini köçürün lay.parentNode.insertBefore(footer, lay.nextSibling);
Blokları öz yerlərinə qoyduq - indi elementlərə lazımi xüsusiyyətləri təyin etmək qalır. Altbilginin hündürlüyü dəqiq təyin edilməlidir, sadəcə olaraq, istifadəçi skripti qüvvəyə minəndə (səhifənin yüklənməsinin sonunda) biz bunu bilirik. İstifadəçi skriptinin tətik nöqtəsinə görə, yuxarıda müzakirə edildiyi kimi, səhifədəki altbilgi ekranının sıçrayışı qaçılmazdır. Siz "yaxşı sima" yaratmağa cəhd edə bilərsiniz, amma "pis oyun" ilə? Nə üçün? Saytın "pis oyunu" super səylər olmadan konsept hazırlamağa imkan verir ki, bu da keyfiyyəti qiymətləndirmək üçün kifayət edəcək və layihənizdə "düzgün oynasanız" lazım olmayacaq.
if(ayaq)( //blok-aligner

altbilgidə h.apnd_el((clss:"sil", əlavə: altbilgi)); var footH = foot.offsetHeight; //...və altbilginin hündürlüyünü ölçün ) if(topL && lay && altbilgi && lay.nextSibling)( //istənilən hündürlüyün blokunu məzmunda hizalayın ("layout") h.apnd_el((clss:" aydın", css:( hündürlük: (footH ||0) +"px"), əlavə et: lay)); lay.style.minHeight ="100%"; h.addRules("#layout(margin-bottom:-) "+ footH +"px !important)html, body (hündürlük:100%)"); )
Burada özümüzə öz-özünə yazılmış funksiyanı tətbiq etməyə icazə verdik h.apnd_el, bu, təxminən jQuery ilə eynidir -
$("").css((hündürlük: footH ||0)).appendTo($(footer))
Və sonra - başqa bir tipik CSS qayda inyeksiya funksiyası - h.addRules. Burada onsuz edə bilməzsiniz, çünki " ilə bir qayda elan etməlisiniz. !vacib" - sadəcə istifadəçi skriptindən stil prioritetlərinin xüsusiyyətlərinə görə.

Bu kod parçaları ilə biz istifadəçi skriptində mismarlanmış altbilgini görə bilərik (onu aşağı atdıqdan sonra) və səhifənin tərtibatını necə qurmağı tam başa düşə bilərik. Hər gün atlama dizaynından istifadə etmək qıcıqlandırıcıdır, ona görə də bunu sırf nümayiş və sınaq məqsədləri üçün etmək tövsiyə olunur. HabrAjax istifadəçi skriptində 0.883_2012-09- versiyasından başlayaraq onu “underfooter” parametri ilə bağlayaraq oxşar skript quraşdırdım (“alt-bilgi”nin qarşısındakı parametrlər siyahısında “gənə” qoyun) 12.

Dırnaqlanmış altbilgi, əgər quraşdırılıbsa, ZenComment üslublarını yeniləmək ehtiyacına təsir edirmi? Bəli elədir.İstifadəçi skriptinin daxil etdiyi üslubların ən aşağı prioritetə ​​malik olduğu mürəkkəb üslub üstünlük zəncirinə görə biz istifadəçi üslublarını bir az tənzimləməli olduq. imkanlar mismarlanmış altbilgi ilə işləyin. İstifadəçi üslublarını yeniləməsəniz (2.66_2012-09-12+) - altbilgi qeyri-dəqiq işləyəcək.

Blok fırlanan_post (keçmişdən üç məşhur yazı) altbilgi ilə daha məntiqli görünür, ona görə də real skriptdə o da altbilgiyə köçürülür.

İkinci maddə (layihə qüsurları siyahısından) sırf Habr üçün əsaslandırmadır (onlar istifadəçi skriptinə aid edilmir və əvvəlkiləri qismən təkrarlayır).

Səhifələrin təmiz CSS-də mismarlanmış altbilgi yaratmasına mane olan problem var - brauzerdəki standart şrift ölçülərindən asılı olaraq qeyri-müəyyən altbilgi hündürlüyü. CSS-də altbilgi tətbiq etmək üçün şriftlərin nisbi hündürlüklərini seçmək lazımdır, lakin istifadəçinin kompüterində təqdim olunan şriftlər yoxdursa, onlar işləməyə bilər. Buna görə də, həll altbilginin təxmini mövqeyini keçidlərlə dəqiq mövqeyə uyğunlaşdıra bilən javascript daxil etməlidir. Və ya müxtəlif platformalarda istifadəçi skriptində hazırlanmış həllin məqbulluğuna baxdıqdan sonra mismarlanmış altbilginin hesablanmış quraşdırılmasını edin - ilk müşahidələr həllin praktik olduğunu göstərir.

Nəticə: siz Habré-də planı tam şəkildə təşkil edə bilərsiniz, lakin bunun üçün blokları düzgün qaydada yerləşdirərək düzülüşün davranışını aydın başa düşən bir tərtibatçıya ehtiyacınız var. (İndi altbilgi və yuxarı pankart “orada deyil” və elə bir şəkildə deyil ki, onlar sadəcə üslubları olan mismarlanmış altbilgi əldə edə bilsinlər.) Əgər siz altbilgi hündürlüyünü nisbi vahidlərlə təyin etsəniz, JS olmadan edə bilərsiniz. şriftin qeyri-müəyyənliyi üçün yer.

İcra

HabrAjax 0.883+ funksiyasını aktiv etsəniz, biz “mixlanmış altbilgi”nin işlədiyini görəcəyik. Skriptlərin köməyi ilə hündürlüyə uyğunlaşır. Bu, mismarlanmış altbilgili səhifələrin adi olanlarla müqayisədə nə qədər yaxşı göründüyünü qiymətləndirməyə imkan verir. ZenComment istifadəçi üslubları skriptlərlə uyğun gəlir, lakin dırnaqlanmış altbilginin onlarla düzgün işləməsi üçün siz ZenComment versiyası 2.66_2012-09-12+ quraşdırmalısınız.

İcra Davranışı Faktları

Altbilgi, üslub və yazı ilə şamanizm şamanizmdir (yalnız nəzəriyyə ilə dəstəklənir). Fərqli brauzerlərdə bir az fərqli davranış, lakin bəzi yerlərdə - gözlənilməz. İstifadəçi skriptləri və blokların yenidən təşkili olmadan nəticələr fərqli olacaq. İstifadəçi skriptində tətbiqetmə təcrübələri bunu verdi.

1) Firefox - altbilgi atlamalarının gözlənilməz olmaması. Qəribədir ki, onlar orada deyil - render altbilgini aşağıya qoyduqdan sonra baş verir.

2) Chrome - onu "gəzən sürüşmə" ilə təəccübləndirdi - altda saniyədə bir dəfə olan boş yerlər səhifəyə əlavə olunur - yüksəkliklərin hesablanması ilə səhv bir şey olur. Bu, istifadəçi stilinə html,body(hündürlük:100%) əlavə etməklə müalicə olunur, lakin onun həmişə işləyəcəyinə zəmanət verilmir. Sənədin hündürlüyündə pəncərəni aşmadığını yoxlamaq daha etibarlıdır və əgər yoxsa, altbilgini hərəkət etdirin, əks halda - heç bir şey yoxdur. Atlama ilə - hər şey qaydasındadır, belədir.

3) Opera - birinci səhifənin yüklənməsi zamanı heç bir sıçrayış yoxdur (v. 12.02), lakin tələsik yenidən yükləmə altbilgi keçidini göstərə bilər. Əks təqdirdə, Fx-dən daha az düzgün aparmır.

Yaxşı, Chrome-a düzgün davranmağı (skriptlə) xüsusi olaraq öyrətməli və versiyanı bu formada nəzərdən keçirmək üçün yaymalısınız. Buna görə də, istifadəçi skriptindəki bölmə məqalədə veriləndən bir az daha mürəkkəbdir.

Xatırlatmaq lazımdır ki, bu, tam icra deyil - o, məsələn, istifadəçi tərəfindən pəncərənin ölçüsünü dəyişməsi hallarını nəzərə almır. Hərəkətdən əvvəl və sonra altbilgi hündürlüklərinin dəyişdirilməsinin nadir (təcrübədə) birləşmələrini də tapa bilərsiniz, burada məntiq narahatlıq yaratmadan uğursuzluğa başlayacaq. Çatışmazlıqlar qəsdən buraxılır, çünki təftiş və müvəqqəti həllin mürəkkəbliyi balansı qorunur.

Nəticədə, ən azı sürətli masaüstü kompüterlər üçün tamamilə işlək bir iş sxemi olduğu ortaya çıxdı. Səhv altbilgi davranışı aşkar edilərsə, "underfooter" parametri deaktiv edilməlidir.

Hansı səhifələr üçün faydalıdır?

Standart bir saytda, istifadəçi üslubları olmadan, hətta qısa sual-cavab səhifələri 1500px-dən uzundur, əksər hallarda bu, üfüqi monitorlarla görünməzdir. Ancaq adi monitorlarda belə, istifadəçilərin hündürlüyü təxminən 1300 piksel olan şəxsi səhifələri tez-tez rast gəlinir, burada dırnaqsız altbilgi bütün şöhrətində görünür. Çox uzun deyil və istifadəçi parametrlərində bir sıra səhifələr.

ZenComment istifadəçi üslubları tətbiq edildikdə, onlar tələb olunan səhifə hündürlüyünü əhəmiyyətli dərəcədə azaldır və HabrAjax istifadəçi skripti yan paneldə yan panellərin bəzilərini və ya hamısını göstərməyə bilər. Buna görə də, skriptlər və üslublarla, dırnaqsız altbilginin təsiri daha tez-tez müşahidə olunur. Buna görə də, altbilgi düzəlişinin ilk dəfə HabrAjax-da görünməsi məntiqlidir. Ancaq hətta adi bir saytda mismarlanmış altbilginin faydalı olacağı bir sıra səhifələr var.

Dəstək olacaqmı?

Saytın son bir ildə davranışı göstərir ki, tərtibatçılar (və buna görə də rəhbərlik) əvvəllər yalnız istifadəçi skriptlərində və istifadəçi üslublarında mövcud olan funksiyaları həyata keçirməyə başlayıblar. Məsələn, ilin əvvəlində yazdım, orada çoxlu kiçik arzular topladım. Altı aydan sonra ona qayıtdım və məmnuniyyətlə qeyd etdim (düz mətndə; “UPD” və tarixləri oxuya bilərsiniz) saytda arzu kimi təsvir olunan bir sıra funksiyalar artıq həyata keçirilib.

Sonra şərhləri qiymətləndirmək üçün kvadratlar əvəzinə "oxlara" baxaq. Onlar təxminən 3 il əvvəl istifadəçi səlahiyyətlərində ("Prettifier") ortaya çıxdı və təxminən 2 il əvvəl ZenComment-də qəbul edildi. Təxminən 2-3 ay əvvəl sayta çıxdılar. O, bir müddət sonra oxların daha az qaçırmaq üçün ZenComment-də olduğu kimi (bir ox nömrənin solunda, ikinci sağda) müəyyən məsafəyə yayılacağına inanmağa başlayır.

istifadəçi üslubları

HabrAjax

Teqlər əlavə edin

Hər bir layout dizayneri gec-tez saytın altbilgisini (footer) səhifənin aşağısına basmaq ehtiyacı ilə üzləşir. İnternetdə bu problemi həll etməyin bir neçə yolu var. Təcrübədə istifadə etdiyim bəzilərini göstərəcəyəm.

Ən sadə html işarələməsi:

Metod №1

Altbilgi mütləq yerləşdirərək və ana blokların hündürlüyünü (html , gövdə və sarğı) 100% çəkərək aşağıya itələnir. Bu halda, məzmun bloku alt məlumatın hündürlüyünə bərabər və ya ondan böyük olan alt abzas təyin etməlidir, əks halda sonuncu məzmunun bir hissəsini bağlayacaqdır.

* ( kənar: 0; doldurma: 0; ) html, gövdə ( hündürlük: 100%; ) . sarmalayıcı ( mövqe: nisbi; minimum hündürlük: 100%; ) . məzmun ( doldurma-alt: 90px; ) .footer ( mövqe : mütləq; sol: 0; alt: 0; en: 100%; hündürlük: 80px; )

Metod №2

Görünən şaquli sürüşmədən xilas olmaq üçün altbilgi məzmun blokunu və onun "valideynlərini" brauzer pəncərəsinin tam hündürlüyünə uzatmaqla və altbilgini mənfi kənardan (margin-top) yuxarı qaldırmaqla aşağı sıxılır. Bu halda, zirzəminin hündürlüyünü müəyyən etmək lazımdır və bu, girinti dəyərinə bərabər olmalıdır. Box-sizing: border-box xüsusiyyəti sayəsində biz məzmun qutusunun 100% hündürlüyünü keçməsinə icazə vermirik. Belə ki, bu halda, min hündürlük: 100% + padding-alt: 90px brauzer pəncərəsinin hündürlüyünün 100%-nə bərabərdir.

* ( kənar: 0; doldurma: 0; ) html, gövdə, .wrapper ( hündürlük: 100%; ) .məzmun ( qutu ölçüsü: sərhəd qutusu; minimum hündürlük: 100%; doldurma-alt: 90px; ) . altbilgi (hündürlük: 80px; yuxarı kənar: -80px; )

Metod №3

Bu üsul yaxşıdır, çünki digər üsullardan fərqli olaraq (5-cidən başqa) altbilginin hündürlüyü əhəmiyyət kəsb etmir. Burada qablaşdırma blokunu cədvələ, məzmun blokunu isə cədvəl cərgəsinə çevirməklə cədvəlin davranışını təqlid edirik (ekran: cədvəl və ekran: cədvəl-sətir xüsusiyyətləri müvafiq olaraq). Bununla əlaqədar olaraq, məzmun blokunun və onun bütün ana konteynerlərinin 100% hündürlüyə təyin edilməsi ilə məzmun tam hündürlüyə qədər uzanır, lakin avtomatik olaraq təyin olunan altbilginin hündürlüyünü çıxarır - cədvəl emulyasiya altbilginin brauzer pəncərəsinin hündürlüyündən kənara çıxmasının qarşısını alır.

*( margin: 0; padding: 0; ) html, body ( hündürlük: 100%; ) .wrapper ( display: table; hündürlük: 100%; ) .content ( display: table-row; hündürlük: 100%; )

Metod №4

Bu üsul əvvəlkilərdən heç birinə bənzəmir və onun özəlliyi yalnız müasir brauzerlər tərəfindən dəstəklənən CSS calc() funksiyasının və vh vahidinin istifadəsidir. Burada altbilginin dəqiq hündürlüyünü bilmək lazımdır. 100vh brauzer pəncərəsinin hündürlüyü, 80px isə altbilginin hündürlüyüdür. Və calc() funksiyasının köməyi ilə birincidən ikinci dəyəri çıxarırıq və bununla da altbilgini aşağıya sıxırıq.

* ( kənar: 0; doldurma: 0; ) .məzmun ( min hündürlük: calc(100vh - 80px); )

Metod №5

Bəlkə də bu, bütün təqdim olunanların ən yaxşı üsuludur, lakin o, yalnız müasir brauzerlərdə işləyir. Üçüncü üsulda olduğu kimi, altbilginin hündürlüyünün əhəmiyyəti yoxdur.

* ( kənar: 0; doldurma: 0; ) html, gövdə ( hündürlük: 100%; ) .wrapper (ekran: əyilmə; əyilmə istiqaməti: sütun; hündürlük: 100%; ) .məzmun ( flex: 1 0 avtomatik; ) .footer ( çevik: 0 0 avtomatik; )

Metod №6

Müxtəlif hallar üçün bütün kitabxana (Flexbox istifadə edərək)

Vlad Merzheviç

Veb tərtibatçılarının jarqonundakı zirzəmi saytın müəllif hüquqlarının yazıldığı, kontaktların dərc olunduğu, müxtəlif sayğacların və buna bənzər məlumatların göstərildiyi aşağı hissəsidir. Adətən altbilgi bütün məzmundan sonra yerləşir və yalnız səhifəni sürüşdürərkən görünür. Bəzi hallarda, səhifənin hündürlüyündən asılı olmayaraq altbilgini həmişə mövcud etmək və onu brauzer pəncərəsinin aşağı hissəsində düzəltmək arzu edilir.

Bunun üçün mövqe xassəsindən və onun sabit dəyərindən istifadə edirik. Bu halda element bir yerdə qalır və onun mövqeyi yuxarı , sağ , aşağı , sol xassələri vasitəsilə koordinatlarla təyin olunur. Bizim vəziyyətimizdə sol və alt üçün sıfır dəyərlər təyin etmək kifayətdir. Sabit elementlərin eni onların məzmununa bərabərdir, bu, fon rəngi və ya şəkil əlavə etsəniz aydın görünür, ona görə də siz həmçinin eni vasitəsilə eni 100%-ə təyin etməlisiniz (misal 1).

Misal 1: Sabit zirzəmi

Nümunənin nəticəsi Şəkildə göstərilmişdir. 1.

düyü. 1. Səhifənin altındakı altbilgi

Internet Explorer 6 sabiti dəstəkləmir, ona görə də bu nümunə düzgün işləməyəcək. IE6 üçün kodu iki etiketlə tamamlamalı olacaqsınız