#17. Spróbujmy popracować z panelem

Kolumnowy layout

Chciałbym zaprezentować nieco bardziej złożony layout na którym użytkownik nie przewija całej strony, jedynie zawartość znajdująca się w elementach. Obie kolumny są niezależne. Szybko przejdę do ćwiczenia. Niezbędną teorię umieszczę w podpunktach😉

Właściwością którą wykorzystuję jest float (w przyszłych postach zobaczycie jakim innym rozwiązaniem można wykonać layout). Float jest dość starym rozwiązaniem, choć jeszcze wykorzystywanym. 

Ćwiczenie

Tak jak zwykle zaczynamy od zbudowania struktury treści w pliku HTML. 

Celem jest zbudowanie panelu z dwoma niezależnymi kolumnami, nagłówkiem oraz dodatkową nawigacją, zaczniemy od stworzenia tych elementów.

1. Uruchom nowy projekt w codesandbox
2. Stwórz podstawową strukturę pliku html.
3. W ciele dokumentu dodaj cztery puste divy. Kolejno nadaj im klasy: header, nav, col, col
4. Utwórz plik style.css
5. W nim dodaj regułę z selektorem tylko dla nagłówka (w naszym przypadku odwołanie do klasy “header”). Ustaw stałą wysokość na 50px. Ustawienie szerokości nagłówka na 100% nie jest konieczne, ponieważ jako element blokowy (div) domyślnie posiada taką właściwość.
6. Dodaj obramowania wszystkim elementom div poprzez selektor tagu, styl border: 6px solid red;
7. Trochę teorii… Dodajmy nawigację, która znajdzie się po lewej stronie. Powinna mieć stałą szerokość oraz aby dostosowywała się po zmianie wysokości podglądu. Jeżeli nadamy lewej nawigacji wysokość 100% to wyjdzie ona poza widok i pojawi się przewijanie całej strony czego chcemy uniknąć. Trafionym pomysłem będzie użycie metody CSS calc(); oraz jednostki vh.
   calc() umożliwia wykonywanie prostych obliczeń na podstawie tego co zostało wyświetlone przez przeglądarkę,
   vh to jednostka wysokości okna, np. 100vh rozumiemy jako całą wysokość okna naszej przeglądarki (analogicznie jednostka dla szerokości okna vw). W naszym przypadku ustawiając wysokość nawigacji, weźmiemy wysokość okna i od niej odejmiemy wysokość górnej belki w następujący sposób: height: calc(100vh – 50px);
8. Aby nagłówek stał się bardziej przejrzysty, ustaw kolor ramki na dowolnie przez siebie wybrany.
9. Dla nawigacji również ustaw indywidualny kolor.
10. Do tagu diva dodaj właściwość box-sizing: border-box; Dzięki temu wszystkim divom zostaną usunięte domyślne marginesy.
11. Nawigacje ustaw na 40px szerokości.
12. Tak jak wyżej opisałem, ustaw wysokość nawigacji używając metody CSS calc(): height: calc(100vh – 50px);
13. Dodatkowo dodaj właściwość do nawigacji: float: left; aby nie blokowała przyszłym elementom kolumnowym.
14. Następnie zajmiemy się kolumnami wywołanymi powyżej na tapetę. Założenia dla kolumn są następujące: wysokość kolumn ma być taka sama co nawigacja, obie mają mieć taką samą szerokość oraz muszą wykorzystywać całą dostępną szerokość. Do ustawienia szerokości posłużymy się sposobem podobnie jak z wysokością. Dla kolumn mamy stworzoną klasę “col”. Dopiszemy styl, w którym weźmiemy połowę szerokości całej strony (50vw) i odejmiemy od niej połowę szerokości lewej nawigacji (20px). Dlaczego tylko połowa nawigacji? Ponieważ mamy dwie kolumny. Gdyby była jedna to od całej szerokości okna odjęlibyśmy całą szerokość nawigacji czyli 40px.
15. Utwórz selektor klasy col. Wewnątrz reguły selektora dopisz właściwość: float: left;
16. Nadaj kolumnom wysokość taką samą jak nawigacji.
17. Wspomnianą szerokość w punkcie 14 ustaw w następujący sposób: width: calc(50vw – 20px);
18. Zawartość kolumn uzupełnimy tekstem. Dodajmy przykładowy długi tekst (taki aby nie mieścił się w kolumnach). Nowa właściwość którą poznasz to overflow. Pozwala ona określić jak ma się zachowywać kontener jeśli zawiera więcej niż jest w stanie pomieścić. Właściwość może przyjmować następujące wartości: visible (domyślna wartość) – jeśli tekstu jest za dużo to wystaje po za kontener, scroll dodaje zawsze pasek przewijania dla każdej osi niezależnie czy jest potrzebny, auto dodaje pasek przewijania treści tylko wtedy kiedy trzeba, a więc gdy zawartość wystaje z elementu, hidden chowa pasek i ukrywa zawartość która wystaje z kontenera. 
19. W pierwszej kolejności w pliku CSS dodaj do ciała dokumentu overflow: hidden; aby wyłączyć możliwość przewijania całej strony oraz umożliwić kolumnom ustawienie się obok siebie. Nadaj kolumnom padding: 10px; automatyczne dodawanie paska przewijania, jeśli tekst wystaje poza kontenery kolumn, tzn. overflow: auto; 
20. Efekt powinniście uzyskać taki jak w ukrytej odpowiedzi😉