Zrób ze mną szablon #3

Cześć wam wszystkim! Nadszedł czas na najnowszy odcinek instruktażowy o robieniu bloga. Dziś dowiecie się, jak prosto rozplanować przestrzeń na blogu i poprzestawiać elementy.

Osoby, które czytają instruktaż po raz pierwszy zapraszam do poprzednich części.

Po tym odcinku instruktażowy blog będzie miał już konkretny, zwarty kształt. Gotowi? To lecimy!

1. Przesuwanie elementów

Pierwszym, co dziś zrobimy będzie przesunięcie prawej kolumny bloga do samego obszaru, w którym znajduje się treść bloga. Zapewni nam to zlikwidowanie luki pomiędzy oboma elementami, co (w moim odczuciu) wygląda estetycznie. Do wykonania tego zabiegu potrzebować będziemy selektora odpowiedzialnego za lewą kolumnę oraz atrybutu dotyczącego pozycji. Gotowi? To do dzieła!

Selektor dla całej prawej kolumny (ważne! Nie ten dla widżetów! Interesuje nas lokalizacja całej kolumny, zatem wybieramy wariant z określeniem całości!) to .column-right-outer. Kolejną z niezbędnych nam rzeczy, jak już wspominałam, jest pozycja. Określamy ją jako position. Naszym określeniem w tym przypadku będzie „pozycja: relatywna”, co zagwarantuje nam, że lokalizacja kolumny w stosunku do pozostałych elementów (treść bloga, nagłówek) pozostanie zawsze taka sama, niezależnie od tego, w jak rozsuniemy szerokość elementu. Ale o tym za chwilę. By zaoszczędzić sobie zbędnego powtarzania selektora (używaliśmy go już przy ustalaniu tła kolumny w odcinku drugim), dodamy do niego średnik ustalając kolejny parametr.

Kod dla tego elementu wygląda w tej chwili tak:

