style kate mac

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.

Wpis

poniedziałek, 31 października 2011

Subtelny: jednokolumnowy, układanie treści pobocznej

przykład pływania na lewoO pływaniu elementów ciekawie napisał kiedyś e-maupa w notce: Podstawy layoutu CSS - część II. Ta część była poświęcona właśnie właściwości float. Korzystając z właściwości tam opisanych w ostatniej notce ułożyłam sobie elementy w wąskiej szpalcie, która wąską być przestała i przeniosła się pod notki. Efekt wyszedł całkiem rewelacyjnie ale... może zaistnieć mały problem z równowagą...

Nie jestem w stanie domyślić się, które z bloksowych elementów użytkownik zdecyduje się wykorzystać. Z całą pewnością nie wiem jakie dodatki i w jakiej liczbie zdecyduje się załadować na swój blog. Wariantów jest bardzo dużo i omawianie ich mija się z celem. Mam natomiast kilka rad, które mogą nieco usprawnić wygląd osobom, które uważają, że jeden z elementów na ich blogu zajmuje nieproporcjonalnie dużo miejsca zostawiając obok siebie za dużo wolnej przestrzeni. Światło jest niezbędne, asymetria poprawia czytelność ale wszystko to z równowagą trzeba połączyć.

  1. Mam dużo tagów i zrobiła się z tego strasznie duża kolumna.
  2. Mam dużo zakładek i ciągną się w nieskończoność.
  3. Mam dużo dodatków i wolę aby wszystkie nie były w jednej kolumnie.

Jeżeli po zmianie w kodzie na szablon jednokolumnowy pojawił się, któryś z powyższych problemów to mam kilka propozycji ich rozwiązania. Zakładam, że teść poboczną ułożono w cztery kolumny. Przy trzech różnice wielkości są mniej wyraziste, jest więcej pustego miejsca. Problem może jednak i tam się pojawić, więc poniższe podpowiedzi mogą się przydać, należy tylko dostosować wielkości.

 

Na początek lista elementów wyświetlanych w szpalcie bocznej. Kolejność ma znaczenie bo elementy te mają ustawione pływanie a pierwszeństwo przy pływaniu się liczy. Każdy z tych elementów wybiera sobie czy płynie do lewej czy prawej krawędzi i o tym, jak blisko niej się znajdzie decyduje właśnie kolejność. Archiwum oczywiście woła "pierwszy" ale jeżeli ustawimy mu pływanie do prawej to pierwszym elementem po lewej będzie wyszukiwarka. Można tak sobie poczarować i indywidualnie ustawiać pływanie.

  1. Archiwum/Kalendarz #archiwum lub #kalendarz
  2. Wyszukiwarka #wyszukiwarka
  3. Lista kategorii #kategorie
  4. Chmurka tagów #tagi
  5. Ostatnie notki #ostatnie-wpisy
  6. Zakładki #zakladki
  7. Subskrypcja (RSS) #kanal-informacyjny
  8. Dodatki z pola na HTML #free-html
  9. Opcje Bloxa #opcje

Każdy z tych elementów ma przypisaną klasę .boks więc można je opisywać wszystkie na raz. Można też potraktować je indywidualnie i opisać każdy z osobna dzięki indywidualnym identyfikatorom.

1. Tak dużo tagów, tak mało miejsca na nie...

Moja rada to podarowanie tagom dwukrotnie szerszego miejsca. Ale i to rozwiązanie ma swój własny problem: chmurka tagów jest czwartym elementem. Jeżeli ją poszerzymy tak aby zajmowała dwa razy więcej miejsca to najprawdopodobniej wyląduje ona już w następnym rzędzie a szerokość, którą zajmowała pozostanie pusta. Ale i na o są sposoby.

1.1. Poszerzenie boksu z chmurą tagów

Przy czterech kolumnach w szpalcie nawigacyjnej kolumny te mają określoną szerokość na 200px. Tagi mają zajmować szerokość dwóch kolumn ale aby wszystko było równo, poza pomnożeniem szerokości, musimy jeszcze dodać odstęp, który byłby pomiędzy kolumnami.

