O szablonach, ich projektowaniu i moich z tym zmaganiach...

Wpisy z tagiem: margin

poniedziałek, 26 listopada 2012

Różnych szerokości w szablonie blogowym jest bardzo dużo. Do najważniejszych moim zdaniem należą: szerokość tła części tytułowej, szerokość całego bloga i szerokość dostępnego miejsca w treści notki (np na ilustracje). Każda z nich jest oczywiście inna ale także każda z nich uwzględniać musi nieco inne cechy. Na koniec notki postaram się przybliżyć bardziej szczegółowo te trzy konkretne przypadki ale zacząć muszę od bardziej ogólnych informacji.

Na szerokość składają się wszystkie wartości cech związanych z szerokością i ustawieniami bocznych fragmentów szablonu. Generalnie cała szerokość to CAŁA szerokość a nie tylko wartość width.

CAŁA SZEROKOŚĆ = margin + border + padding + width

zależności między margin border padding i width

Mam nadzieję, że ta ilustracja pomoże zrozumieć zależności. Jak widać na obrazku width to tylko i aż szerokość przeznaczona na zawartość. Zawartością może być nie tylko zwykły tekst ale także ilustracje czy inne elementy i te elementy też mogą mieć opisane marginesy, dopełnienia i ramki.

Po co to wszystko? Ano po to aby ładnie wyglądało. Aby tekst nie dotykał ramki, aby elementy miały łady odstęp, etc. Pamiętaj jednak, że elementów na blogu jest dużo i nie ma potrzeby utrudniać sobie życia aż nadto. Dlatego też opisuj te cechy tylko wtedy gdy to konieczne.

#BlogGlownyBox

Wpisz width przy szerokości całego bloga, pozwoli ci to wygodniej układać elementy jeżeli zechcesz je pozycjonować absolutnie.

Margin jest niekonieczny, szczególnie jeżeli chodzi o wartości w poziomie. Zostawiając go jako auto pozwalasz aby cały blog wyświetlał się na środku okna przeglądarki. Określając jakąś wartość sprawiasz, że staje się odpowiednio przyklejony do bocznej krawędzi okna przeglądarki.

Wpisując padding musisz natomiast pamiętać, że dopełnienie przy tym elemencie dotyczyć będzie nie tylko treści bloga ale i jego części tytułowej. Jeżeli chcesz aby ilustracja umieszczona jako tło tytułu wyświetlała się dokładnie od krawędzi do krawędzi po powinnaś unikać w tym miejscu dopełnienia.

Border jest już elementem bardziej dekoracyjnym więc czy jest czy go nie ma to kwesta estetyki.

całkowita szerokość bloga

Wszystkie powyższe cechy wpisane przy selektorze #BlogGlownyBox stanowią o całkowitej szerokości bloga. Generalnie ma to średnie znaczenie jeżeli blog jest mniejszy niż okno przeglądarki. Gorzej jest w drugą stronę.

To, że okno twojej przeglądarki wyświetla się na ekranie rozdzielczości 1366px nie znaczy, że wszyscy tak mają. A nawet jeżeli mają zazwyczaj to nie znaczy, że zawsze. Ja przykładowo bardzo lubię małe mobilne komputery: netbooki i tablety. Uważam, że to tanie i całkiem praktyczne rozwiązanie dla kogoś kto nie jest permanentnie przyklejony do komputera ale chce mieć go tylko dla siebie. Takie maleństwa często korzystają z rozdzielczości 1024px.

Szerokość ekranu (tzw. rozdzielczość) musi zostać pomniejszona o ewentualny suwak z boku. Jego szerokość zależna jest od przeglądarki czy systemu trudno więc określić z absolutną pewnością ile miejsca zajmie. Bezpiecznie będzie zarezerwować na suwak 20-30 pikseli.

Dlatego chociaż szerokość szablonu zależna jest od projektu to staram się nie robić szablonów szerszych niż 995px - chyba że korzystam z media queries (m.in. szablon zależny od szerokości okna przeglądarki). Nie jest to jednak imperatyw czy jakaś wiedza tajemna, którą przekazano mi w wąskim kręgu zainteresowanych. Ot moja logika.

