Układ strony (layout)
Problem: bloki jeden pod drugim
Domyslnie kazdy <section>, <header>, <footer> to display: block — kazdy na nowej linii.
Zeby ulozyc je obok siebie, uzywasz inline-block lub flex.
Metoda 1 — inline-block (najprostsza, najczesciej na egzaminie)
HTML:
CSS:
Uwaga: suma szerokosci musi byc <= 100%. Uwzgledniaj tez marginesy.
Czesty blad: jesli miedzy tagami sekcji jest enter/spacja w HTML — przeglądarka doda odstep.
Rozwiazanie: zamknij tagi bez spacji:</section><section>albo ustaw rozmiary tak, zeby zostalo troche miejsca (np. 19% + 59% + 19% = 97%).
Metoda 2 — Flexbox (arkusze 2024-2025)
HTML:
CSS:
Typowe podzialy z egzaminow
| Arkusz | Podzial |
|---|---|
| 2021 (restauracja) | lewa 60% + prawa dopelnienie |
| 2022 (wedkarze) | lewa 55% + prawa 45% |
| 2023 (sklep) | lewa 35% + srodek 30% + prawa 35% |
| 2024 (firma IT) | logo+menu 50% + banner |
| 2025 (gry) | lewa 20% + srodek 60% + prawa 20% |
Pozycjonowanie — position
Obraz w tle za trescia (arkusz 2024 — motocykle)
z-index: wyzszy = na wierzchu. Ujemny = pod normalną trescia.
Nawigacja pozioma — menu
HTML:
CSS:
Responsive — media query (arkusz 2025)
@font-face — wlasne czcionki (gdy egzamin daje pliki .woff2)
display — wartosci do zapamietania
| Wartosc | Co robi |
|---|---|
block |
Zajmuje cala szerokosc, zaczyna nową linię |
inline-block |
Jak inline, ale mozna ustawic wymiary |
inline |
Plynie jak tekst, bez wymiarow |
flex |
Kontener flexbox — dzieci obok siebie |
none |
Ukrywa element (znika z layoutu) |