200px+20px+200px=420px

#tagi {
 width:420px;
}

1.1.1. Ukrycie jednego z pierwszych trzech elementów

Archiwum wyświetla się w postaci kalendarza albo listy miesięcy ale zawsze się wyświetla i zawsze jest pierwszym elementem. Osobiście jest to dla mnie jedna z najbardziej irytujących rzeczy bo kalendarz nie mówi nic o blogu poza bieżącym miesiącem a lista miesięcy zajmuje niewspółmiernie dużo miejsca w stosunku do swojej ważności. Gdyby jeszcze udostępniono archiwum zwijane... Gay już nie ma pomysłu na to co zrobić z archiwum proponuję najprostsze rozwiązanie z możliwych: ukrycie go. Archiwum dalej będzie się w wyświetlać w HTML ale szablon je ukryje.

#archiwum, #kalendarz {
 display:none;
}

Wyszukiwarkę można wyłączyć w panelu edycji bloga do którego użytkownik ma dostęp. Wchodzimy w zakładkę USTAWIENIA i wybieramy kartę BOCZNA SZPALTA a tam wśród elementów można wybrać te które mają być włączone. Wystarczy zaznaczyć przy wyszukiwarce nie.

Kategorie nie są elementem wymaganym. Można je dodawać ale nie trzeba. Zaleca się, jeżeli ktoś prowadzi bloga na kilka różnych tematów albo jest w stanie wyróżnić kilka głównych wątków. Nie polecam więc kasowania kategorii bo można przez przypadek zrobić to zbyt definitywnie i przy okazji pozbyć się także zawartości bloga. Można je ewentualnie ukryć tak jak archiwum.

#kategorie {
 display:none;
}

1.1.2. Przeniesienie wyszukiwarki

Nie chcąc niczego ukrywać ani wyłączać a jednak chcąc wykorzystać to niepotrzebnie puste miejsce można spróbować przenieść jeden z pierwszych trzech elementów. Na archiwum, kalendarz czy kategorie nie ma za bardzo miejsca gdzie indziej.

Za to wyszukiwarka bywa mile widziana w górnej części bloga. Mamy tam nawet wygospodarowaną przestrzeń na górne menu więc jeżeli nie zajmie ono całej szerokości swobodnie możemy przenieść tam wyszukiwarkę. Ustawimy ją tylko przy prawej krawędzi, zarezerwujemy dla niej nieco więcej przestrzeni aby wyświetlała się w jednej linii i na koniec ukryjemy etykietę tytułową.

#wyszukiwarka {
 position: absolute;
 top: 0px;
 right: 0px;
 width: 220px;
 margin: 0;
 padding: 0;
}
#wyszukiwarka .wyszukiwarka-etykieta {
display:none;
}

1.2. Chmurka tagów jako pierwszy element

Jeżeli zaś tagów jest tak dużo, że jest to najdłuższa z kolumn i ani zakładki, ani dodatki nie są w stanie ich pobić a archiwum jest niewielkie (albo jest w postaci kalendarza) i kategorii też jest niedużo. W takiej sytuacji może rozwiązaniem będzie umieszczenie chmury tagów jako pierwszego z elementów pobocznych. Wystarczy tylko zmienić pływanie trzech pierwszych na prawo aby czwarty, jako jedyny z rzędu pływający na lewo, był pierwszy.

#archiwum, #kalendarz, #wyszukiwarka, #kategorie {
 float:right;
 padding:0 20px 0 0;
}

2. Tak dużo zakładek tak mało miejsca na nie...

Rozbicie zakładek na mniejsze elementy i dopasowanie ich naturalnie do reszty jest możliwe ale wymagałby nieco innego zapisu w arkuszu. Następnym razem postaram się to uwzględnić ale póki co możemy sprawić aby boks z zakładkami zajmował całą szerokość a poszczególne foldery układały się w kolumnach jeden obok drugiego.

