Blog o stylowaniu bloksowych szablonów, tych na nowym kodzie. Szablony udostępnione bez ograniczeń i za darmo, porady, instrukcje i trochę lania wody z innej beczki. Zapraszam.
Wpisy otagowane „separator”
Na Smashingu kiedyś pojawił się wpis z galerią
, chyba właśnie wtedy zaczęłam doceniać i wykorzystywać ten element. Trudno dyskutować mi o jego celowości. Wszystko zależy od tego jak istotny dla danego użytkownika jest separator bo w gruncie rzeczy cel w dużej mierze zależy od użytkownika.
HTML5 mówi o hr jako o rozdzielaczu treści. Nie należy go oczywiście wstawiać po każdym akapicie, nie każda myśl musi być oddzielona od drugiej tak dosłownie. Czasami jednak zmieniamy nie tylko myśl ale cały główny watek, w takiej sytuacji hr sprawdzi się świetnie. Gdyby blog był książką a każda notka rozdziałem hr można by wstawić przy zmianie narratora, scenerii, punktu widzenia...
Nie dajemy natomiast hr nad nagłówkami h, one same w sobie sugerują nową myśl.
Ja najczęściej hr używam w sytuacji gdy rzeczywiście chcę wstawić linię. Rozdzielam w ten sposób ilustracje prezentujące szablony szczególnie jeżeli jest ich więcej niż jeden w notce. Zazwyczaj dodaję pod grafiką link tekstowy i chcę aby było jasne, że link ten dotyczy ilustracji nad nim a nie tej pod. Dlatego w tym miejscu hr wydaje mi się użyteczne.
Drugą sytuacją są przypisy. W zwyczaju jest gdy przypis jest na dole strony (w tym przypadku notki) nad nim umieścić poziomą linię. Przypisów w ścisłym tego słowa znaczeniu rzadko używam ale różne wyjaśnienia, dopowiedzenia, źródła, fragmenty nie na temat chętnie dodaję na koniec notki. Przed nimi umieszczam hr.
Wszystko oczywiście zależy od wybranego edytora w którym piszesz notki. W prostym tekstowym należy wpisać w wybranym miejscu. Zaawansowane mają do tego celu odpowiedni przycisk, który wygląda jak pozioma beleczka. Dokładniej i z ilustracjami (tak dla nawet bardzo zielonych) opisane jest to w notce Jak dodać rozdzielacz (poziomą linię) do notki?
Moje ulubione hr to aktualnie oczywiście to z bloga szablonykatemac.blox.pl, jest śliczne. Długo nie mogłam znaleźć takiego ornamentu, który byłby wystarczająco drobny aby nie narzucać się swoim wyglądem ale jednocześnie był czymś więcej niż kreseczką no i pasował do innych ozdobników na blogu. Jego opis w css wygląda dokładnie tak:
hr {
color:#ede4d5;
border:0;
padding: 0px 0px 25px 0px;
background: url(../resource/kate3_ipt.gif) no-repeat bottom center;
}
Znacznik hr, jak wiele innych, może mieć automatyczny wygląd przypisywany mu przez przeglądarkę. Otwierając stronę przeglądarka czyta kod naszej strony, zagląda do stylów i jeżeli na blogu używasz hr a nie masz jego wyglądu opisanego w css to przypisze mu go sama wedle własnego uznania (wygląd w poszczególnych przeglądarkach i ich wersjach może się nieco różnić).
Starsze wersje Internet Explorera hr określają kolorem (color) a nie kolorem tła (background-color) stąd też pewien problem z dokładnie takim samym jego opisaniem w tych starszych wersjach. Oczywiście jest na to stylowy sposób ale mówiąc szczerze nie zależy mi na dokładnie takim samym wyglądzie. W zupełności zadowoli mnie wyświetlanie w tychże starych wersjach poziomej linii w wybranym przeze mnie kolorze (color:#ede4d5;).
Tutaj aktualnie stosuję poziomą, jedno-pikselową przerywaną linię w kolorze beżowym, ciemniejszym nieco od tła. Wyglądem pasuje doskonale do nieco dłuższej, również przerywanej linii nad początkiem każdej notki. Jej opis w arkuszu stylów wygląda dokładnie tak:
hr {
color:#8f857c;
border:0;
border-top:1px dashed #8f857c;
}
Chcąc uzyskać bardziej nietypowy wygląd należy już sięgnąć po dodatki w postaci ilustracji. Jej tło powinno być albo przezroczyste (pliki png lub gif) albo dokładnie takie jak tło notek na blogu (jpg). Ja wolę transparentne, wydaje się wygodniejsze (przykładowo fragment tego samego pliku możemy wykorzystać jeszcze raz przy innej okazji nawet jeżeli ta okazja będzie miała inne tło). Proponuję taki kod css:
hr {
color: #ccc;
border:0;
padding: 0px 0px 25px 0px;
background: url(../resource/hr_separator.png) no-repeat bottom center;
}
Możliwości jest oczywiście więcej. Jeżeli preferujesz prostotę to najodpowiedniejsza będzie delikatna linia jeżeli natomiast lubisz rzeczy ozdobne albo chcesz w roli linii wykorzystać coś zabawnego to najlepiej jeżeli zdecydujesz się na obrazek. Konkurs na Smashing Magazine zaowocował wieloma liniami więc może tam coś dla siebie znajdziesz.
* Jeżeli ktoś nie chce jasnoszarego koloru ale nie wie jaki najlepiej będzie pasował do kolorystyki jego bloga proponuję takie rozwiązanie:
Pozioma linia to popularny kiedyś sposób rozdzielania treści. W nowoczesnym szablonie zdecydowanie zalecałabym użycie w celu rozdzielenia światła czyli pustej przestrzeni ale bawiąc się w staroświecki wygląd można zaszaleć i wybrać sobie jakąś ozdobną linię. Bez względu na to czy będzie to pusta przestrzeń czy zjadający kropki pac man, separator najlepiej dodawać korzystając ze znacznika hr. W HTML4 nie miał on zdefiniowanego celu ale już w opracowywanym właśnie HTML5 mówi się o nim jako o rozdzielaczu treści.
Nawet jeżeli przeglądarka będzie tylko tekstowa, notka będzie wyświetlana w czytniku korzystającym z własnych stylów albo nawet będzie czytana przez syntezator mowy istota poziomej linii jako rozdzielacza zostanie zachowana gdy użyjemy odpowiedniego znacznika. Dodatkowo zmieniając styl szablonu można łatwo zmienić i wygląd tejże poziomej linii bo jej wygląd może być wtedy częścią opisu szablonu a nie każdej pojedynczej notki.
Jeżeli chcesz się dowiedzieć jak wstawić separator to najpierw zdefiniuj jaki edytor notek używasz.
Hr czyli separator jest to element, który nie może posiadać treści. Można przypisać mu atrybuty ale raczej te z głównej grupy czyli dozwolone globalnie (global attributes - z góry przepraszam za tłumaczenie, jestem laikiem i moim nauczycielem jest internet więc proszę o wyrozumiałość). Atrybuty związane z wyglądem, które kiedyś przypisywało się hr, należy przenieść do arkusza stylów.
Aby w prostym edytorze dodać rozdzielacz (poziomą linię) należy wpisać znacznik <hr /> (nawias ostry otwierający - Hotel - Romeo - odstęp (spacja) - ukośnik (prawy, slash) - nawias ostry zamykający)
Jest to znacznik, który nie ma osobnego zamknięcia, można wpisywać tylko samo hr w ostrych nawiasach (html) ale ponoć poprawniej będzie (xhtml) jeżeli doda się jeszcze odstęp i ukośnik, który jest właśnie rodzajem zamknięcia w przypadku tagów typu void element.
Hr może mieć różne atrybuty ale jeżeli są związane z wyglądem to zaleca się ich opisanie w css. W zasadzie jeżeli konieczne okażą się atrybuty to najlepiej ograniczyć je do nazwy (id), klasy (class), tytułu (title) i ewentualnie stylu wewnętrznego (style). Najprościej jednak nic nie dodawać.
Aby w edytorze TinyMCE dodać poziomą linię należy kliknąć w przycisk wyglądający jak pozioma beleczka. Znajduje się on w drugim rzędzie po prawej stronie, pomiędzy zmianą koloru czcionki a dodawaniem indeksów.
Po kliknięciu wyświetli się okienko z ustawieniami hr. Nie należy nic tam wpisywać tylko kliknąć potwierdzenie Wstaw.
Aby w edytorze HTMLArea dodać poziomą linię należy kliknąć w przycisk wyglądający jak pozioma kreska. Znajduje się on w drugim rzędzie tuż przed dodawaniem linku.
Po kliknięcie od razu wstawia separator ale HTMLArea jest nieaktualizowanym (chyba) edytorem i niektóre jego działania mogą być przestarzałe. W przypadku hr dodaje on temu znacznikowi atrybuty związane z wyglądem, które powinny się znaleźć w css i w związku z tym, leżeli zdecydujemy się na jakiś oryginalny rozdzielacz opisany następnie w css to przy zmianie hr będziemy musieli to brać pod uwagę.
O ile nie opiszemy wyglądu hr w arkuszu stylów to będzie się on wyświetlał w sposób automatyczny czyli jako pozioma dość cienka linia. W zależności od rodzaju przeglądarki i jej numeru może być jakby wgłębiona.
Więcej o wyglądzie separatorów hr we wpisie: Rozdzielacze, dzielniki, separatory... wszystkie te ozdobniki w notce