markus.kembi
07.05.07, 23:46
Tworzę właśnie stronę o tematyce weksylologicznej. Chciałbym, żeby layout
wyglądał mniej więcej tak, jak poniżej, no może kolory będą nieco inne (może
kilka skórek), ale tym się zajmę później:
toya.net.pl/~marek_ju/niemcy.html
Ale tu pojawił się pewien problem. Chciałbym, żeby w jednej z kolumn (miała to
być kolumna prawa) znalazły się "kotwice" (anchors) do poszczególnych części
długich przecież artykułów. Ale co mi po kotwicy, jeśli przewinę stronę w dół
i linki znikną z ekranu? W takim razie dobrze by było, gdyby kolumna z
kotwicami podczas przewijania strony w dół pozostawała w tym samym miejscu. W
Firefoksie nie ma problemu, ale niestety ponad połowa internautów korzysta z
pseudoprzeglądarki Internet Explorer, a ta niewłaściwie interpretuje
"position: fixed". Długo szukałem, wreszcie znalazłem jakiś sposób na
rozwiązanie tego problemu. No właśnie - jakiś. Link podam poniżej, ale
najpierw wyjaśnię co to za sposób i na jakie napotkałem problemy (dodam że nie
znam się na języku javascript, więc sam nic nie stworzę):
* html #rightnavigation { height: 100px; position: absolute; top:
expression(parseInt((document.body.scrollTop||documentElement.scrollTop))+'px') }
Niby rzeczywiście, kolumna zatrzymuje się w tym samym miejscu na ekranie, ale
jakby "miga" podczas przesuwania. Na stronie, na której to znalazłem, podane
jest rozwiązanie tego problemu, autor tejże strony używa określenia
"sluggishness":
www.gunlaug.no/contents/wd_additions_15.html
A rozwiązaniem jest nieruchome tło obrazkowe dla strony. To mi się spodobało,
ale napokrałem kolejne problemy. Całość wygląda mniej więcej tak (na pewno
ktoś z Was ma IE, więc zobaczy, jak to wygląda):
toya.net.pl/~marek_ju/test.html
No ale niestety:
1) W Firefoksie kolumna znajduje się cały czas zaraz poniżej nagłówka (czyli
tak, jak być powinno), w IE - przy górnej krawędzi, a więc "wchodzi" na nagłówek.
2) Ku mojemu zaskoczeniu, również Opera 9.10 nie wyświetla strony poprawnie -
prawa kolumna jest po lewej stronie, nachodzi na lewą kolumnę.
3) Kolumna środkowa będzie miała zmienną szerokość, zmienną w pewnym
przedziale (szerokość ekranu od 800 do 1024 pikseli, na razie mniej, żebym w
rozdzielczości 1024x768 widział tło). Czyli prawa kolumna nie może mieć stałej
odległości od lewej krawędzi strony (tylko od górnej, a od lewej już nie).
2. i 3. problem mógłbym rozwiązać, gdyby (chociaż trochę to może skomplikować
nawigację) to lewa kolumna była nieruchoma i zawierała kotwice, a większość
linków umieściłbym na prawej.
Sporo czasu spędziłem na szukaniu rozwiązania problemu na 1, a więc zupełnie
nowego skryptu.
meddle.dzygn.com/tests/fixed_ie/
No i tu jest niby lepiej, bo jest javascript, który pozwala dodać jakąś tam
ilość pikseli odległości od górnej krawędzi, ale nie jest tak do końca dobrze:
toya.net.pl/~marek_ju/test-f.html
1) Znów pojawia się "sluggishness", ale tym razem podłożenie nierichomego tła
obrazkowego nic nie daje
2) Znów ten sam problem w Operze, ale i tak chyba lewą kolumnę będę musiał
"unieruchomić", a nie prawą
3) W Internet Explorerze (testuję wersją 6, a WebSite Pro ma podgląd w IE5 - i
chwała mu za to) prawa kolumna rzeczywiście daje się ustawić na określonej w
skrypcie wysokości, ale nie od razu po wczytaniu strony. Trzeba wpierw ją
przewinąć nieco w dół i dopiero wtedy "wskakuje" na swoje miejsce.
Doradźcie proszę co zrobić. Czy gdybym coś poprawił, strona wyjdzie tak,
jakbym tego chciał? Czy warto męczyć się dalej, szukając kolejnych skryptów? A
może w ogóle dać sobie spokój z "kotwicami"? Artykuły, jakie na stronie się
znajdą, mogą być naprawdę długie, po kilka części, ale może tego rodzaju
ułatwienie nie jest warte aż takiego wysiłku i straty aż takiej ilości czasu?