#BlogTytulBox

Określanie szerokości nie jest tu niezbędne jeżeli jest ona określona w #BlogGlownyBox albo innym elemencie nadrzędnym dla tytułu. W zależności od szablonu bazowego może to być właśnie #BlogGlownyBox albo #BlogSzerokaSzpalta. Aby to określić musisz zerknąć do źródła strony (Ctrl+U) albo sprawdzić z jakiego szablonu podstawowego korzysta twój projekt.

Brzmi to może trochę skomplikowanie ale wcale takie nie jest. Część tytułowa bloga umieszczona jest albo nad całością treści bloga albo tylko nad jedną ze szpalt. W moich szablonach najczęściej korzystam z szablonów podstawowych bloksa które mają tytuł bloga nad całością.

szerokość elementu tytułowego

Jeżeli nie chce Ci się liczyć to spróbuj na oko. Albo zrób sobie zrzut ekranowy (PrtSc) i przytnij go do wielkości jaka się spodziewasz, że tytuł ma. Jeżeli wcześniej zmienisz kolor tła tytułu na czerwony to już w ogóle będziesz mieć pewność, że to są faktyczne wymiary.

Szerokość łatwo jest policzyć. To prosta arytmetyka tylko trzeba sprawdzić odpowiednie selektory. Wysokość tytułu natomiast jest trudniejsza do określenia. Jeżeli jest wpisana (height) to fajnie, dodasz do tego tylko dopełnienie górne i dolne jeżeli są wpisane i po sprawie. Jeżeli element nie ma wpisane height to masz problem, który w zasadzie można rozwiązać tylko na oko bo zależny jest od wielkości kroju tytułu a ten może być różny w zależności od wyświetlanego fontu.

