Marginesy i widgetId, czyli pozycjonowanie pojedynczego gadżetu

Znajdujesz piękny szablon; masz gwiazdki w oczach, chociaż patrzysz na niego nieprzerwanie od trzech kwadransów. Pobierasz go, wgrywasz według instrukcji… Niestety, efekt nie jest taki, na jaki liczyłaś. Ramki są „rozjechane”, gadżety z kolumn bocznych wpychają się na tło, które miało znajdować się pod postami. Niby wyśrodkowałaś całą kolumnę komendą „text-align: center”, jednak jeden widget jest zbyt szeroki, co ujmuje Twojemu blogowi na estetyce. Jak to naprawić samemu?

Magiczne słowo: margin.

Przygotowałam obrazek pomocniczy <tutaj>.

Marginesy, które tu zaznaczyłam (oprócz żółtego – znajdował się on o wiele niżej, troszkę go przesunęłam do góry, żeby go pokazać na obrazku), okalają mniej-więcej miejsce, w którym wyświetlają się posty. Można to porównać do ścianek pudełka, które nie pozwalają wysypać się zawartości.

Dużą czcionką wypisałam części komendy, które wpływają na odpowiedni margines. Nie trudno zgadnąć, że zielony napis to komenda wpływająca na pozycję zielonego marginesu, żółty napis na umiejscowienie żółtego itp :)

Strzałkami (ale one koślawe, następnym razem skopiuję skądś jakieś) zaznaczyłam kierunek, w którym poruszy się margines, jeśli wpiszemy w komendzie wartość dodatnią. Np. jeśli do dodatkowego arkuszu CSS wstawimy komendę {margin-left: 20px}, to margines lewy (zielony) poruszy się o 20 pikseli zgodnie z kierunkiem zielonych strzałek.

Patrząc na obrazek pomocniczy, margines zielony można opisać jako {margin-left: 0px} – od początku stał w tym miejscu, nic z nim nie robiłam, więc ma wartość zero. Mi tak pasuje, ale jeśli chcielibyśmy, żeby tekst postu wyjechał na tę szarą teksturę, powinniśmy wpisać wartość ujemną. Margines poruszy się wtedy w kierunku przeciwnym, niż wskazujące strzałki (np. {margin-left: -12px}).

A co, jeśli chcesz też przesunąć prawy margines? Jak zapisać to w komendzie?

{margin-left: -12px; margin-right: 12px}

Polecenia oddzielamy średnikiem. Nie ma różnicy w zapisie:

{margin-left: -12px; margin-right: 12px}

oraz

{margin-left: -12px; margin-right: 12px;}

Polecenia dotyczące marginesów można zapisać na kilka sposobów:
1. Wypisanie wszystkiego osobno.
Przykład:
{margin-left: 20px; margin-right: 15px; margin-bottom: 200px; margin-top: 30px}

Jak widać, margines przesunie się o 20px z lewej, 15px z prawej, 200px z dołu i 30px z góry. Mamy wszystko jak na dłoni, dlatego ja zawsze to zapisuję w ten sposób – żebym później nie plątała się, jeśli będę chciała zmienić parametry.

2. Tylko jedna cyfra.
Przykład:
{margin: 40px}

Parząc na samo słowo „margin” nie jesteśmy pewni, które marginesy się poruszą. Odpowiedź brzmi: wszystkie. Każdy margines przyjmie wartość 40px i przesunie się zgodnie z kierunkiem narysowanych strzałek (chyba, że damy wartość ujemną).

3. Tylko dwie cyfry.
Przykład:
{margin: 20px 12px}

Tu już prościej będzie zgadnąć (chyba). Pierwsza wartość (20px) odpowiada za margin-top i margin-bottom. Druga oddziałuje na położenie margin-left oraz margin-right.

4. Trzy cyfry.
Przykład:
{margin: 12px 20px 28px}

Pierwsza wartość odpowiada za górę, druga za lewo i prawo, a ostatnia za dół.

5. Cztery cyfry.
Przykład:
{margin: 15px 20px 0px 30px}

Na pewno się domyślacie, że każda wartość oznacza osobny margines. Gwint w tym, iż niektórym może być trudno zapamiętać kolejność: góra (15px), prawo (20px), dół (0px), lewo (30px).

Sama korzystam tylko ze sposobu pierwszego. Chociaż formułka jest szeroka jak wrota od stodoły i trzeba wszystko napisać osobno, to wiem przynajmniej, co opisuję. Nie muszę się też martwić o kolejność – nie ma znaczenia czy napiszę {margin-left: 12px; margin-right: -10px}, czy {margin-right: -10px; margin-left: 12px}.

Dobra, dobra, ale… Jak zastosować to pieroństwo do tylko jednej rzeczy na blogu?

Koniec z głupawą teorią, zaczyna się instrukcja bardziej obrazkowa. Ostatnio musiałam poprawić marginesy na swoim blogu, toteż spisywałam wszystko na bieżąco. Mam dwa przykłady do pokazania działania marginesów.

I. Dopasowanie ramki z postem do szablonu, znajdywanie ID wybranego elementu.

Spójrzmy na ten obrazek <tutaj>.