#zakladki  {
display:block;
 width: 880px;
 padding:0 0 0 20px;
}
#zakladki li {
 float:left;
 width: 200px;
 padding:0 20px 0 0;
}
#zakladki li li {
 padding:0;
}

Oczywiście w takiej sytuacji może nam się pojawić ten sam problem z równowagą co w przypadku całej treści pobocznej. To można poprawiać na kilka różnych sposobów ale najprostszym będzie zmiana kolejności folderów. Można je ułożyć zmieniając ich nazwy, numerując je, dodając różne kropki podkreślenia czy inne bardziej specjalne znaki. Najprostszym i najmniej inwazyjnym wizualnie rozwiązaniem będzie dodawanie spacji. Wpisując nazwę folderu z linkami poprzedź ja jedną spacją a wyświetli się jako pierwsza. Jeżeli dodasz następny folder i jego nazwę poprzedzisz dwiema spacjami to wyświetli się on wyżej niż ten z jedną spacją. Im więcej spacji przed nazwą tym wyżej wyświetli się folder.

Teraz pogrupuj foldery o podobnej liczbie linków albo tylko zadbaj o to aby w czwartej kolumnie nie pojawił się folder z nieproporcjonalnie dużą zawartością i zobacz jak to wygląda w praktyce. Jeżeli potrzebne są jakieś zmiany to dalej pobaw się spacjami. Trochę cierpliwości do tego trzeba ale efekt będzie zgodny z indywidualnymi upodobaniami.

3. Tak dużo dodatków tak mało miejsca na nie...

To samo co z zakładkami możemy zrobić z dodatkami. Wymagać to będzie jednak uporządkowania ich także w kodzie HTML. Zacznijmy jednak od stylów. Jak widać poniżej są podobne do tych, które przypisałam zakładkom gdy je poszerzałam.

.free-html  {
 display:block;
 width: 880px;
 padding:0 0 0 20px;
}
.free-html .kont {
 float:left;
 width: 200px;
 padding:0 20px 0 0;
}

Pole na dodatki ma własną klasę, przypisaną przez bloksa (.free-html) i zajmuje ono już całą szerokość, dodaliśmy już też selektor który ma ułożyć wszystko w cztery kolumny ale rzecz dalej nie działa i nie będzie dopóki nie uporządkujemy naszych dodatków. Tak jak grupowaliśmy zakładki tak teraz będziemy grupować kod dodatków.

Możemy je podzielić na cztery grupy i będzie po sprawie albo wydzielić ich więcej i swobodnie żonglować nimi wedle uznania. Poszczególne pudełka będą się układać przy lewej krawędzi jak klocki z tetrisa spadające w poziomie. Nie ważne czy będą to tylko cztery grupy czy wielokrotność czterech każda z nich musi otrzymać klasę kont. Najprościej w związku z tym będzie dodać na początku kodu kolumny div class kont i na końcu znacznik zamykający /div i po sprawie.

<div class="kont">Zawartość pierwszej kolumny</div>
<div class="kont">Zawartość drugiej kolumny</div>
<div class="kont">Zawartość trzeciej kolumny</div>
<div class="kont">Zawartość czwartej kolumny</div>



I to chyba wszystko w temacie. Powyższe rozwiązania można w większości swobodnie łączyć. Można spróbować też wykombinować coś samemu i zastosować rozwiązanie dla innego elementu. W razie problemów proszę pisać w komentarzach. Nawet jak coś się nieco posypie to powinno nam się rzem udać uratować szablon i uzyskać oczekiwany efekt. Na koniec pozostaje mi tylko wypisać linki do powiązanych i przydatnych notek.

Szczegóły wpisu

Tagi:
Kategoria:
Autor(ka):
kate_mac
Czas publikacji:
poniedziałek, 31 października 2011 12:48

Polecane wpisy

Trackback

Wyszukiwarka

Zakładki

Kanał informacyjny

Opcje Bloxa