Suwak w CSS

Witam ;) Dziś przepis na suwak.
Suwak przydaje się, kiedy nasz szablon nie jest przystosowany do długich postów, piszemy długie informacje w dodatkowych ramkach albo mamy za dużo obrazków (a odrzucamy opcję rotatora).
Oczywistym jest fakt, że ów cudeńko można umieścić w notce. Mało osób zdaje sobie sprawę z tego, iż można je też wcisnąć do każdego gadżetu na blogu.
Na sam początek wprowadzę fragment kodu CSS i go wytłumaczę.

{
height: 480px;
overflow: auto;
 }

Height - czyli wysokość. Jeśli umieścimy ten kod w poście, to nie będziemy widzieć suwaczka, jeżeli długość notki nie osiągnie 480px. Kiedy napiszemy posta dłuższego (dajmy na to 600px), to po prostu nam go w tym miejscu utnie. Żeby post nam nie zniknął, musimy dać:

Overflow: auto - ten fragment tworzy nam suwak. Pozwala notce, żeby się przewijała, kiedy braknie jej miejsca.


Najważniejsze jest określenie w czym chcemy ten suwak mieć. Pomoże nam gmeranie w ID (patrz: nota nr 01), jeśli chcemy bawić się z gadżetami. Żeby przesuwał mi się post, używam komendy:

.post-body{
height: 480px;
overflow: auto;
}

Wygląda to <TAK>.
Kolor suwaka zależny jest od używanej przeglądarki. Suwak będzie taki sam jak na innych stronach internetowych, które przewijacie w dół.

Żeby przesuwał mi się gadżet, użyłam komendy:

#Text1 {
height: 100px;
overflow: auto;
}

Wygląda to <TAK>.
Tutaj dałam dla przykładu gadżet z tekstem, ale można też włożyć do innych (zmieniając ID, oczywiście).


Nasz kod wklejamy w miejscu:
Panel nawigacyjny > Szablon > Dostosuj > Zaawansowane > Dodaj arkusz CSS.

Suwakujcie! ;)