Pola
tekstowe
W tej czesci FAQ dowiecie sie, jak samemu zrobic "pola tekstowe" (div-y). Chodzi o takie pola, ktore posiadaja swoj wlasny suwak (scrollbar). Mozna np. w takim polu umiescic wpis do bloga, i przewijac go sobie wlasnie w tym jednym, malym "okienku". Na tej stronie dowiecie sie, co trzeba po kolei zrobic, by wstawic sobie takie pole.
Oczywiscie na stronie moze byc wstawionych kilka div-ow, wszystkie wedlug tej samej zasady.
Jak to zrobic?
1. Na poczatku byc moze macie juz tlo, ktore chcecie sobie zastosowac jako "podkladke" do Waszego pola. Ja np. zechce wstawic sobie jedno pole, ktore bedzie sie miescilo w tablicy, trzymanej przez tego pana:
UWAGA! Wasz obrazek nie powinien byc zbyt duzy - najlepiej, by caly Wasz layout nie przekraczal wymiarow 800 x 600 pikseli. W przeciwnym razie moga byc problemy z wyswietlaniem u osob, ktore maja mniejsze rozdzielczosci ekranu.
Etap wstawiania obrazka oczywiscie nie jest "obowiazkowy". Mozecie przeciez dodac pole tekstowe bez obrazka pod spodem.
2. Jesli obrazek ten wstawimy jako "normalne" tlo (czyli stosujac komende <body background="http://obrazek">), przegladarka pouklada te obrazki jeden obok drugiego - i wtedy nasza strona bedzie wygladala tak. Nie o to przeciez nam chodzi. Musimy zastosowac komende, ktora "przyklei" nam tlo do lewego gornego rogu ekranu i nie pozwoli mu sie rozmnozyc ;)
3. Tlo "przyklejone" do lewego gornego rogu mozna uzyskac, stosujac komende <style>. Odszukajcie zatem na stronie glownej komende </head> i wpiszcie PRZED nia:
<style>
body {background-image: url(http://adres.obrazka);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;}
</style>
Uzyskacie wtedy taki efekt.
PORADA: Zeby Wasze przyszle pole "nie rozjezdzalo sie" z obrazkiem na innych komputerach, warto okreslic wysokosc gornego oraz lewego marginesu. Wtedy przegladarka nie bedzie stosowala wartosci domyslnych, tylko zastosuje sie do Waszych "sztywnych" wskazan. Zatem do komendy <body>
musimy dodac atrybuty leftmargin i topmargin, w pikselach. Ja podam 0, tak jest chyba najwygodniej:
<body leftmargin="0" topmargin="0">.
4. Skoro mamy juz przygotowany grunt pod nasze pole, to warto teraz zajac sie czescia glowna, czyli wstawianiem samego pola. Jest to chyba najtrudniejszy etap. Problem polega na tym, ze musimy okreslic:
- jaka ma byc odleglosc pola tekstowego od gory (od gornej krawedzi okna przegladarki),
- jaka ma byc odleglosc pola tekstowego od lewej strony (od lewej
krawedzi okna przegladarki),
- jaka ma byc wysokosc pola,
- jaka ma byc szerokosc pola.
Czy rzecz sprowadza sie do analizy Waszego rysunku tla - w ktorym miejscu (w poziomie i w pionie) ma sie zaczynac i konczyc pole tekstowe. Mozecie to robic "na wyczucie", metoda prob i bledow - probowac rozne mozliwosci, az traficie tam, gdzie chcecie. "Bardziej zaawansowani" moga skorzystac z mozliwosci, ktore daja im programy graficzne. Niektore programy do obrobki grafiki pokazuja wspolrzedne dowolnego punktu na obrazku. Moze byc to niezwykle pomocne.
Ja skorzystalam wlasnie z pomocy programu graficznego (konkretnie - Animagic) i odczytalam, ze moje pole powinno byc takie:
- odleglosc pola tekstowego od gory (od gornej krawedzi okna
przegladarki) - 150,
250,
- wysokosc pola - 170,
- szerokosc pola - 230.
5. Majac juz "namiary" na nasze pole, mozemy je sobie wstawic. Sluzy do tego komenda <div>, wstawiana gdzies PO komendzie <body>, ale PRZED komenda </body>. W moim przypadku kod HTML pola wyglada w ten sposob:
<div style="position: absolute;
top: 150px;
left: 250px;
height: 170px;
width: 230px;
overflow: auto">
May there always...
</div>
GOTOWE!!! Zobaczcie, jak teraz wyglada moja stronka!
6. Dalsza czesc - to juz tylko kosmetyka. Np. mozecie skorzystac z mojego FAQ pt. Kolorowy pasek przewijania - zeby zmienic standardowy pasek (scrollbar) na taki, ktory bardziej pasuje do wystroju bloga. Ostateczna wersja mojej stronki bedzie zatem wygladac tak.
