Dwukolumnowy układ jest najbardziej popularny w projektowaniu stron internetowych ze względu na jego wszechstronność i prostotę. Szeroka kolumna zawiera treść, a wąska, nazywana również w żargonie twórców stron internetowych, boczny pasek (od angielskiego sidebar, sidebar) to nawigacja. Jednak nic nie stoi na przeszkodzie, aby wykonać kolumny o tej samej szerokości, jeśli jest to podyktowane projektem. Na ryc. Rysunek 5.11 przedstawia układ dwukolumnowy, z nawigacją po prawej stronie i treścią po lewej stronie.

Ryż. 5.11. Układ dwukolumnowy

Ze względu na to, że szerokość wszystkich kolumn jest z góry znana, ze względu na to, że mamy do czynienia ze stałym układem, istnieje kilka sposobów formowania kolumn. Zasada ogólna mają taki. Warstwy z kolumnami są umieszczane w kontenerze, nazwijmy go layout , dla którego ustawiana jest szerokość układu i wyrównanie do środka.

Będziemy trzymać się konwencji, że warstwa paska bocznego tworzy pasek boczny z nawigacją, a treść jest główną treścią strony (treścią).

Nawigacja po lewej stronie

Pierwszy sposób tworzenia kolumn opiera się na pozycjonowaniu. Dla warstwy layoutu ustawiamy pozycjonowanie względne, a dla warstw wewnętrznych pozycjonowanie bezwzględne. Dzięki tej kombinacji wartości możesz ustawić pozycję elementów względem rodzica, używając właściwości left i top (przykład 5.3).

Przykład 5.3. Korzystanie z pozycjonowania

