Laboratorium 4

Krok 10: gridy

W kroku siódmym ukryta była pułapka, wersja na tablety. Zaproponowany tam wygląd był nieprzyjemny do uzyskania za pomocą pojedynczego pojemnika flex (flex-wrap: wrap i ustawianie odpowiednich szerokości kolumn). Bardziej skomplikowane układy jeszcze trudniej uzyskać.

Spróbujmy umieścić całą zawartość strony, razem z nagłówkiem i stopką, w jednym pojemniku, którego wygląd będzie się zmieniał w zależności od wielkości okienka przeglądarki. Do uzyskania właściwego wyglądu skorzystamy z grida.

Dość szczegółowy opis można znaleźć pod adresem https://css-tricks.com/snippets/css/complete-guide-grid/.

Na szerokich ekranach chcemy, żeby menu po lewej stronie miało stałą szerokość (np. 200px), a pozostała przestrzeń była podzielona w stosunku 3:1. Pomiędzy kolumnami zostawmy 15px odstępu. Formularz rezerwacji powinien znajdować się w dolnej części prawej kolumny, a lista opóźnionych lotów zajmować całą przestrzeń nad tym formularzem.

Dodajmy widok na tablety, taki jak opisany w punkcie 7.

Krok 11: position fixed

Czasem potrzebujemy wyświetlić jakieś informacje tak, żeby zasłaniały wszystkie inne informacje na ekranie. Można próbować to robić używając position: absolute, ale gdy element wyświetlający jest głęboko w drzewie, to nawet ustalenie właściwej pozycji jest trudne, nie mówiąc o tym, że gdy po drodze do korzenia jest overflow: hidden, to katastrofa. position: fixed powoduje, że przesunięcie elementu jest liczone względem ekranu, i nie zależy od ewentualnego przewijania dokumentu.

Stwórzmy kopię strony z którą pracujemy i dodajmy okienko zasłaniające treść strony - tak, żeby nie dało się korzystać z linków - z informacją o powodzeniu rezerwacji. Aby tło było nieco przezroczyste można skorzystać z opacity.

Te strony powinna zostać pokazane prowadzącemu zajęcia, bo to zadanie laboratoryjne numer 2.