.column-right-outer{background: #051832; position: relative}

By przesunąć element musimy określić, w którą stronę chcemy to zrobić. Mamy dostępne 4 warianty: góra, dół, prawo i lewo. Wartości w jakich określamy przesunięcie wyrażamy w pikselach (wartości mogą być ujemne!). Dla naszych potrzeb musimy przesunąć kolumnę w lewo. By to wykonać proponuję użyć pozycji lewej, a wartość wyrazić w minusowej liczbie. Atrybut, jakiego użyjemy tym razem również zostanie wpisany w ten sam selektor, naturalnie oddzielony średnikiem. Sprawdziłam i wyszło, że odległość między elementami wynosi 16px. Jeśli nie znamy odległości, polecam sprawdzać metodą prób i błędów, wpisując np. 10px i dodawać ich i ujmować, w zależności od oczekiwanego elementu.

Kod wygląda teraz tak:

.column-right-outer{background: #051832; position: relative; left: -16px}

a efekt, jaki uzyskaliśmy na blogu tak:

Teraz zajmiemy się dostosowaniem szerokości naszego bloga. Docelowo chciałabym, aby kolumna boczna wychodziła poza obszar właściwy bloga, rozpoczynając się równo z nagłówkiem. Nie mogę tego jednak wykonać, dokąd nie uzyskam odpowiedniej szerokości bloga. Najprościej posłużyć się tu nie CSS'em, a suwakiem, udostępnianym przez bloggera. Dlaczego tak? Otóż im mniej mieszamy w kodzie, tym mniejsza szansa, że on się zepsuje. Dla naszego szablonu ustawienie szerokości całego bloga wynosić będzie 1050px, zaś kolumny bocznej 310px.

Mamy? Świetnie! Lecimy dalej.

2. Zmiana pozycji przy pomocy marginesu

Blog nadal jest niespójny. Nie wiem, jak wam, ale mi wcale nie podoba się ta luka pomiędzy nagłówkiem a resztą bloga. Jak to rozwiązać, by nie napisać się za wiele? Można zastosować pozycjonowanie relatywne, ale można też bezpieczniej: użyć marginesu ujemnego.

Aby przysunąć oba elementy (bloga i kolumnę) do nagłówka, użyjemy selektora odpowiedzialnego za całość elementów poza nagłówkiem: .main-inner. W wąsach wpiszemy teraz atrybut odpowiedzialny za margines, czyli margin, określając dodatkowo po myślniku, z której to strony margines chcemy edytować. W naszym przypadku to wartość górna, a zatem top. Odległość pomiędzy naszym „ciałem” bloga a nagłówkiem wynosi 30px, zatem niwelujemy ją liczbą przeciwną. Nasz kod dla tego działania wygląda tak:

.main-inner{margin-top: -30px}

Efekt, jaki udało nam się osiągnąć prezentuje się tak:

3. Przesunięcie w górę!

W końcu docieramy do przesunięcia naszej kolumny bocznej w górę! Wykonujemy to analogicznie do tego, w jaki sposób przemieszczaliśmy ją w bok, tylko tym razem posłużymy się atrybutem top, wklejonym do tego samego kodu. 

Doliczyłam się, że przesunięcie musi wynosić 417px, zatem kod dla lewej kolumny wygląda teraz tak:

.column-right-outer{background: #051832; position: relative; left: -16px; top: -417px}

a nasz blog tak:

Przysuńmy jeszcze pagera, by tak nie odstawał tam na dole. Wracamy do linijki opatrzonej selektorem #blog-pager i dopisujemy tam typ umiejscowienia oraz o ile i w którą stronę ma być przesunięty element.  Postępujemy w ten sam sposób jak i przy kolumnie, czyli po średniku dopisujemy dalszą część kodu. Nasz kod dla pagera to:

#blog-pager {background: #E6C43B; box-shadow: none; position: relative; top: -20px}

a blog jest teraz ładnie pozbierany:

4. „Wyciągnięcie” elementu z kolumny i umiejscowienie w innym miejscu

W tym podpunkcie omówię w jaki sposób stworzyć niezależny od kolumny element. Dla przykładu posłuży nam menu, którego elementy ustawimy po lewej stronie nagłówka. 

W tym przypadku będziemy musieli posłużyć się innym typem pozycjonowania (relatywne pozostawi nam lukę w miejscu dawnej lokalizacji elementu), a będzie to pozycja absolutna.

Selektor, jakiego użyjemy, to #PageList1 (element opisany u nas na blogu jako Menu). Pozycja absolutna rządzi się nieco innymi prawami niż relatywna, dlatego przy ustawianiu elementu warto wpisać w kodzie element, jaki utrzyma nam „na widoku” edytowany element. Później należy go usunąć. Artubut, o którym mówię, to z-index. Jego wartość wyrażamy w liczbie, bez jednostki. Dla potrzeb tego instruktażu przyjmuję wartość 5, wystarczającą dla potrzeb tego bloga. Im wyższa wartość tym „wyżej” nałożony zostanie element. 

Wpiszcie na razie:

#PageList1 {position: absolute; z-index: 5; top: 0px; left: 0px}

Powinniście widzieć coś takiego:

Teraz już tak poza tym instruktażem, dla celów naukowych. Usuńcie z-index i zwróćcie uwagę, co się stało. Tak, elementu nie widać. Pozycjonowanie absolutne odrywa nam element, ale i zarazem wrzuca na dno, czyli tuż ponad tło. Gdy przesuniemy odpowiednio element nie będzie nam już potrzebny, jest teraz tylko roboczy. Przywróćcie index i zmieńcie pozycję na relatywną. Przesuńcie element np. o -500px w lewo. Widzicie lukę? Mam nadzieję, że już rozumiecie, dlaczego tak, a nie inaczej wygląda nasz kod ;).

Ok, wracamy do powyżej podanego kodu wyjściowego. Teraz dość zabawy i ustawiamy menu zgodnie z naszymi oczekiwaniami, zatem „przyklejamy” go do lewej strony nagłówka. Trzeba go też jakoś racjonalnie względem góry, ale to już umiecie zrobić, prawda? Bawimy się „topem” i „leftem”, uzyskując pożądany efekt. Po ustawieniu usuńcie index, gdyż nie jest już potrzebny ;). Mój kod wygląda teraz tak:

#PageList1 {position: absolute; top: 70px; left: -828px}

a blog tak:

Na tym zakończę tę część instruktażu. Pobawcie się tym, czego dziś się nauczyliście, posprawdzajcie możliwości i do następnego! W czwartej części zajmiemy się czcionkami, linkami i płynnymi przejściami! Do zobaczenia!