eMaupie figle z szablonami
Blog > Komentarze do wpisu

Zakładki dla kategorii

Jak za pomocą CSS przerobić linki do kategorii bloxa na zakładki? To proste, jeśli zastosujesz się do kilku poniższych wskazówek i zastosujesz prosty trick.

Zakładki dla kategorii

Za zakładki odpowiedzialny jest element #BlogKategorie oraz zawierający go #BlogKategorieBox. Wewnątrz #BlogKategorie znajdują się linki do poszczególnych kategorii, przy czym aktualnie wybrana kategoria nie jest linkiem, lecz napisem opakowanym w element span. Dzięki temu będziemy mogli odróżnić aktywną zakładkę od pozostałych. Pomysł jest taki, żeby jako tło dla linków kategorii wstawić obrazki z zakładkami. Proste? Jasne, tylko, że w tym wszystkim jest niestety haczyk :/

Problem polega na tym, że oprócz samych kategorii wewnątrz #BlogKategorie znajdują się także napis "Kategorie:" oraz znaczki "|" oddzielające kolejne linki. Jak się ich pozbyć, bez dostępu do kodu html bloxa? Otóż można zastosować pewien trick zmieniający domyślne layoutowanie elementów html. Chodzi o ustawienie własności display:block; oraz float:left; dla elementów klasy #BlogKategorie A. Spowoduje to mniej więcej taki efekt:

Efekt po zastosowaniu tricku

Wyjaśnienie dlaczego tak się stało wymaga nieco wiedzy o layoutowaniu za pomocą CSS, o czym postaram się napisać w jednej z kolejnych notek. W tej chwili ważny jest efekt jaki udało się uzyskać, czyli "wydzielenie" linków z tekstu zawartego w #BlogKategorie.

Teraz wystarczy już tylko dopieścić wygląd zakładek, czyli ustawić im wspomniane tło, paddingi i marginesy. Ja użyłem poniższych obrazków oraz następujących definicji w CSS.

Zakładka nieaktywnaZakładka aktywna

Dla aktywnej zakładki:

#BlogKategorie span {
     text-align:center;
     background: url(../resource/tab_highlight.png) no-repeat left top;
     display:block;
     float:left;
     width:74px;
     height:18px;
     padding-top:5px;
     font-weight:bold;
     color:#7A4F13;
}

Dla zakładek nieaktywnych:

#BlogKategorie A {
     text-decoration: none;
     text-align:center;
     background: url(../resource/tab.png) no-repeat left top;
     display:block;
     float:left;
     width:74px;
     height:18px;
     padding-top:5px;
}

Istotne właściwości pogrubiłem. Ważne, by pamiętać o ustawieniu wysokości i szerokości jaką ma obrazek zakładki. Ponieważ element span nie jest linkiem, to warto mu ustawić taki kolor jak mają pozostałe linki w zakładkach (wyróżnienie aktywnej kategorii jest zrealizowane przez inne tło zakładki, więc nie ma potrzeby tego robić kolorem tekstu).

A co zrobić z tekstem "Kategorie: | | | |"? Nie da się go wyciąć bez dostępu do kodu html, dlatego jedyne co pozostaje, to schować go ustawiając mu kolor na kolor tła (właściwość color w elemencie #BlogKategorieBox).

niedziela, 27 stycznia 2008, e-maupa

Polecane wpisy

  • Podstawy layoutu CSS - część III

    Trzy to dobra liczba, jeśli chodzi o ilość notek w blogowym cyklu. Nie za dużo, nie za mało, lecz w sam raz by nakreślić "zarys wstępu do podstaw" tem

  • Podstawy layoutu CSS - część II

    Jeśli zainteresowała Cię poprzednia notka, to zapraszam do przeczytania kolejnej części cyklu o podstawach layoutu za pomocą CSS. Kontynuując temat, dziś zajmie

  • Podstawy layoutu CSS - część I

    Dziś, zgodnie z obietnicą, rozpocznę mały kurs podstaw layoutowania za pomocą CSS. Jeśli próbowałeś kiedyś zmienić układ swojego bloxa a nie bardzo wiesz jak si

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
stl
2008/01/28 21:48:41
Mam jedno "ale" do ostatniego akapitu, bo co zrobić gdy np. tło nie ma jednolitego koloru? Jest na to lepszy sposób:

#BlogKategorie {
font-size: 0;
}

#BlogKategorie span, #BlogKategorie a {
font-size: 11px;
}
-
2008/01/29 02:38:46
Bardzo ładnie to wygląda, ale do ogólnie dostępnych szablonów raczej nie nadaje się, bo jeśli wpisze się wielowyrazową nazwę, to niestety nie zmieści się w obszarze obrazka.
-
2008/01/29 08:57:35
stl:
Zgadzam się, nie chciałem komplikować tutoriala. Podobne rozwiązanie jest stosowane przy ukrywaniu tekstu w tytule bloga :) Dzięki za uwagę.

irytek05:
W pokazanym przeze mnie rozwiązaniu wielowyrazowa nazwa powinna się "zawinąć" i wtedy wystarczy zrobić wyższy obrazek. Problem pozostaje w przypadku długich wyrazów (dłuższych niż obrazek zakładki). Myślałem nad zakładkami dopasowującymi się do szerokości linka, ale wtedy niestety nie mogą być zaokrąglone.
-
prolka
2008/01/29 19:13:51
Bardzo ładnie to wygląda. Chyba zmienię sobie szablon, bo ostatnio podpatrzyłam kilka pomysłów:0
-
small24
2008/01/31 10:30:03
Wszytsko ladnie pieknie tyle ze po zastosowaniu kodu dla zakladek nieaktywnych, grafika nie wyswietla sie. Jedynie ramka dziala dla zakladek aktywnych, jak to zreperowac ??
-
small24
2008/01/31 10:34:15
Juz sobie poradzilem :) Sorki za tymczasowy plagiat, ale jak bede mial chwile to zaraz cos pozmieniam, chcialem zobaczyc jak to bedzie wygladalo :)
-
2008/01/31 13:33:06
small24:
A napiszesz z czym był problem?
-
small24
2008/01/31 13:39:46
Problem polegal na tym ze po zastosowaniu szablonu ktory zaproponowales nie wyswietlala sie ramka dla nieaktywnych okien i nie wiem czy napewno podany jest dobry odnosnik w zaproponowanym przez Ciebie szalbonie, ale po wrzuceniu ramek na mojego bloga i zmianie linka, wszystko dziala jak powinno, chociaz sam dalej mam milion pytan - chociaz narazie poczekam na to co bedziesz wrzucal tutaj u siebie, bo narazie jest ciekawie !!
-
marcel.pajda
2008/02/04 23:39:21
Można też wyrzucić tekst poza okno przeglądarki:
#BlogKategorie {
text-indent: -5000px;
}