17 marca 2013

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! ;)

20 komentarzy:

  1. Próbowałam
    Próbowałam dodać suwak w gadżecie, ale coś mi, holender, nie wyszło..

    OdpowiedzUsuń
    Odpowiedzi
    1. Może ten gadżet wymaga jakiejś innej komendy (chociaż nie powinien)? W jakim gadżecie próbowałaś go dodać? (przetestuję u siebie)

      Usuń
  2. Nie przepadam zbytnio za suwakami, ale instrukcja - jakby nie było - bardzo przydatna. bardzo pociąga mnie opcja dodania suwaka w gadżecie. Mam tylko jedno małe pytanko. Skoro przez "height" ustawiamy wysokość suwaka to czy przez "width" możemy ustawić szerokość pola eee... suwającego się? A takowe następnie wyrównać np. do prawej? Pytam tak z ciekawości :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Można, i to właśnie w ten sam sposób, jaki opisałaś.
      Tylko chyba zależy to trochę od przeglądarki, bo jak mi raz się przewijało w bok, to już po moim przejściu na znienawidzonego Ognistego Lisa już nie działa.
      A suwaczek można wyrównać do prawej ;) Tak naprawdę, to pracujemy wtedy na gadżecie i korzystamy z marginesów (nota pierwsza). Jeśli np. ID gadżetu w którym jest suwak to Text2, to bawimy się marginesami gadżetu Text2 ;D

      Usuń
  3. FIN! Odkryłam sposób jak wyśrodkować wysuwające się menu!

    OdpowiedzUsuń
  4. Hej ;)
    Można tak poza tematem? ^^
    Kieruję się do was, bo u was najlepsze instrukcje - wiesz może jak usunąć poświatę z górnej części bloga? Bo nie wygląda za ładnie, a nie znam sposobu ;/

    OdpowiedzUsuń
    Odpowiedzi
    1. Tak, ale następnym razem daj takie pytanie do "Zapytaj" ;)
      Weee!
      Daj link do bloga, bo z głowy nie pamiętam - ale oczywiście, że da się usunąć. Usuwałam już nie raz, bo mnie irytowała.

      Usuń
    2. http://zlotoirum.blogspot.com/
      Wraz z paskiem komunikacyjnym pojawia się też taki cień ;-; O niego właśnie chodzi.
      Wybacz, umknęła mi ta rubryczka, więc postanowiłem napisać w najnowszej instrukcji :p

      Usuń
    3. Ramtamtam, spróbuj tego:
      we fragmencie:

      .body-fauxcolumn-outer .cap-top {
      position: absolute;
      z-index: 1;
      height: 276px;
      width: 100%;
      background: transparent url(//www.blogblog.com/1kt/awesomeinc/body_gradient_dark.png) repeat-x scroll top left;
      _background-image: none;
      }

      usuń ten link, tak że wers komendy będzie wyglądał tak:
      background: transparent url(//) repeat-x scroll top left;

      Jeśli znajdziesz ten link jeszcze gdzieś, usuń go tak, aby zostały dwa ukośniki.

      Usuń
    4. Działa! Wielkie dzięki ^^
      Podpisuje się pod podziękowaniami Rynn, twoje instrukcje są bardzo przydatne ;3

      Usuń
  5. Cześć! Wpadłam podziękować za tutoriale które umieszczasz, w fajny i przystępny sposób to wszystko objaśniasz, dziękuję :)

    PS. W mojej przeglądarce pasek kart u góry u Ciebie się rozjeżdża, "zapytaj" jest poza główną kolumną a "szablony" wjeżdża na lewą krawędź.

    OdpowiedzUsuń
    Odpowiedzi
    1. Arigato ;)
      U mnie na rozdzielczości laptopowej jest ok, ale zobaczę jeszcze gdzieś indziej.

      Usuń
  6. Może się przyda - jak zmienić wygląd suwaka wyjaśnia nam człowieczyna na tej stronie: http://graphical-thoughts.blogspot.com/2013/04/jak-zmienic-wyglad-scrollbaru.html

    Nie robię reklamy, pomagam zbłąkanym duszom ;). Sama znalazłam tę stronę dopiero dzisiaj.

    OdpowiedzUsuń
  7. Supper~!!!!! Masz talent. ^^"
    Zapraszam tez serdecznie na mojego nowego bloga. http://koszmarwbajke.blogspot.com/
    A twojego bloga będę na pewno śledzic. Pozdrawiam.

    OdpowiedzUsuń
  8. Do postu o anonimowych komentatorach: Mnie wyświetla, że nie posiadam takiego elementu jak "body" ._.' Nie wyszukuje mi go, pokazuje "0 z 0".

    OdpowiedzUsuń
  9. Jejku, działa! :D
    wspaniały post, dzięki za pomoc :)
    Pozdrawiam, Luna

    OdpowiedzUsuń
  10. A można "wysuwakować" całą lewą kolumnę, żeby np. kolumna była tylko do połowy ekranu, a zawartość się przesuwała?
    Fajna ta instrukcja ^_^

    OdpowiedzUsuń
  11. przydała mi sie

    http://graphicnina-grafika.blogspot.co.uk/

    OdpowiedzUsuń

szukaj