Aby policzyć szerokość zobacz co wpisane jest przy width elementu nadrzędnego dla boksu tytułowego (jak wspomniałam wcześniej najczęściej będzie to #BlogGlownyBox ale zdarzyć się też mogą projekty z innym szablonem podstawowym i wtedy elementem nadrzędnym może być jedna ze szpalt). Zacznij teraz odejmować od tej wielkości wszystkie wielkości, które napotykasz po drodze do elementu tytułowego.

  • Jeżeli tytuł bloga umieszczony jest nad całością treści to sprawa ułatwiona bo w grę wchodzi tylko margines części tytułowej. 
  • Jeżeli tytuł bloga umieszczony jest w którejś ze szpalt liczenia może być nieco więcej ale jeżeli opisana jest szerokość szpalty w której umieszczony jest tytuł to tutaj zaczynasz (szeroka to oczywiście #BlogSzerokaSzpalta a wąska to #BlogWazkaSzpalta) i jak wyżej odejmujesz tylko margines części tytułowej.

Jeżeli w #BlogTytulBox wpisany jest width to wystarczy, że dodasz to tego padding tego elementu i już wiesz ile miejsca zajmować mógł będzie obrazek w tle.

wizualizacja wizualizacja

#BlogBodyBox

Ten element nieco trudniej określić bo zależny jest od szablonu. Ja najczęściej używam jako bazy szablonu Spokojnego albo Białego. One oba mają część tytułową bloga umieszczoną nad wszystkimi elementami treści zarówno głównej jak i pobocznej. Nie wszystkie jednak szablony tak mają. Część tych na starym kodzie tytuł bloga ma umieszczony w szerokiej szpalcie a więc i w elemencie #BlogBodyBox. O ile nie zaznaczę inaczej moje opisy dotyczą szablonów bazowych, które część tytułową mają umieszczoną poza elementem #BlogBodyBox (czyli nad całością treści).

Proponuję nie wpisywać width przy tym elemencie. Jeżeli jest już przy #BlogGlownyBox to o ile nie ma konkretnego powodu to lepiej nie utrudniać sobie życia i zostawić element #BlogBodyBox w spokoju.

W zależności od projektu graficznego użycie padding albo margin będzie bardzo przydatne.

#BlogSzerokaSzpalta

Jeżeli szablon jest bardzo prosty graficznie to wystarczy opisać tutaj width. O ile następne, zawierające się w szerokiej, elementy nie będą miały opisanych żadnych cech związanych z szerokością to width wpisane tutaj będzie jednocześnie szerokością dostępną dla treści wpisów (czyli także maksymalną szerokością ilustracji w notce).

Bardzo często opisuję przy tym selektorze margin. Szpalty nie powinny się stykać zarówno z sobą jak i z krawędziami bloga (jeżeli krawędzie są widoczne). Odstęp dodaje oddechu, uspokaja całość i sprawia, że ze strony przyjemniej się korzysta.

To czy do zapewnienia odpowiedniego odstępu pomiędzy elementami użyję marginesu (margin) czy dopełnienia (padding) zależne będzie od projektu, od tego w jaki sposób zamierzam operować tłem.

Określenie szerokości i odstępów jest istotne w przypadku tego elementu. Teoretycznie określenie szerokości całego bloga zapewnia, że bez względu na szerokość ekranu blog będzie zachowywał określoną stałą szerokość. Wpisanie width przy szerokiej szpalcie zapewnia natomiast właściwe proporcje pomiędzy wąską a szeroką szpaltą. Bez tego ich szerokość ustala przeglądarka w zależności od zawartości.

szerokość miejsca na treść w notce

To chyba najtrudniejszy element do wyjaśnienia. Nie dlatego, że jest w tm coś skomplikowanego ale dlatego, że wyjaśnienia nie da się zamknąć w jednym zdaniu.

Trzeba znaleźć najbliższy element nadrzędny który ma jasno zdefiniowaną szerokość i od tego momentu odejmować wszystkie piksele, które trafiają się po drodze. Tyle jeżeli chodzi o jednozdaniowe wyjaśnienie.

Bardzo często będzie tak, że szerokość szerokiej szpalty (width) będzie jednocześnie szerokością dostępnego miejsca na treść w notce a więc i na ilustracje czy filmiki. Jeżeli jakieś wartości trzeba będzie odjąć to najczęściej będą to dopełnienia i ramki przypisane bezpośrednio ilustracji. W arkuszu szablonu wszystkie te rzeczy mogą być opisane w różnych miejscach więc trzeba się nieco porozglądać.

szerokość miejsca na treść w notceAby wiedzieć czego szukać przedstawiam ilustrację prezentującą zagłębienie treści notki (w sumie to nie mam pojęcia jak to nazwać, mam nadzieję, że słowo zagłębienie wam tutaj pasuje i jest zrozumiałe). Bez względu na szablon bazowy (na starym kodzie) treść notki wgląda z grubsza tak samo.

Wygląda jakby tego było bardzo dużo ale tak nie jest. Zazwyczaj szeroka szpalta ma określona cechę width. Czasami cały boks wpisu może mieć jakiś margines czy dopełnienie ale wcale nie musi. Jeżeli ilustracje we wpisie mają widoczną ramkę to zapewne jest ona w jakiś sposób opisana w szablonie więc jeżeli jest to dopełnienie czy ramka to liczymy te piksele. Jeżeli jest to natomiast cień to nie musimy się nim przejmować - ona nam miejsca nie zabiera.


I to by było na tyle ogólnych informacji o określaniu szerokości bloga i jego poszczególnych części. O wspomnianych cechach CSS napiszę jeszcze przy innej okazji, o selektorach przy których warto opisywać szerokość piszę stronę statyczną, jak będzie gotowa to się nią podzielę. Tymczasem polecam inne powiązane z tematem szerokości wpisy i strony z tego bloga:

Zakładki:
O blogu i RSSsubskrybcja
Polecane wpisy z blogu
Pomocne
Przeglądarki
Katalogi szablonów
Polecane strony
Szablony z dedykacją
o CSS (notki z tego bloga i podobnych bloksowych)
o arkuszach stylów ogólnie (CSS) dla poczatkujących,
głównie zewnętrzne podręczniki
o CSS (przydatne podpowiedzi) dla średniozaawansowanych
- specyficzne rozwiązania
- jak reagują przeglądarki
Historia polecanych
Kolory
Pismo
Polecane artykuły
ilustrowany przewodnik po bloksie dla początkujących,
dla zielonych jak szczypiorek na wiosnę,
dla zaczynających bloksowanie
Tagi
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...