20. Przewijana ramka

Dziś postaram się opisać nieco bardziej skomplikowany pomysł, jak usprawnić swojego chomika. Nie sprawi on jednak problemu osobom posiadającym podstawową wiedzę na temat języka html. Jeżeli kompletnie nie masz pojęcia o html'u, polecam przejrzeć poprzednie wpisy (Archiwum), począwszy od pierwszego. Osobiście uważam, że to co zaraz opiszę, nie jest aż tak trudne, żeby tego nie zrozumieć. A zatem czytaj dokładnie i powoli ;-)

Tym razem zajmę się czymś, co możesz zaobserwować na profilu aisha80. Chodzi o to przewijane miejsce otoczone zieloną ramką. Fajne prawda? Pozwala zaoszczędzić sporo miejsca, a po drobnej kosmetyce, nabiera też całkiem przyzwoitego wyglądu :)

Oto przykład o czym mówię:

To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80. To jest przykładowy 'pojemnik' do umieszczania dodatkowej zawartości. Możemy wypełnić go tekstem lub wstawić jakikolwiek obrazek. Pozdrawiamy użytkownika aisha80.

Myślę, że jak uruchomisz swoją wyobraźnię, będziesz wiedział jak wykorzystasz taki "gadżet" na swoim profilu. Zacznę od bardzo podstawowego kodu:

<div style="overflow: auto; width: 350px; height: 250px;" id="main">Tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst,</div>

Zwróć uwagę na znaczniki:
width: - to jest szerokość naszego pojemnika, określana w pikselach.
height: - to jest wysokość naszego pojemnika, określana w pikselach.
Pobaw się tymi wartościami, zmieniając nieznacznie liczby, aby zobaczyć jaki będzie efekt. Przedstawiony wyżej podstawowy kod, w praktyce wygląda tak:

Tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst, tutaj wpisujemy nasz tekst,

Generalnie to już wszystko - pojemnik gotowy do wstawienia w edycję swojego profilu. Po wstawieniu, szybko jednak zauważysz, że nie da się do niego dodać wyrównania. Ściślej mówiąc, pojemnik można umieścić, albo POD jakąś zawartością, albo NAD. Zauważ, że nie da się zrobić tak jak na profilu aisha80, aby tekst umieszczany był również OBOK naszego pojemnika np. po prawej. Jak widać na podanym profilu, jednak się udało. Mało tego, spróbujemy pójść dalej i dokonamy o wiele większych zmian, niż tylko wyrównanie :-) Do pojemnika nie da się nic wyrównać, musimy go zatem umieścić w tabeli. Nie będę Cię jednak teraz uczył tworzenia tabel w html'u, ale pokażę kod, a następnie objaśnię co za co odpowiada. Nie martw się, to nie będzie takie trudne na jakie wygląda ;-)

Zacznijmy od samego efektu:

Przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst,

To jest teraz tekst lub zawartość, która została umieszczona OBOK pojemnika, po jego prawej stronie. To jest teraz tekst lub zawartość, która została umieszczona OBOK pojemnika, po jego prawej stronie. To jest teraz tekst lub zawartość, która została umieszczona OBOK pojemnika, po jego prawej stronie.












Tak wygląda kod:

<table style="height: 330px;" border="0" width="350" align="left"><tr><td><div id="main" style="border: 2px solid #339999; padding: 10px; overflow: auto; width: 350px; height: 330px; font-size: 12px; font-family: Arial; background-color:#FFFCDA;">Przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, przykładowy tekst, </div></td></tr></table>

Przypatrz się dokładnie - zauważ dwie sekcje: table oraz div
TABLE - to nasza niewidoczna dla przeglądarek tabela. Abyś mógł cokolwiek wstawić OBOK pojemnika, dodano parametr align="left". Parametr ten nie działa w pojemniku div, dlatego użyto tabeli (table)
DIV - to jest właśnie nasz pojemnik.
Widzisz zatem, że umieściliśmy pojemnik w tabeli.

Wspólna cechą tych dwóch znaczników jest wcześniej omawiana wysokość (height) oraz szerokość (width). Jeżeli zamierzasz zmienić te wartości, PAMIĘTAJ, aby były identyczne dla table i dla div.
Jeżeli zatem ustawisz wysokość na 330px to musi być ona taka sama dla table oraz dla div. Oprócz zmian wysokości i szerokości, nic nie zmieniaj w sekcji table, jeżeli nie znasz podstaw html.

Następne znaczniki:

border: 2px
grubość ramki otaczającej pojemnik (tej zielonej). Wpisz zamiast dwójki, jakąkolwiek inną liczbę, aby zmienić grubość określaną w pikselach.

#339999
kolor ramki. Zamiast tego możesz wpisać dowolny kolor z tabeli podstawowych kolorów lub jakikolwiek inny jeżeli potrafisz go zapisać.

padding: 10px
odległość zawartości wnętrza pojemnika od jego krawędzi (ramki). Zmień liczbę 10 na inną, aby zobaczyć różnicę.

font-size: 12px
wielkość czcionki. Zmień liczbę 12 na inną, aby zmienić rozmiar tekstu zawartego w pojemniku.

font-family: Arial
rodzaj czcionki. Zmień Arial na inną, np. Verdana. Podstawowe rodzaje czcionek, opisywałem tutaj.

background-color:#FFFCDA
kolor tła pojemnika. Zmień #FFFCDA na inny kolor, korzystając z tabeli podstawowych kolorów. Możesz podać tu dowolny kolor jaki tyko zechcesz.

Reszty nie zmieniaj, jeżeli nie znasz podstaw html'a.
Powyższy pojemnik możesz zastosować na dowolnej stronie internetowej, lub w portalu chomikuj.pl w edycji swojego profilu. Pojemnik nie będzie działał w rozmowach chomikowych, jak również w edycji folderów!

Jeżeli masz w związku z tym jakieś pytania lub uwagi, zostaw proszę swój komentarz.