Nie ukrywajmy, marginesy są w nim spartolone. Zrobiłam sobie tło – myślę: „na tym czarnym będę pisała posty, a to białe będzie taką ramką. Tu z boku walnę suwak, żeby mi się przewijał post w tym czarnym tle”. Jak pomyślałam, tak zrobiłam, ale, oczywiście, wszystko wyszło niedopasowane. Tytuł posta (zakreślone na pomarańczowo) wyjechał mi prawie do połowy na ramkę. A suwak… (zaznaczony zielonym) Nie dość, że jego część wystawała na górze, to jeszcze był za daleko od prawej krawędzi czarnego tła (przez co zrobił się brzydki czarny pasek obok).

1. Na samym początku musimy wiedzieć jak nazywa się element, który jest nieładnie ustawiony. Każdy gadżet ma przypisane inne Id. Zalecam sprawdzenie Id elementu przed zabraniem się do pracy, ponieważ nie jest ono zawsze takie samo. Widget z postami mamy zazwyczaj jeden, ale jeśli wstawimy cztery gadżety ze zdjęciami, to każde będzie miało inną nazwę.

Wchodzimy w układ naszego bloga i widzimy rozmieszczenie wszystkich elementów. Mnie nie interesuje nic innego jak miejsce z postami – muszę naprawić ustrojstwo.

Popatrzmy… <tutaj>.

Najeżdżamy kursorem na słowo „Edytuj” (ale nie klikamy!). Na samym dole przeglądarki wyświetli nam się długaśny adres, który prowadzi do trybu edycji tego elementu, ale nam zależy na wyłapaniu frazy: „widgetId=Blog1”. Zapamiętujemy więc, że nazwa tej ramki z postami to Blog1.

2. Skaczemy do Szablon -> Dostosuj -> Zaawansowane ->Dodaj arkusz CSS.

Teraz trzeba wpisać znaczek # i zaraz po nim nazwę elementu, z którym chcemy pracować. W moim wypadku: #Blog1

Następnie otwieramy klamerkę i dopisujemy wartości. Zastanówmy się, co wpisać. <Patrzajta tutaj>

Hm. Myślę, że najpierw zmienię sobie margines górny. To trochę jak przepełniona walizka. Nie chce się zamknąć, ale kiedy na niej usiądę (50 kg żywej wagi), to wszystkie ubrania wewnątrz się ścisną. Tak samo jak te ubrania, tak zawartość ramki przesunie się do dołu (a przynajmniej powinna).

Muszę jednak najpierw zacząć jakoś komendę, bo samo {margin-top: 14px} nic nie da. Trzeba sprecyzować, który obiekt ruszamy. Początek zawsze musi wyglądać tak:

#widgetID

W moim wypadku jest to:

#Blog1

Później musimy napisać co chcemy robić. Ja chcę zwiększyć odstęp górny.

#Blog1 {margin-top: 14px}

Wpisuję sobie różne wartości i sprawdzam poniżej, jak się mi to ustawia. Rezultat <tutaj>.

Zaznaczyłam już na czerwono, że interesuje mnie jeszcze ten margines z prawej, z którego winy mam taki szkaradny czarny pasek przy suwaku. Jeżeli jednak dam wartość dodatnią do polecenia „margin-right”, to cały post razem z suwakiem przemieszczą mi się w kierunku wskazywanym przez strzałki. Rezultat? Ta czarna znienawidzona kreska stanie się grubsza, a tego nie chcę. Dlatego dopiszę wartość ujemną, wtedy margines „cofnie się”.

#Blog1 {margin-top: 14px; margin-right: -4px}

Wynik <tutaj>

Pamiętajmy, aby na koniec dać „Zastosuj do bloga”, żeby zachować zmiany.

II. Mój nagłówek/obrazek napadły trolle i obcięły go w widocznym miejscu. Jak ja teraz bloga światu pokażę?

Ten problem czasami się pojawia; kiedy zobaczyłam to po raz pierwszy, to nie byłam zadowolona.

Robię sobie szablon. Myślę – „tło nieruchome, a w nagłówku rycerz z mieczem na przezroczystym tle”. Przez kadrowanie w arcie miecz rycerza został ucięty tuż przy wgłębieniu, to myślę znowu: „domaluję sama dalszą część, zrobię ten miecz tak długi, żeby patrzący widział go do samego końca ekranu”. Kończę więc pracę, wgrywam nagłówek na bloga, daję podgląd… <tutaj>

Y… Bad day, bad day... Jak się okazało, nagłówek miał już marginesy domyślne, w wyniku czego część po prostu wyglądała jak ucięta. W takim wypadku pozostaje poprawa odstępów.

1. Powtarzamy podpunkt 1. z punktu I. Znajdujemy Id nagłówka. U mnie jest Header1.

2. Wchodzimy w Układ -> Dostosuj -> Zaawansowane -> Dodaj arkusz CSS.

3. Wpisujemy komendę. W moim przypadku #Header1 {margin-right: -18px} załatwia sprawę, prawy margines cofa się i odkrywa ucięte części. Rezultat <tutaj>

Uwaga! Jeśli wpiszemy zbyt dużą wartość ujemną, to blog zacznie przewijać nam się w bok. Trzeba starać się znaleźć wartość „na styk”.

(Mam nadzieję, że komuś to pomoże. W razie pytań - walić śmiało. W razie problemów - też walić śmiało. Jeśli ktoś dotrwał aż do końca, to bardzo mi miło.)