Układ ( szerokość: 980px; margines: auto; pozycja: względne; /* Pozycjonowanie względne */ ) .sidebar, .content ( pozycja: bezwzględna; ) .sidebar ( background: #C6DD7D; /* Kolor tła */ szerokość: 180px; /* Szerokość kolumny */ ) .content ( background: #F4ECCE; /* Kolor tła */ left: 180px; /* Przesuń w prawo */ width: 800px; /* Szerokość kolumny */ )

Domyślnie właściwość left ma wartość 0, więc ta właściwość nie jest ustawiona dla paska bocznego. Elementy pozycjonowane bezwzględnie mają szerokość równą szerokości zawartości, dlatego dla każdej warstwy należy określić wartość szerokości.

Powyższa metoda ma tę zaletę, że kolejność warstw w kodzie nie odgrywa dla niej dużej roli. Możesz łatwo zmieniać ich miejsca, nie wpłynie to na wyświetlanie kolumn.

Prostszy styl można uzyskać, używając właściwości float z wartością left , która jest ustawiona dla warstwy paska bocznego. Ale aby uzyskać nie uproszczony pasek boczny, ale rodzaj kolumny, warstwa zawartości musi również ustawić właściwość margin-left na wartość równą lub większą niż szerokość lewej kolumny (przykład 5.4).

Przykład 5.4. Korzystanie z pływaka

Układ ( width: 980px; margin: auto; ) .sidebar ( background: #C6DD7D; /* Kolor tła */ width: 180px; /* Szerokość kolumny */ float: left; /* Zawijaj w prawo */ ) .content ( background : #F4ECCE; /* Kolor tła */ margin-left: 180px; /* Margines lewy */ )

Alternatywnie możesz usunąć właściwość margin-left i dodać do układu właściwość overflow z wartością auto lub hidden, aby utworzyć kolumny.

Nawigacja w prawo

Powyższe style tworzenia nawigacji po lewej stronie można łatwo zmodyfikować w celu nawigacji po prawej stronie. W rzeczywistości jedyną różnicą między kolumnami jest ich szerokość i kolor tła. Zmieniając wymiary związane z szerokością i podmieniając tło, otrzymujemy wynik, gdy nawigacja znajduje się już po prawej stronie. Przykład 5.5 pokazuje modyfikację kodu z przykładu 5.3.

Przykład 5.5. Korzystanie z pozycjonowania

Układ ( szerokość: 980px; margines: auto; pozycja: względne; ) .sidebar, .content ( pozycja: bezwzględna; ) .content ( background: #F4ECCE; /* Kolor tła */ szerokość: 800px; /* Szerokość kolumny */ ) .sidebar ( background: #C6DD7D; /* Kolor tła */ left: 800px; /* Przesuń w prawo */ width: 180px; /* Szerokość kolumny */ )

Podczas pozycjonowania mogą wystąpić problemy z nałożeniem stopki (jeśli występuje) na inne elementy. Zagadnienie to zostało omówione w rozdziale dotyczącym gumowych układów trójkolumnowych.

Podobną czynność można przeprowadzić na przykładzie, w którym pojawia się właściwość margin-left. Ale w tym przypadku wygodniej jest użyć właściwości float z wartością right . Również margines lewy zmieni się na prawy margines (przykład 5.6).

Przykład 5.6. Korzystanie z pływaka

Układ ( width: 980px; margin: auto; ) .sidebar ( background: #C6DD7D; /* Kolor tła */ width: 180px; /* Szerokość kolumny */ float: right; /* Zawijaj w lewo */ ) .content ( background : #F4ECCE; /* Kolor tła */ margin-right: 180px; /* Margines prawy */ )

Style kolumn nie uwzględniają niektórych elementów, które często występują w prawdziwych witrynach. W szczególności nie są określone marginesy, więc tekst jest wyrównany z krawędzią łamów. Dodanie właściwości padding o danej szerokości rozszerza szerokość elementu, więc musisz zmniejszyć wartość szerokości o wielkość marginesu lub dodać zagnieżdżony element z marginesem lub dopełnieniem.

Przykład 5-7 pokazuje kod, w którym nawigacja znajduje się w prawej kolumnie, jest tam również stopka, a marginesy są brane pod uwagę.

Przykład 5.7. Układ dwukolumnowy

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Wynik tego przykładu pokazano na ryc. 5.12.

Ryż. 5.12. Układ dwukolumnowy

W przypadku warstwy treści dopełnienie jest włączane za pomocą właściwości padding, ale ponieważ szerokość warstwy nie jest określona, ​​dopełnienie nie wpłynie na nią w żaden sposób. Lista jest wstawiana na warstwę paska bocznego, która ma domyślnie ustawione wcięcia, więc nie ma „przyklejania” tekstu do krawędzi tła. Właściwość clear jest dodawana do stopki (warstwy stopki), która zastępuje efekt pływaka . Jest wymagany, gdy wysokość nawigacji jest wyższa niż wysokość treści, aby tekst nie zachodził na stopkę.

Jakie są wymagania dotyczące układu?

• Gumowy układ dwukolumnowy
• szerokość paska bocznego 300px
• treść jest rozciągnięta na pozostałą część szerokości.
• stopka wciśnięta do dołu (w tym tutorialu nie pokażę jak to się robi).

Jakie problemy z CSS pojawiają się przy układaniu takiego układu:

1 sposób.

Jeśli unosisz bloki, ty muszę ich zapytać stała szerokość (nie można ustawić 1 paska bocznego na 300 pikseli, a zawartości na 100%). W takim przypadku albo zawartość zostanie zsunięta w dół, albo pojawi się poziome przewijanie o 300 pikseli w lewo. Cóż, najważniejszą rzeczą do zrozumienia jest to, że ta metoda nam nie odpowiada.

2 sposób.

Wielu zecerów oferuje tę metodę, o czym oni myślą?! Istotą tej metody jest to, że możesz ustawić pasek boczny na pływający o szerokości 300, a nie pływać zawartość i ustawić do niego margines lewy: 300px. Dobry sposób i wszystko wydaje się układać tak dobrze. Szczerze mówiąc, myślałem, że to najlepszy sposób, ale ta metoda ma swoje pułapki. Powodem rezygnacji z tej metody jest to, że jeśli nagle wymyślimy w treści np. menu z pływającym li lub jakimkolwiek innym pływającym blokiem, a potem chcemy je wyczyścić clear:oba, to dolna granica tego bloku slajdy do poziomu dolnej granicy paska bocznego (Co i nie jest to dziwne, ponieważ foat jest wyczyszczony, możesz tego uniknąć, jeśli ustawić pływający blok na stałą wysokość, ale wcale nie chodzi o ustawienie stałej wysokości).

3 sposób.

Może być używany do Pasek boczny pozycja bezwzględna ale tylko jeśli ty jesteśmy pewni, że zawartość będzie większa niż wysokość paska bocznego w przeciwnym razie cała zawartość paska bocznego zmieści się w stopce (w końcu pozycjonowanie bezwzględne wyrywa się z ogólnego przepływu).

Ale jak dla mnie to też niezbyt dobry sposób!

4-drogowy.

„Świetny sposób, jeśli ma jakieś wady, proszę o komentarz. Ale myślę, że to najlepszy sposób”.

• Zalety tej metody: po pierwsze, zawartość DOM zostanie umieszczona przed paskiem bocznym, co jest dobre dla wyszukiwarek.
• nic nie zmieści się na stopce
• wszelkie bloki można wyczyścić i nic nie zsunie się do dolnej granicy (więc przezwyciężyliśmy problemy drugiej metody).

Ogólnie, jak to działa: spójrz na kod, najpierw pojawia się treść, a następnie pasek boczny. ustawiamy float na te dwa bloki (oczywiście pasek boczny zjeżdża w dół). potem ustawiamy właściwość sidebar margin-left:-100%. świetnie, jest z powrotem na swoim miejscu i wcięcie treści z marginesem-lerft:300px.

html

css

.Pasek boczny(
szerokość:300px;
Blok wyświetlacza;
pływak: lewy;
marża: 0 0 0 -100%;
}
.zawartość(
minimalna szerokość:723px;
Blok wyświetlacza;
pływak: lewy;
margines: 0 0 0 220px;
}

Witam, dzisiaj porozmawiamy z Tobą o tym, jak stworzyć własny pasek nawigacyjny dla witryny. Jest używany w prawie każdym zasobie internetowym, więc każdy programista powinien być w stanie stworzyć ten element.

Wyjaśnienia do artykułu:

1. „Pasek boczny / pasek boczny” — pasek nawigacyjny witryny.
2. „Pozycja” to właściwość w CSS.
3. „Góra”, „lewo”, „prawo”, „dół” to właściwości ruchu CSS.
4. WordPress to system zarządzania treścią stron internetowych/CMS.
5. Webix - biblioteka interfejsu użytkownika. Umożliwia tworzenie elementów tabeli.
6. Widok to funkcja JavaScript.

Ten artykuł pokaże różne drogi tworzenie paneli nawigacyjnych, zarówno ręcznie, jak i przy pomocy specjalnych konstruktorów witryn. Nasz przykład wykorzystuje WordPress.

Jak ręcznie zrobić pasek boczny? CSS i HTML

Teraz pokażemy tradycyjny sposób rozwoju, czyli pisanie kodu w języku Edytor tekstu. Aby to zrobić, musisz otworzyć dokumenty HTML i CSS w edytorze kodu.

Tworzenie paska bocznego po prawej stronie. HTML i CSS

Najczęściej pasek nawigacyjny znajduje się w nagłówku strony lub po jej prawej stronie. W drugim przypadku zwykle stosuje się układ dwukolumnowy.

Dobrze, jeśli masz wcześniej gotowy układ, ponieważ znasz szerokość bloku nawigacyjnego. Brak układu nie zakłóci rozwoju.

Uwaga! Tworząc paski boczne i inne elementy witryny, przygotuj wcześniej gotowy układ. Skupiając się na tym, uprościsz proces rozwoju.

Pasek nawigacyjny można utworzyć za pomocą list i zwykłych bloków. Jeśli używasz list, wyłącz dla nich właściwość „text-decoration”.

W naszym przykładzie użyto konstrukcji bloku div.

Na początek tworzymy wspólny blok div, w którym będą się znajdowały kolumny. Stwórzmy dla niego jakąś klasę, w naszym przykładzie używana jest klasa layoutu, ale nie wpływa to szczególnie na proces rozwoju.

Główny blok będzie używany do tworzenia pozycjonowania oraz doboru rozmiaru.

Zacznijmy od pozycjonowania. Dla kontenera ogólnego ustawiamy pozycjonowanie względne - właściwość (position: relative). W przypadku kolumn ustawiona jest właściwość (pozycja: bezwzględna).

Korzystając z tego typu, łatwiej będzie Ci ustawić kolumny wewnątrz bloku. Aby to zrobić, użyjemy właściwości przemieszczenia: , , I .

W naszym przykładzie kod wygląda tak:

HTML

Kopiuj

css

układ (

pozycja: względna;

tło: rgba (119, 115, 115, 0,58);

}

Pasek boczny , .content ( pozycja: bezwzględna ; )

Pasek boczny(

tło: #C6DD7D;

Zawartość(

tło: #F4ECCE;

Kopiuj

Uwaga! Pamiętaj, aby określić szerokość dla każdego elementu nawigacji. Faktem jest, że mają pozycjonowanie bezwzględne, co oznacza, że ​​ich szerokość będzie równa szerokości zawartości wewnętrznej.

Chcemy również zauważyć, że w , druga kolumna jest umieszczana jako pierwsza, a potem pierwsza. Za pomocą Ta metoda nie ma to znaczenia, ponieważ kolumny można łatwo zamienić.

Możesz również użyć do tego właściwości float. Ta metoda jest znacznie prostsza, ponieważ opiera się na zawijaniu elementów. Dzięki niemu nasz sidebat będzie zlokalizowany z prawa strona.

Tworzenie paska nawigacyjnego po prawej stronie. HTML i CSS

Aby utworzyć taki panel, możesz użyć tych samych znaczników, co w pierwszym przykładzie. Kod CSS również nie musi być zbytnio zmieniany.

Musisz wprowadzić drobne poprawki w kodzie CSS. Jest to konieczne, aby menu znajdowało się po prawej stronie. Nie zmieniamy właściwości szerokości i pozycji!

Jak stworzyć pasek boczny w WordPressie?

Przyjrzyjmy się teraz metodzie, która bardzo różni się od poprzedniej. Różnica polega na tym, że możesz stworzyć lepszą nawigację przy niewielkim lub zerowym kodzie CSS lub HTML.

Nie będziesz musiał pisać całego kodu ręcznie, cała praca odbędzie się w samym konstruktorze.

Korzystając z WordPressa, będziesz musiał zarejestrować pasek nawigacyjny i dodać do niego kilka widżetów.

Aby zarejestrować pasek boczny w WordPressie, musisz napisać kilka funkcji w Pliki PHP. Zasadniczo będziesz potrzebować tablic danych, które będą odnosić się do widżetów i ich znaczników div.

W naszym przykładzie brany jest pod uwagę prawy pasek boczny, a także pasek boczny stopki.

Kilka słów o webix

Istnieje inny specjalny framework, który pozwoli ci stworzyć ten pasek boczny. Jego główną zaletą jest to, że pozwala na stworzenie dobrego dashboardu za pomocą zaledwie kilku linijek kodu.

Najpierw musisz pobrać ten framework. Następnie podaj łącza do jego stylów i skryptów w swoim dokumencie HTML.

Następnie możesz zacząć tworzyć pasek boczny. Aby umieścić go w ramach, istnieje specjalna funkcja - widok. Które miejsce na umieszczenie elementów.

Minusem tego frameworka są jego ograniczenia. Korzystając z niego, nie będziesz w stanie stworzyć naprawdę wyjątkowej kreacji, ponieważ panel nie jest ograniczony twoją wyobraźnią, a jedynie kilkoma funkcjami.

Wniosek

W tym artykule omówiliśmy kilka podstawowych sposobów tworzenia paska nawigacyjnego, ale jest ich znacznie więcej. Możesz nawet wymyślić swój własny sposób na podstawie naszego doświadczenia.

W tych przykładach pokazano prosty pasek nawigacyjny. Jeśli trochę popracujesz kod źródłowy, wtedy możesz zdobyć prawdziwe arcydzieło.

Tagi:

W witrynie potrzebny jest pływający blok (lub jak to się nazywa ruchomy, stały, zablokowany), aby użytkownik widział jeden stały element podczas przewijania strony, na której najczęściej umieszczane są reklamy (teasery, banery lub kontekst).

Niestety, zasady adsense nam tego zabraniają. Jednak wielu właścicieli witryn ignoruje zasady na własne ryzyko. Może nawet nie są za to ukarani, ale nie radziłbym ryzykować.

W takich blokach umieszczam swoje teasery/banery, a czasami zamiast reklamy je tam wyświetlam powiązane posty lub kilka przydatnych informacji dla odwiedzającego.

Powiedzmy, jak możesz utworzyć pływający blok w swojej witrynie.

Zadanie: sprawiają, że ostatni blok na pasku bocznym (pasku bocznym) jest pływający. Co więcej, aby przyklejał się tylko w momencie, gdy użytkownik dotrze do niego poprzez przewijanie, a nie od razu po otwarciu strony. Ponadto klocek powinien „odkleić się”, sięgając do stopki (czyli nie zachodząc na nią).

Najbardziej działający sposób

Istnieje wiele implementacji Sticky Block, ale nie wszystkie działają poprawnie. opowiem z osobiste doświadczenie: Ta sama metoda instalacji bloku może działać w jednym miejscu, ale ościeża pojawiają się w innym.

Poniżej znajduje się przykład pływającego bloku, który działał na prawie każdej stronie, na której go zainstalowałem. Nie było kóz. Silnik również nie jest ważny (DLE, WordPress, LiveStreet itp.).

Wklej następujący kod HTML w żądanym miejscu paska bocznego:

$(okno).scroll(funkcja() (
zmienna sb_m = 20 ; /* wyściółka górna i dolna */
zmnmb = 300 ; /* wysokość piwnicy z marginesem */
varst = $(okno).scrollTop();
var sb = $(".przyklejony blok" ) ;
var sbi = $(".klocek samoprzylepny .inner" );
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var nb_h = nb.wysokość () ;

If(sb_h + $(dokument).scrollTop() + sb_m + mb< $(document) .height () ) {
if(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(("paddingTop" : h) ) ;
}
w przeciwnym razie(
sb.css(( "paddingTop" : 0 ) );
}
}
} ) ;

W tym kodzie możesz ustawić górę, dół i wysokość stopki, czyli wysokość, na której blok powinien się zatrzymać.

Teraz dołączamy JS. Aby to zrobić, napisz w sekcji HEAD:

Możesz użyć samego pliku header.php, umieszczając ten kod między otwierającymi i zamykającymi tagami head i owijając go w tagi skryptu, na przykład:

Możesz także napisać ten kod w tagach skryptu gdziekolwiek indziej. Najważniejsze, że ładuje się na właściwych stronach bloga. Na przykład możesz w footer.php przed zamykającym tagiem body.

Przejdźmy teraz bezpośrednio do tego kodu. Okazuje się, że po 10 pikselach od góry pozycjonowanie względne zostaje zastąpione stałym (patrz artykuł pod linkiem powyżej). Jeśli to konieczne, w linii z else możesz wybrać wartość inną niż zero dla góry, a wtedy menu ustalone na górze będzie wcinało się od górnej krawędzi rzutni o tę wartość piksela (moim zdaniem jest to zbyteczne) .

W przeciwieństwie do oryginalnego kodu musiałem również dodać szerokość: "100%", ponieważ w przeciwnym razie szerokość menu by się zmniejszyła, co zepsuło cały obraz.

Spójrz, dla jasności, podam kod HTML, który tworzy górne menu w moim szablonie bloga WordPress (znajduje się w moim pliku header.php z ):

W twoim szablonie najprawdopodobniej wyjście pozycji menu zostanie ustawione za pomocą np. takiej konstrukcji (funkcji), ale nie o to chodzi.

Funkcja wp_list_pages jest oczywiście dobra (pozwala konfigurować sortowanie, ustawiać wyjątki itp.), ale lepiej robić wszystko ręcznie za pomocą zwykłego HTML, jak pokazano powyżej. MOIM ZDANIEM.

Ważne jest, aby w tym miejscu pojąć, że cała sprawa jest zakończona do divów kontenerowych i najwyższego ma atrybut id="navi". Tutaj będziemy się tego trzymać. Widzisz w powyższym kodzie JS, że występuje on dwukrotnie #nawigacja? Będziesz musiał wpisać tam swój identyfikator zamiast #navi (lub klasy, która, jak pamiętasz, jest zapisywana nie przez hash, ale przez kropkę, na przykład tak: .menu).

Następnie Twoje menu powinno być ustawione w górnej pozycji podczas przewijania strony o określoną liczbę pikseli. Miałem jednak problem z tym, że samo to menu nie zawsze pojawiało się na górze elementów strony, nad którymi unosiło się.

Widzisz, to nie jest dobre. Dlatego musiałem trochę zagłębić się w kod CSS i dodać wartość 1000 dla id selektora #navi:

#navi(background:#03658e url(https://website/wp-content/themes/Organic/images/spriteme2.png) repeat-x;background-position:0px -10px;height:31px;z-index:1000 )

Faktem jest, że kiedy ustawisz jeden z trzech typów pozycjonowania za pomocą Position, to ten element przestaje wchodzić w interakcje ze zwykłymi elementami kodu HTML. Ale z innymi podobnie pozycjonowanymi będzie konkurować o pozycję „powyżej lub poniżej”. z-index:1000 pozwala nam oczywiście umieścić nasze menu ponad wszystkimi innymi blokami. Przeczytaj powyższy artykuł, aby uzyskać szczegółowe informacje.

Jak zrobić pływający pasek boczny w WordPressie bez wtyczek

Korzystając z metody opisanej poniżej, możesz sprawić, że cały pasek boczny lub jego część będą unosić się w powietrzu (lub innymi słowy, naprawić w określonym miejscu w rzutni). Jeśli ten obszar jest dość mały i mieści się na jednym ekranie (nawet na urządzeniu przenośnym), możesz sprawić, by wszystko się unosiło.

Ale najczęściej tak się nie stanie i będzie można zmusić dolną część do pływania. Jeśli pasek boczny, tak jak w moim przypadku, jest nierozłącznym monolitem, możesz samodzielnie utworzyć pływający blok, korzystając z zasad określonych w używanym motywie projektowym i umieścić go poniżej głównego.

Zrobiłem to wszystko szybko i bez zawracania sobie głowy drobiazgami i znalezieniem optymalnego rozwiązania, ponieważ z mojego bogatego doświadczenia eksperymentalnego nauczyłem się, że im więcej nadziei pokłada się w jakimś pomyśle, tym mniejsze jest prawdopodobieństwo „strzelania”. Cóż, na odwrót. Generalnie nie było jeszcze sensu zawracać sobie głowy, ponieważ prawdopodobieństwo, że to wszystko się zakorzeni, nie jest tak duże.

Więc po prostu wziąłem stworzyć dolny blok Przeniosłem górną część mojego głównego paska bocznego (w szablonie sidebar.php), następnie przeniosłem go z góry na dolny blok „Używam go do zarabiania pieniędzy”, a na koniec wkleiłem to, co było końcem w głównym blok. Wyszło coś takiego:

Cóż, teraz mam blok „Używam do zarobków” przeniesiony z górnego bloku paska bocznego do dolnego. Okazało się, że nie jest to fontanna, ale na „tymczasowe” to wystarczy. Pozostaje tylko ułożyć to wszystko w pliku JS z kodem, a dolny blok zacznie pływać. Kod JS wygląda tak:

$(document).ready(function()( var br = $.browser; $(window).scroll(function() ( var top = $(document).scrollTop(); if (top< 2561) { $(".sidebar123").css({top: "0", position: "relative", marginLeft: "25px"}); } else if ((!br.msie) || ((br.msie) && (br.version >7))) ( $(".sidebar123").css((top: "52px", position: "fixed", marginLeft: "760px")); ) else if ((br.msie) && (br.version<= 7)) { $(".sidebar123").css({top: "52px", position: "fixed", marginLeft: "25px"}); } }); });

Zauważ, że zamiast .sidebar123 , musisz zastąpić swoją klasę lub identyfikator zewnętrznego kontenera, w którym znajduje się dolny blok paska bocznego.

Nie bardzo rozumiem ten kod (nie znam JS), ale wszystko działa. Przynajmniej częściowo. Gdy ustawisz stałe pozycjonowanie, raport pochodzi z lewego górnego punktu. Dlatego z marginLeft: „760px” umieszczam ten blok dokładnie na poziomie paska bocznego (liczba została uzyskana metodą „prób i błędów”).

Wartość top: "52px" ustawia dopełnienie już pływającego bloku paska bocznego od górnej granicy. Wartość góry Mam jednak był problem w przypadku, gdy całkowita wysokość głównego paska bocznego była mniejsza niż wysokość obszaru zawartości. Taka rzecz wyszła na przykład podczas przeglądania archiwum nagłówków:

Z punktu widzenia CSS rozumiem, dlaczego tak się dzieje, ale byłem zbyt leniwy, by myśleć o poprawce. Po prostu musiałem odmówić pokazania tego pływającego bloku paska bocznego na takich stronach (nie jest tam potrzebny).