Elementy “pływające”
Tworząc layout strony, często musimy zdecydować czy dany znacznik blokowy ma pojawić się po prawej czy lewej stronie. Do określenia takiego położenia z pomocą przychodzi właściwość CSS – float, z ang. pływać, unosić.
Możemy go ustawić w trzech konfiguracjach:
- none – wartość domyślna, element nie przesuwa się w żadną stronę,
- left – maksymalne przesunięcie elementu w lewą stronę,
- right – maksymalne przesunięcie elementu w prawą stronę.
Ustawienie blokowemu elementowi HTML właściwości float: right; sprawi, że uzyska on częściowo cechy elementu liniowego oraz przesunie się maksymalnie jak tylko może w prawą stronę. Trzeba dodać, że element zachowa cechy blokowe takie jak np. wysokość.
Poniżej dodaję przykład z zastosowaniem właściwości float:
jolly-grass-z84we
jolly-grass-z84we by danielminschinski
Dwie kolumny na 100%
Nasza nowo poznana właściwość świetnie się nadaję, aby ustawić dwa elementy HTML (najczęściej blokowe) obok siebie i zajmowały razem 100% szerokości naszej strony. Spójrz na przykład:
cocky-sky-szbw4
cocky-sky-szbw4 by danielminschinski
Właściwość “clear”
Przedstawiłem dobre strony właściwości “float”. Czas na tą drugą stronę. Float’y mają wadę. Zdarza się, że elementy “pływające” wystają poza kontener czyli element nadrzędny, co wygląda czasem jak błąd. Więc praktycznie, każdy kto korzysta z “float” używa również właściwości CSS – “clear”.
Właściwość “clear” określa, z której strony element blokowy nie ma przylegać do wcześniejszych pływających elementów blokowych.
W prawie 100% stron tworzy się dwie reguły zaczynające się od “clearfix” widoczne w poniższym przykładzie. Rozwiązują one problem wystających poza kontener pływających elementów:
vibrant-edison-icncr
vibrant-edison-icncr by danielminschinski
Obraz z oblanym tekstem
Z właściwością float jesteśmy w stanie określać położenie obrazków – prawa bądź lewa strona. Uzyskujemy efekt “oblanego tekstem” obrazka.
Wystarczy przypisać w CSS (dla taga bądź klasy) obrazkom właściwość wspomnianą powyżej z wartościom określającą położenie.
Czas dla Was – poniżej dodaję małe ćwiczenie do wykonania😉
Ćwiczenie
- Stwórz nowy projekt w codesandbox.
- Dodaj podstawowy szkielet strony z podłączeniem linka do styli.
- W ciele strony dodaj diva z klasą “container”.
- Wewnątrz powyższego diva dodaj obrazek z internetu za pomocą znacznika img
- Pod obrazkiem dodaj akapit z przykładowym tekstem.
- Następnie dodaj ponownie inny obrazek z internetu.
- Pod obrazkiem dodaj akapit z przykładowym tekstem.
- Utwórz regułę do klasy “dog_1”. W niej dodaj szerokość na 200px, float na lewo i margines na 15px.
- Dla klasy “dog_2” powtórz regułę z właściwościami z powyższego punktu (jedyna zmiana – float ustaw na prawo).
O rozmieszczaniu elementów będę jeszcze wiele razy poruszał na moim blogu. Powyższe informację to podstawy.
W następnym poście zbudujemy prosty layout strony💪👍
A oto bonus który wyszczególniłem w tytule posta – ostatnio dostałem propozycję uczestniczenia w programie partnerskim w firmie nazwa.pl. Zajmują się hostingiem między innymi stron internetowych. Zauważyli ruch na moim blogu, więc stwierdzam że idziemy w dobrą stronę😉
Szczególnie dla Was to dobra informacja, ponieważ dzięki ▶voucherowi macie 20% rabatu na wykup nowej usługi na ich platformie. Tak więc, jeśli Wy bądź Wasi znajomi zamierzacie zakładać hosting i tworzyć nową stronę www to polecam skorzystać z promocji😉
Tak jak zawsze polecam zapisać się do newslettera aby na bieżąco być z materiałem na moim blogu😉
Do następnego posta❕
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA