Szkic prostego układu
- górnej belki – zawiera ona zazwyczaj logo lub tytuł witryny,
- nawigacji – menu strony z podziałem na podstrony,
- głównego kontenera – znajduję się w nim cała treść witryny,
- stopki – zawsze określam to na tak zwaną granice strony, tak jak znak informujący o kończącej się miejscowości😉
zen-hamilton-fqdkl
zen-hamilton-fqdkl by danielminschinski
Nawigacja – na lewo patrz!
Powyżej stworzyliśmy klocki w HTML-u. Czas je trochę poukładać. Można umieścić menu z lewej strony. Metody na to są różne. Jednak najprostszą w tym przypadku będzie wykorzystanie float: left; dla elementu po lewej stronie wraz z ustawieniem stałej szerokości tego elementu.
Natomiast obszar treści po prawej stronie będzie wypełniał na szerokość przestrzeń, jednak należy mu wtedy nadać też lewy margines o szerokości lewego elementu, aby wpasował się w pozostałą przestrzeń.
Dodatkowa informacja – oba te elementy HTML powinny być zagnieżdżone w dodatkowym div-ie, aby pływający element nie najeżdżał na nagłówek lub stopkę.
Spójrz na poniższy przykład
mystifying-heyrovsky-bqbum
mystifying-heyrovsky-bqbum by danielminschinski
Wyśrodkowanie i zwężanie kolumny
Ćwiczenie
- Uruchom codesandbox.
- Stwórz nowy projekt oraz szkielet strony.
- W ciele dokumentu dodaj diva z klasą “header” z zawartością tekstową “Header“.
- Pod nim dodaj kolejnego diva z klasą “container”. W nim dodaj diva z klasą “nav” z zawartością tekstową “Navigator”.
- Następnie pod nawigacją w kontenerze dodaj kolejnego diva z klasą “content”. W nim umieść nagłówek h1 z zawartością “Content”. Pod nim w divie “content” dodaj kolejnego diva z klasą “text”. Dodaj przykładowy akapit. Pozamykaj wszystkie powyższe divy.
- Równorzędnie pod divem “container” dodaj kolejnego diva z klasą “footer” z zawartością tekstową “footer”. Zamknij diva.
- W stylach utwórz regułę do znacznika div z następującymi właściwościami: border: 3px solid, text-align: center, padding: 3px, box-sizing: border-box.
- Do klasy “header” należy ustawić kolor obramowania: border-color: #2ccc2c
- Klasę “container” należy wzbogacić o właściwości: padding: 5px, width: 600px oraz margin: 0 auto;
- Stwórz kolejną regułę, tym razem do klasy nawigacji, a do niej dodaj właściwości: border-color: #9a2c9a, height: 400px, width: 120px oraz float:left
- Do contentu stwórz regułę z następującymi właściwościami: border-color: #ee8888, min-height: 600px, margin-left: 120px.
- Klasę “text” wzbogać we właściwości: border: none, padding: 0 20px oraz text-align: justify.
- Na koniec został oczywiście footer. Nadaj mu kolor obramowania na: #dd98af;
Do stałych czytelników – zauważyliście zmiany na moim blogu❓😉 Troszkę szatę zmieniłem… Posłuchałem kilka osób i zmieniłem na bardziej “nowoczesną”😃 Mile widziane opinie w komentarzach😉🔽🔽
Layout strony wyznacza nam elementy strony. Przyjęły się pewne schematy. Ale myślę, że z biegiem czasu zmieniać się będzie trend…
W kolejnym poście rozszerzymy o kolejne możliwości układania schematu strony💪
Do kolejnego posta✌
🔽🔽
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA