kilka uwag o CSS
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ść CAŁA SZEROKOŚĆ = Mam nadzieję, że ta ilustracja pomoże zrozumieć zależności. Jak widać na obrazku 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.
|
STRONA GŁÓWNA | STRONA Z POJEDYŃCZĄ NOTKĄ | STRONA STATYCZNA |
nad wpisem | ||
data | etykieta "Blog > Komentarze do wpisu" | |
.BlogDataWpisu | #SkomentujBoxEtykieta | |
kontener z całym wpisem | ||
.BlogWpisBox | #SkomentujBox | #StatycznaBox |
tytuł wpisu | ||
.BlogWpisItemTytul | .TytulKomentowanegoWpisu h2 | #StatycznaTytul h2 |
należy pamiętać, że tytuł wpisu na stronie głównej jest linkiem | tytuł komentowanego wpisu może nie być umieszczony w tagu nagłówka i wtedy należy opisać ten selektor także w taki sposób .TytulKomentowanegoWpisu | |
treść wpisu | ||
.BlogWpisTresc | .TrescKomentowanegoWpisu | #StatycznaZawartosc |
jeżeli wpis podzielony jest na wstęp i treść to należy także opisać .WstepKomentowanegoWpisu | ||
informacje pod notką (IPT) | ||
.InfoPodTekstem | #InfoKomentowanegoWpisu selektor ten dotyczy tylko części z datą i autorem | |
powyższy selektor obejmuje elementy: .IPTczas | za elementy link do strony na której można skomentować notkę opisywany jest w selektorze | |
wąska szpalta | ||
#BlogWazkaSzpalta | #SkomentujWazkaSzpalta | #SkomentujWazkaSzpalta |
Moja tabelka porównawcza nie wygląda tak przejrzyście jak ta Eskey’a. Niestety pisanie instrukcji nie jest moją mocną stroną. Mam jednak nadzieję, że mimo wszystko uda się znaleźć w tej tabeli poszukiwane informacje.
Dzięki umieszczonej tam instrukcji dowiedziałam się jak wyświetlać dwa razy znak cudzysłowu w ramach blockquote. Cała sztuczka opiera się na dwóch grafikach z których jedną umieszczamy przy selektorze blockquote a drugą przypisujemy pierwszej literze tekstu z zwiększonym wcięciem.
Zakładam, że selektor blockquote znajduje się już w waszym CSS. Jeżeli nie to go dodajcie i opiszcie w sposób najbardziej wam odpowiadający. O blockquote już pisałam więc powtarzać się nie będę. Potrzebne nam dzisiaj właściwości to:
background: url(/resource/bq_zamykajacy.gif) no-repeat right bottom;
padding-left: 18px;
text-indent: -20px;
Jeżeli znajdują się w waszym CSS to będzie trzeba proporcjonalnie zmienić wartości. Tło background: url(/resource/bq_zamykajacy.gif) określa cudzysłów zamykający. Opisujemy go jako no-repeat right bottom czyli bez powtarzania umieszczone w prawym dolnym rogu.
Lewy odstęp (padding-left) i wcięcie tekstu (text-indent) potrzebne nam będą do cudzysłowu otwierającego. Odstęp odsuwa nam cały tekst od krawędzi a minusowe wcięcie gwarantuje, że gdy edytujemy pierwszą literę całość nadal będzie wyglądała tak samo.UWAGA: IE6 na którym m.in. sprawdzam swoje projekty zrobił mi tradycyjną niespodziankę i nie wyświetla prawidłowo cudzysłowu otwierającego. Zlikwidowanie text-indent poprawia sytuację. Jednak wtedy pozbywamy się wcięcia, które przy następnym kroku wykorzystamy do wyrównania całości. Jeżeli ktoś ma pomysł jak tego uniknąć to proszę o komentarz lub maila.
Pseudo-element :first-letter wspomniałam dawno temu przy okazji opisywania kilku właściwości tekstu i dzisiaj świetnie się sprawdzi. Ponownie wykorzystamy właściwości:
background: url(/resource/bq_otwierajacy.gif) no-repeat left top;
padding-left: 18px;
Tym razem grafikę umieścimy tradycyjnie czyli w lewym górnym rogu (left top). Lewy odstęp jest nam potrzebny aby grafika nie została zasłonięta przez pierwszą literę.
Teoretycznie powinnam już osiągnąć spodziewany efekt. Niestety tak się nie stało. Pseudo-element nie zadziałał. Po przeczytaniu komentarzy znalazło się rozwiązanie. Należy opisać pierwszą literę akapitu blockquote (blockquote p) a nie blockquote. I w takim wypadku aby grafika nie powtarzała się przy każdym akapicie należy zastosować zapis anulujący grafikę przy kolejnych akapitach (blockquote p ~ p).
blockquote {
margin: 15px 30px 15px 45px;
background: url(/resource/bq_zamykajacy.gif) no-repeat right bottom;
padding-left: 18px;}
blockquote p:first-letter {
background: url(/resource/bq_otwierajacy.gif) no-repeat left top;
padding-left: 18px;
padding-top: 5px;}
blockquote p ~ p:first-letter {
background: none;
padding: 0px;}
Efekt można obejrzeć sobie na blogu towarzyszącym Zobacz»
Podejrzewam, że efekt można osiągnąć w inny sposób. Macie jakieś pomysły?
Zakładki to jedna z najbardziej interesujących mnie rzeczy na blogu. Nie mam pojęcia dlaczego tak się dzieje ale skoro tak jest to dzisiaj ponownie wpis o wyglądzie zakładek. Nie będę dzisiaj czarować bo nie potrafię ale chciałabym zwrócić uwagę na pewien niezbyt często wykorzystywany selektor, mianowicie:
.PoziomDrzewa { }
Jak pisze na css.blox.pl
.PoziomDrzewa – to położenie całej zawartości folderów z zakładkami w stosunku do nazw tych folderów
W skrócie:
Z całą pewnością jest kilka ciekawych efektów jakie można uzyskać za pomocą selektora .PoziomDrzewa; ja chciałabym opisać jeden z nich: każdy folder zakładek w osobnej ramce. Uzyskamy dzięki temu nieco inny efekt niż w przypadku szablonów Connections czy Radioblox
Efekt można osiągnąć także inaczej ale mnie zależy na tym aby ramkom dodać graficzne ozdoby. Efekt można obejrzeć sobie tutaj »zobacz. O wyglądzie zakładek decyduje tam kilka elementów.
Do zrobienia osobnych "pudełek" na zakładki wykorzystany dwa selektory: .TytulFolderaZakladek i .PoziomDrzewa
wpisujemy | oznacza |
padding:15px 5px 0px 5px; | padding czyli wewnętrzny odstęp; w tym przypadku będzie to odstęp pomiędzy zawartością (czyli nazwą folderu) a ramkami; kolejność określania cechy powinna być taka: górny, prawy, dolny, lewy |
background: #e2e2e2 url(/resource/ws_top.gif) no-repeat top center; | tło; najpierw określamy kolor, w tym przypadku będzie to szary (#e2e2e2); następnie podaję adres grafiki górnej umieszczonej dzięki paddingowi nieco powyżej tekstu; "no-repeat" oznacza, że grafika nie powinna się powtarzać a "top center" że w boxie umieczsona jest u góry, na środku |
border-top:#a7a7a7 2px solid; border-right:#a7a7a7 2px solid; border-left:#a7a7a7 2px solid; |
border czyli ramka ramkę określam jedynie dla trzech krawędzi: górnej i bocznych; górna ramka sprawiłaby, że tytuł foldera oddzielony byłby linią od zawartości czyli linków |
font-size: 12px; color: #333333; font-weight:bold; text-align:center; |
przykładowe właściwości określające wygląd tekstu; kolejno: wielkość czcionki, kolor, grubość, wyrównanie tekstu; |
padding: 10px 5px 20px 5px; | tym razem większy robimy padding dolny ponieważ będzie znajdować się tam grafika |
background:#e2e2e2 url(/resource/ws_bottom.gif) no-repeat bottom center; | podobnie jak górna grafika dolne też nie powinna się powtarzać; jej płożenie koniecznie trzeba określić jako bottom w przeciwnym wypadku wyświetlać będzie się zaraz pod nazwą folderu |
border-right:#a7a7a7 2px solid; border-left:#a7a7a7 2px solid; border-bottom:#a7a7a7 2px solid; |
tym razem pozostawiamy nieokreśloną ramkę górną |
margin-bottom: 10px; | margin czli odstęp zewnętrzny; odstęp pomiędzy elementem który opisujemy a elementem sąsiadującym; |
Prościej tego wyjaśnić nie potrafię ale mam nadzieję, że i tak opis jest zrozumiały. Na koniec fragment opisywanego tu CSS »Zobacz