redesign: how-to

Z pewnością wiele słyszałeś o bardzo zaawansowanych technicznie programach, używanych przez webmasterów. Trzeba za nie wiele zapłacić, a potem poświęcić dużo czasu, żeby się nauczyć ich obsługi. Z całą pewnością mają niesamowite możliwości, a tryb WYSIWYG zapewnia, że strony można niemalże rysować wizualnymi narzędziami o intuicyjnym interfejsie, na dodatek wszystko co wymyślisz stworzą potężne kreatory. Dzięki temu nie trzeba wcale zwracać uwagi na kod (to tam w środku jest jakiś kod?), więc jeśli przez przypadek nie będziesz miał przy sobie ulubionego narzędzia, będziesz bezradny.

Ale fakt, że to czytasz świadczy, że chcesz się czegoś nauczyć i tym czymś nie jest interfejs kosztownego narzędzia WYSIWYG, ale samo tworzywo stron www: kod HTML i arkusze stylu CSS.
Jedynym narzędziem jakie jest potrzebne będzie możliwie prosty (czyli pozostawiający dośc dużo miejsca na ekranie) edytor tekstowy. Nie, zdecydowanie nie Notatnik (notepad.exe) bo jest zbyt prosty, można otworzyć tylko jeden dokument na raz, nie obsługuje skrótów globalnych i wciąż trzeba ustawiać zawijanie. Jeśli ktoś twierdzi, że robi strony www w Notatniku podejrzewam, że używa metafory (tzn. figury retorycznej a nie programu metafora.exe).

Teraz używam Kate, ale kiedy jeszcze męczyłem się z Windowsem moim ulubionym edytorem był EditPad Classic. Nie napiszę gdzie go można znaleźć, bo nie wiem. Firma JGS zaprzestała rozwijania go w darmowej wersji Classic i udostępnia teraz dwie wersje EditPada całkowicie płatną Pro oraz darmową - ale tylko do użytku niekomercyjnego - Lite. Jeśli jednak możesz zdobyć Classica szczerze go polecam - jest lekki i można go stosować bez ograniczeń.
Inne programy, które mogą służyć do edycji plików HTML i CSS wymieniłem na mojej stronie Darmowe oprogramowanie dla MS Windows.

Są tam również wymienione dwa inne narzędzia, których będziesz potrzebował: GIMP i Xnview (oba istnieją w wersji zarówno dla Linuxa jak i dla MS Windows), ponieważ strona WWW to nie tylko pliki ASCII, ale także elementy graficzne.
GIMP jest doskonały do edycji grafiki na potrzeby internetu a Xnview do zarządzania plikami graficznymi i podstawowej ich edycji.

Poza tym będziesz potrzebował przeglądarek internetowych i to w dużych ilościach (Neo powiedziałby: 'Browsers. Lots of browsers'). Przynajmniej trzech:

Firefox 1.x - najlżejsza z przeglądarek opartych na module gecko: jest najbardziej zgodny ze standardami a to co pokazuje możesz uważać za wzór dla innych (ach, gdybyście były dobrymi przeglądarkami...)
Opera 8.x - jest najwygodniejsza i ma jedną zdecydowaną zaletę, którą wygrywa z każdą inną przeglądarką: jeśli zawiesi się system to po restarcie zaproponuje odtworzenie poprzedniego stanu; poza tym bardzo konsekwetnie używa trybu wielodokumentowego więc w jednej instancji programu możesz przeglądać ilośc stron ograniczoną tylko zasobami systemu; jeśli chodzi o interpretację kodu ustępuje nieco geckoidom.
Internet Explorer - musiałem o nim wspomnieć, nie dlatego, żeby był dobrym programem, lub żeby prezentował jakiekolwiek możliwości, których brak innym przeglądarkom, podobnie interpretacja kodu pozostawia wiele do życzenia. Jest ciężki, zawodny, niewygodny i błędny, ale po prostu jest i temu zawdzięcza swoją niezwykłą popularność: około 80% wszystkich używanych obecnie przeglądarek to różne wersje MSIE, więc zawsze musisz sprawdzić jak to co napisałeś wygląda w produkcie Microsoftu.
Kiedy widzę chociażby to jak ta strona wygląda w MSIE zastanawia mnie po co Microsoft zatrudnia tylu programistów jeśli nie potrafi zrobić przeglądarki, która byłaby zgodna chociaż z pierwszym poziomem CSS. Nawet zwykły tekst wygląda w niej gorzej, boczne krawędzie składajace się z punktów zlewają się w jedną linię...

Musi byc ich tyle z kilku powodów.
Internet Explorer jest niezbędny ze względu na popularność, po prostu musisz wiedzieć jak wygląda to co zrobiłeś dla zdecydowanej większości użytkowników internetu. Wyjątkiem są dokumenty o bardzo prostej budowie, albo takie, w których wygląd się nie liczy - no chyba, że robisz stronę na temat, który z pewnością nie zainteresuje, żadnej osoby używającej MSIE. Ale delikatnie mówiąc jest to nienajlepszy program, nie można mu dowierzać. Robienie stron tylko dla MSIE to jak aparthaid w sieci. Chociaż jeśli kod nie jest zbyt skomplikowany i pomyślnie przeszedł walidację (zarówno HTML jak i CSS) to w zasadzie nie powinno być problemów. Ale mi na przykład przydarzyła się dość poważna różnica pozycjonowania dolnego bloku, można takich rzeczy uniknąć niezbyt wielkim wysiłkiem.

Inną sprawą są różnice pomiędzy kolejnymi wersjami MSIE, przydaje się mieć do testowania stron 'wszystkie trzy', tzn. MSIE 5.01, 5.5 i 6.0 - instrukcja jak zainstalować wszystkie w MS Windows jest na Skyzyx.com: Multiple Versions of Internet Explorer; Skyzyx.com - Downloads
(Multiple IE's in Windows). Można je również uruchomić w Linuksie (wine), nawet wszystkie trzy naraz. IEs 4 Linux - Internet Explorers for Linux, Dla *nixowych webdesignerów

Poza tym z czysto merytorycznych powodów lepiej jest na bieżąco kontrolować wygląd w przeglądarce zgodnej ze standardami i tu najlepszą jest Firefox (ze względu na geckoidalność i niewielkie obciążenie dla komputera).
A Opera po prostu jest najwygodniejsza, docenisz ją za konsekwentne otwieranie nowych okien w tej samej instancji i przywracanie stanu sprzed zawieszenia, na dodatek jest w dużym stopniu zgodna ze standardami więc może służyć do testowania poprawności kodu.

Tło

Jasnobłękitne tło z liniami przerywanymi w poziomie i w pionie dokładnie co 100 pikseli - wygląda interesująco a jest bardzo łatwe do wykonania.
Wystarczy skorzystać z możliwości umieszczenia dowolnego pliku graficznego jako właściwości tła:

body {background-image: url(ścieżka_dostępu/nazwa_pliku.ext);}

W moim przypadku pełna deklaracja wyglądałaby tak:

body {background-color: #ededff; background-image: url(background03.png);}

Co można skrócić do postaci:

body {background: #ededff  url(background03.png);}

Oczywiście można zastosować sam background-image, ale wolałem ustalenie koloru tła i to jak najbardziej podobnego (tu jest identyczny) z kolorem obrazka jest pożyteczne, może się przydać w wypadku gdyby obrazek się nie załadował lub użytkownik wyłączył ilustracje. Poza tym, zanim przeglądarka ściągnie obrazek kolor jest już w tle.

Wykonanie samego obrazka okazało się prostsze niż się spodziewałem.
Najpierw w GIMP-ie utworzyłem nowy obraz wielkości 100 na 100 pikseli a kolor tła wziąłem z "Tworzenie stron www" Davida Siegela (s. 149) - pisze on o swojej witrynie używającej tła naśladującego kalkę techniczną i właśnie kolor #ededff uznał za optymalny (tutaj używam go jako koloru tła dla cytatów z arkuszy styli).

Pewien problem stanowiło zrobienie linii przerywanych. Musiały być proporcjonalne i już zacząłem obliczać ile muszą mieć pikseli kiedy zobaczyłem, że właściwie całą tą pracę zrobił za mnie GIMP - obrazek był bowiem obwiedziony zaznaczeniem, który wyglądał dokładnie tak jak to co chciałem zrobić. Używając Xnview wyciąłem podgląd i i poobcinałem niepotrzebne boki:

Ale powstał nieoczekiwany efekt, otóż - jak widać - linie przerywane z obu stron ilustracji nakładały się tworząc coś raczej na kształt sznurka niż linii przerywanej. Wrociłem więc do GIMPa i zaznaczyłem dolną linię i skopiowałem na górę a potem lewą linię na prawą:

Wtedy z kolei się okazało, że chociaż linia wygląda poprawnie jest za gruba. Jeszcze raz wróciłem do GIMPa i zaznaczyłem lewą i górną (wybór oczywisty z tego względu, że linia musiała zaznaczać setny piksel zaczynając od zera - co oznaczało, że lewa i górna krawędź ekranu musi być czysta) i zalałem ją kolorem tła, co jak widać dało już efekt w pełni zadowalający:

Obrazek zapisałem w formacie PNG z przeplotem, bez zapisu koloru tła - ma poniżej pół kilobajta (dokładnie 432 bajty) - więc ładuje się bardzo szybko.
Oto on:

Wypośrodkowany obiekt główny

Użyłem metody opisanej na stronie BlueRobot.com - CSS Centering: Negative Margin jest to bardzo proste:

#nazwa {position:absolute; left:50%; left-margin:-połowa_szerokości_obiektu;}

Po kolei:

left:50%; umieszcza lewą krawędź obiektu dokładnie w środku ekranu
żeby go wycentrować wystarczy przesunąć go jeszcze o połowę szerokości (która przecież jest stała) w lewo, żeby to zrobić najlepszą metodą jest ujemny margines (specyfikacja CSS zezwala na to): left-margin:-połowa_szerokości_obiektu;. Dzięki temu niezależnie od wielkości monitora czy zmiany wielkości okna programu obiekt będzie umieszczony dokładnie w środku i to bez użycia skryptów.

Ujawnia się tu pewna cecha CSS, która znacznie go odróżnia od javascriptu. Autorzy CSS stanowczo piszą, że nie chcą zamienić go w kolejny język programowania. Wprawdzie dynamiczny CSS wprowadza pseudoklasy i reakcje na zdarzenia to powinniśmy myśleć cały czas w kategoriach właściwości obiektów a nie procedur. Umieszczenie obiektu dokonuje się zapewne w jakiejś kolejności zdarzeń i z punktu widzenia przeglądarki jest to proces zarządzany przebiegającym w czasie algorytmem, ale z punktu widzenia projektanta ta kolejność nie ma znaczenia, są to po prostu dwie uzupełniające się właściwości, które razem dają oczekiwany efekt.

Oto całość definicji głownego obiektu (w pokazanej tu w miniaturze wersji demonstracyjnej zmieniłem rozmiary i position:absolute na position:relative.):

#main {position:absolute; left:50%;
width:700px; height:450px;
margin-top:50px; margin-left:-350px;
border:dashed 5px #aaa;
background-color:transparent;
padding:1px;
z-index:10;}

Wypośrodkowany jest we wspomniany powyżej sposób, a górny margines umieszcza go na stałe 50 pikseli od górnej krawędzi ekranu: margin-top:50px;

Krawędzi użyłem dla uzyskania konstrukcyjnego efektu: border:dashed 5px #aaa;; optycznie zamyka to całość w wyraźnym bloku.

Tło jest przeźroczyste background-color:transparent;

Zachowałem minimalny odstęp zawartości od krawędzi, tak żeby obiekty w żadnym wypadku nie nachodziły na siebie: padding:1px;

Natomiast niska wartość z-index:10; utrzymuje go pod obiektami na wierzchu, które mają z-index:100.

Zalety wad Internet Explorera

Jest to mniej więcej połowa wysokości tego dokumentu. Użytkownicy zgodnych z CSS przeglądarek mają menu cały czas po prawej stronie, umieszczone na stałe 20 pikseli od górnej krawędzi ekranu. Użytkownicy Internet Explorera widzą w tym miejscu tylko białe tło.
Do testowania używam Internet Explorera 5.5, który jest jedną z dwóch najbardziej popularnych przeglądarek na świecie (drugą jest MSIE6). Jest to dość nowoczesny program, czasem tylko zamiast się uruchomić pokazuje komunikat o zawieszeniu, ale przeważnie chwilę potem już da się go używać. Nie będę opisywał szczegółowo jak wygląda ta strona w MSIE, najkrócej mówiąc: wygląda źle. W każdym razie w porównaniu z Operą czy Firefoksem czcionka jest mniej czytelna a niektóre krawędzie nie są wyświetlane (chociaż nic ich nie zasłania) lub wyświetlane są błednie (przy przewijaniu linia przerywana zlewa się w ciągłą).
Nawet szósta wersja MSIE nadal nie realizuje position:fixed; ani dynamicznej zmiany rozmiarów obrazka i ma całą masę innych wad. Na szczęscie jedna z nich jest pożyteczna.

Internet Explorer znany jest ze swoich błędów, ale jeden z nich jest bardzo pożyteczny, odkrył go Tantek Çelik a jego możliwości zademonstrował na stronie: Box Model Hack, oto - w największym skrócie - na czym polega:

Kiedy Internet Explorer napotyka ten ciąg znaków "\"}\""; uznaje, że jest to koniec deklaracji dla obiektu i wszystko co jest dalej napisane nie ma już dla niego znaczenia, przechodzi do następnego obiektu. Tantek określa to 'CSS parsing bug', ale dzięki temu błędowi możemy sobie poradzić z innymi błędami MSIE. Trochę to przypomina browser-sniffera jest jednak znacznie prostsze, przydatne tylko czasem i tylko dla jednej przeglądarki.
Uwaga: metoda ta nie działa w stylach wpisanych.

.ie {display:block; "\"}\""; display:none;}
.noie {display:none; "\"}\""; display:block;}

Jest to dobry sposób na oddzielne właściwości obiektów dla MSIE i innych zgodnych z CSS przeglądarek. Można lepiej dopasować stronę do użytkownika. Można utworzyć osobne klasy obiektów dla najpopularniejszej przeglądarki a osobne dla prawidłowych.
Wadą tej metody jest Parse Error walidatora CSS - pomimo formalnie poprawnego arkusza stylu.

Ale można użyć także innych sposobów. MSIE to technologicznie zacofana przeglądarka (nawet w najnowszej wersji).
Pomimo deklarowanego przez Microsoft wsparcia dla standardów pod tym względem jest daleko w tyle za Operą i Mozillą. Jeśli chodzi o inne cechy również nie reprezentuje żadnych zalet, może poza tą, że w świeżo zainstalowanym MS Windows 'już jest'. Naturalnie ponieważ jest 'standardem de facto' istnieją strony działające tylko w MSIE, ale nie wynika to z jakichś zalet tej przeglądarki, a tylko z jej popularności.

Jedną z nieobsługiwanych cech CSS2 jest selektor > - dlatego można zastosować następujące rozwiązanie.

.ie {display:block;}
body > .ie {display:none}

Jak widać działa to na trochę innej zasadzie. Używając tego mechanizmu można poprawnie przejść walidację CSS.
Uwaga: obiekt przed selektorem musi być bezpośrednim rodzicem.

.ie {display:block;}
div > .ie {display:none;}
.noie {display:none;}
div > .noie {display:block;}

W tej chwili używasz Internet Explorera. Są tu dwa prawie identyczne obiekty div ale dzięki wykorzystaniu wady - nieczytania przez MSIE selektora > - tylko jeden jest widoczny.

.ie {display:block;}
div > .ie {display:none;}
.noie {display:none;}
div > .noie {display:block;}

Menu po prawej stronie jest niewidoczne, prawda?
Jeśli chcesz je cały czas widzieć użyj lepszego programu.
Zacytowany powyżej kod ma wygląd zdefiniowany jako blokowy cytat CSS (należy do klasy "cssquote") i Internet Explorer pokazuje to prawidowo. Ale po przeładowaniu strony wygląd cytatu różni się od zamierzonego.

Oglądasz tę stronę przy użyciu przegladarki innej niż Internet Explorer. Są tu dwa prawie identyczne obiekty div ale dzięki wykorzystaniu wady - nieczytania przez MSIE selektora > - tylko jeden jest widoczny.

.ie {display:block;}
div > .ie {display:none;}
.noie {display:none;}
div > .noie {display:block;}

Rozmieszczenie elementów wewnątrz obiektu głównego

Zrobiłem to w dwóch etapach:

Utworzyłem trzy zagnieżdżone w głównym obiekcie div-y szarej barwy z ciemniejszą krawędzią:
```
{position:relative; left:0; top:0; border:solid 1px #aaa; background-color:#eee; color:#666;}
```
Właściwości te zachowałem dla górnego: tak właśnie początkowo wyglądały wszystkie trzy.
Różnica koloru tła i obiektu oraz cieńka ale widoczna krawędź jest konieczna jeśli chcemy dokładnie widzieć jak się rozmieściły obiekty. Ten etap przebiegł bez najmniejszych problemów.
Wewnątrz środkowego umieściłem trzy obiekty. Początkowo jednakowej szerokości i pozycjonowane absolutnie. Później jednak najskuteczniejszą okazała się najprostsza technika zaprezentowana w witrynie A List Apart w artykule pod tytułem: Practical CSS Layout Tips, Tricks and Techniques: polega ona na użyciu atrybutu float, który wyłącza obiekty z ich naturalnego biegu.
Kiedy okazało się, że rozmieściły się tak jak chciałem usunąłem środkowy obiekt w którym były zagnieżdżone. Używając CSS należy dążyć do jak największej prostoty, nie musimy wszystkich obiektów hierachicznie zagnieżdżać - to nie tabela. Niepotrzebne zagnieżdżenia komplikują pisanie arkuszy stylów. Początkowo prawy obiekt miał atrybut float:right; ale ponieważ wystawał poza krawędź zmieniłem tą wartość na left i już było w porządku.
Ponieważ każdy z nich wygląda inaczej ich deklaracje różnią się ale są proste i mają część wspólną:
```
#nazwa {float:left; width:szerokość_w_pikselach; height:wysokość_w_pikselach;}
```
Jeżeli nie chcą się rozmieścić tak jak planowaliśmy należy sprawdzić czy mają dość miejsca, zobaczyć jakie mają marginesy i jaką wartość odstępu ma obiekt, w którym są zawarte, dobrze jest zmniejszyć wielkość a potem odpowiednio ją dobrać. Na tym etapie odrobina cierpliwości może zdziałać cuda.

A oto mała demonstracja (jak widać dla wygody trochę uprościłem kod):

position:relative; width:99%; height:50px; left:0; top:0; border:solid 1px #aaa; background-color:#eee; color:#666; margin:1px;

float:left; width:32%; height:100px; border:solid 1px #aaa; background-color:#eee; color:#666; margin:1px;

float:left; left:0; top:0; width:99%; height:50px; border:solid 1px #aaa; background-color:#eee; color:#666; z-index:10; margin:1px;

I koniecznie na każdym etapie należy sprawdzać efekt na możliwie dużej ilości przeglądarek. Obecnie są pod względem interpretacji CSS dużo bardziej zgodne ze standardami niż kiedyś ale jest to nadal zgodność wymagająca dopasowania.

Kiedy to sprawdzałem wszystko było w porządku... dopóki nie włączyłem Internet Explorera. Ktoś złośliwy mógłby stwierdzić, że Microsoft nie musi się stosować do standardów, może przecież narzucić własne; ale jeżeli robisz strony internetowe, niezależnie od swojego poglądu na tę korporację i jej produkty nie możesz zlekceważyć tego jak to co zrobiłeś wygląda w MSIE.

Problem, który wystąpił polegał po prostu na tym, że trzeci z poziomych obiektów był umieszczony na innej wysokości w Internet Explorerze niż w innych przeglądarkach. Dzięki zastosowaniu obejścia CSS rozwiązanie polegało po prostu na podaniu wartości top: dwukrotnie:

#nazwa {position:relative; top:wartość_dla_MSIE;}
obiekt_nadrzędny > #nazwa {top:wartość_dla_innych_przeglądarek;}

MSIE ponieważ nie rozumie selektora > pominął drugą definicję, a inne przeglądarki użyły - zgodnie z CSS - ostatniej z podanych wartości.

Powyższy opis odnosi się do wersji sprzed dwóch lat. Obecnie obiekty w środku są pozycjonowane przez position:absolute;. Spowodowane jest to wymogami dostępności, po prostu MSIE 5.0 (która nadal ma około 3% użytkowników) nie rozumie atrubutu float.

Tytuł i dolny odnośnik 'LINKS'

Przed chwilą pisałem, że nie musimy zagnieżdżać obiektów a jednak zarówno tytuł jak i odnośnik 'LINKS' umieściłem wewnątrz głownego obiektu. Dlaczego?

Mogłem dać dowolną (np. w procentach) wartość atrybutów left i top po position:absolute;, ponieważ główny obiekt jest trwale umieszczony 50 pikseli poniżej krawędzi ekranu nie mógł mi uciec i tytuł tak czy inaczej byłby mniej więcej na właściwym miejscu, no właśnie - mniej więcej. Okazuje się bowiem, że pozycjonowany w ten sposób tytuł zależnie od szerokości ekranu pojawia się czasem w niezbyt proporcjonalnej odległości co daje często niepożądany efekt.

Oczywiście mogłem go pozycjonować tą samą metodą co obiekt główny ale umieszczenie go wewnątrz i określenie ujemnej wartości położenia pionowego:

#nazwa {position:absolute; display:block; left:310px; top:-50px;}

było prostsze i trwale w proporcjonalny sposób powiązało go z obiektem głównym.
To samo dotyczy obiektu 'LINKS'.

Uwaga: jeśli chcemy umieszczać znaki typu >, <, & w tekście należy je zapisać używając encji w ten sposób: >, <, &

Górny blok

Sam w sobie jest dobrym przykładem tego jak łatwo można rozmieszczać tekst w blokach i bez użycia tabeli osiągnąć ciekawy efekt wizualny, łatwy do kontroli i zmiany przez edycję arkuszy stylów. To do czego trzeba by użyć dodatkowych komórek tabeli i 'przezroczystych gifów' tu polega tylko na określeniu koloru tła, właściwości krawędzi oraz wartości marginesów i wewnętrznego odstępu.

#nazwa {position:relative; left:0; top:0; border:solid 1px #aaa; background-color:#eee; color:#666; padding:0.5em; margin:0.5em;}

Znajomość specyfikacji CSS zamienia arkusze stylów i obiekty div w potężne narzędzie do edycji stron www.
Tutaj dla lepszego wyglądu dodałem margines i wewnętrzny odstęp. Okazuje się, że nawet najpotężniejsze narzędzie ma swoje ograniczenia, bo - nie wiem dlaczego - Internet Explorer nie pokazuje górnej krawędzi.
Nie pisałbym tyle o MSIE - ale to bardzo popularna przeglądarka...

Takie menu zobaczyłem po raz pierwszy na stronie Erica Meyera: css/edge (koniecznie musisz ją zobaczyć). Warto uważnie przejrzeć całą witrynę i dokładnie prześledzić to co tam zaprezentował.
Jak łatwe byłoby życie projektanta stron www gdyby przynajmniej znakomita większość przeglądarek stosowała się do specyfikacji CSS - chociażby tylko na pierwszym poziomie. Można by wtedy skupić się na tym co stanowi istotę tworzenia witryny: na projektowaniu, na tworzeniu layoutu i wypełnianiu go treścią i wreszcie zapomnieć o konieczności stosowania sztuczek, obejść, wytrychów, trików, łomów, przekleństw i innych narzędzi przydatnych każdemu webmasterowi.

Na szczęście menu zademonstrowane i szczegółowo wyjaśnione na Pure CSS Popups działa wszędzie, nawet w Internet Explorerze.
Sam efekt wypełnienia przez odnośnik całego bloku wewnątrz obiektu realizuje się w sposób, którego prostoty (jeśli go jeszcze nie znasz) nie mógłbyś sobie wymarzyć - dla odnośników umieszczonych w obiekcie:

<div>
<a>nazwa_odnośnika</a>
<a>nazwa_odnośnika</a>
...
</div>

Wstawia się deklarację:

div#nazwa a {display:block;}
div#nazwa a:hover {zmiana_wyglądu_po_najechaniu_kursorem;}

Ta jedna właściwość CSS1 sprawia, że niepotrzebne staje się wykrywanie pozycji kursora, umieszczanie obrazków wewnątrz odnośników tylko po to, żeby były wypełnione do określonych rozmiarów. Wreszcie można zachować onMouseOver i OnMouseOut na bardziej wyjątkowe okazje.
Przeczytaj również artykuł CSS Design: Taming Lists w witrynie A List Apart, zobaczysz jakie możliwości daje zręczne wykorzystanie list. Tak, oczywiście: list - zwyczajnych trochę już zapomnianych po włożeniu całego internetu w tabele list <ul> <li></li> <li></li> ... </ul>
Na końcu tego artykułu możesz zobaczyć doskonale wykonane menu tego typu - z prezentacją i wyjaśnieniem kodu.

Ale na stronie Erica można zobaczyć, że po najechaniu kursorem linku pod spodem pokazują się komentarze. Chociaż można tworzyć dowolnej wielkości strony internetowe ekran użytkownika (i jego cierpliwość) ma wielkość dość ograniczoną i możliwość wyświetlenia uprzednio ukrytego komentarza może być przydatna - skoro ktoś wyraził zainteresownie obiektem, najeżdżając nań kursorem dobrze jest móc wyjaśnić czym się zainteresował.

Na czym więc cała rzecz polega?
Na umieszczeniu obiektu span wewnątrz odnośnika, wygląda to w ten sposób:

<div>
<a>nazwa_odnośnika<span>komentarz</span></a>
<a>nazwa_odnośnika<span>komentarz</span></a>
...
</div>

A za ukrycie treści komentarza i pokazanie go po najechaniu kursorem odpowiada ta deklaracja w arkuszu stylów:

div#nazwa a span {display:none;}
div#links a:hover span {display:block; position:absolute; określenie_położenia_i_reszty_atrybutów;}

Prawda, że proste?

W ten sam sposób można umieszczać - i wyświetlać - obrazki (Eric Meyer: Pure CSS Popups 2):
Zamiast obiektu span w odnośniku umieszcza się img

<a>nazwa_odnośnika<img /></a>

A za ukrycie go i wyświetlenie odpowiada ta deklaracja:

div#nazwa a img {height:0; width:0; border-width:0;}
div#nazwa a:hover img {position:absolute; wartości_położenia_i_rozmiarów;}

Ale Internet Explorer nie obsługuje dynamicznej zmiany rozmiarów obiektu img. Opisuje to dość dokładnie Eric Meyer (Pure CSS Popups 2b), podając sposób ominięcia tego (ale nie rozwiązania). Otóz można podać deklarację:

div#nazwa a img {display:none;}

Jeśli zrobimy to w ten sposób obrazek po najechaniu kursorem na odnośnik pokaże się, ale potem już nie zniknie. Nie jest to dokładnie to o co chodziło, ale nic więcej się nie da zrobić. To wada Internet Explorera, więc jeśli go używasz nie możesz skorzystać z pełni możliwości CSS.

Czyżby javascript był już niepotrzebny do tworzenia menu? Zwyczajne pionowe menu można już tworzyć wykorzystując wyłącznie CSS, ale jeśli chcemy mieć wysuwane menu takie jak jest na stronie Netscape DevEdge konieczne jest zastosowanie javascriptu. Przyczyną tego nie są ograniczenia CSS - bo dla prawidłowo czytającej kod przeglądarki wykonanie czegoś takiego jest bardzo proste - ale błędy w interpretacji CSS. Po prostu trzeba używać javascriptu, ponieważ przeglądarki, których używają internauci są złe. Sam javascript nie jest z jakichś powodów złym rozwiązaniem - to co napisałem oznacza tylko, że oprogramowanie wymusza zastosowanie rozwiązania bardziej skomplikowanego i mniej uniwersalnego.

Na zakończenie tego rozdziału jeszcze jedna uwaga techniczna: konsekwentne zastosowanie CSS oznacza również dbałość o to co widzą użytkownicy przeglądarek tekstowych lub przestarzałych. Tymczasem umieszczone w obiekcie div odnośniki z atrybutem display:block; będą je widzieć w jednym rzędzie, niczym nie oddzielone; daje to bardzo nieczytelny efekt, trudno na pierwszy rzut oka stwierdzić gdzie się zaczyna jeden odnośnik a gdzie zaczyna drugi. Najprostszym rozwiązaniem jest wstawienie między nie znacznika <br />. Oczywiście spowoduje to pojawienie się dość dużych odstępów pionowych w przeglądarkach CSS i popsuje cały efekt wizualny, ciężko temu zaradzić nawet wpisując negatywne marginesy pionowe ale jest jest na to sposób. Można przypisać znacznikom klasę np. <br class="hide" /> i ukryć ją w nowych przeglądarkach:

.hide {display:none;}

W ten sam sposób ukryłem znaczniki <hr />, którymi rozdzielam obiekty div dla lepszego efektu w trybie nie-CSS.

Prosta demonstracja

HTML <div id="demolinx">
<a href="#"> HTML <span>
[..HTML..]
</span> </a><br class="old" />
<a href="#"> CSS <span>
[..CSS..]
</span> </a><br class="old" />
<a href="#"> ilustracja <img src="img/vcss.png" alt="Made with CSS" width="88" height="32" /> </a><br class="old" />
</div>
CSS div#demolinx {position:relative; height:5em; z-index:100;}
div#demolinx a {display:block; width:10em; padding:2px; margin:0.2em 0; z-index:100;}
div#demolinx a:hover {background-color:#ddd; color:#333;}
div#demolinx a span {position:absolute; width:500px; left:1em; top:10em; display:none; z-index:100;}
div#demolinx a img {display:none; width:0; height:0; border:0;}
div#demolinx a:hover span {display:block; text-decoration:none;}
div#demolinx a:hover img {position:absolute; display:block; left:1em; top:10em; width:88px; height:31px;}
.old {display:none;}
ilustracja

Używasz Internet Explorera, niestety jest to program, którego zgodność z CSS pozostawia wiele do życzenia. O ile wyświetlanie (i późniejsze ich ukrywanie) przebiega bez zarzutu to ilustracja po wyświetleniu nie znika kiedy kursora nie ma już nad odnośnikiem. Nie znikają również fragmenty tekstu wystające poza główny obiekt ("block"). Musisz odświeżyć ekran.
Poza tym specjalnie dla MSIE musiałem ukryć pokazujący się tekst pod przeźroczysstym div-em o wysokim z-indeksie, żeby nie pojawiał się po najechaniu muszą na miejsce, które zajmował.
Rozważ zmianę przeglądarki.

Użytkownicy Internet Explorera widzą w tym miejscu komentarz dotyczący sposobu wyświetlania CSS przez ich przeglądarkę

Niestety, nie da się używając tej metody zbudować nawigacji. Wprawdzie, jeśli w reakcji na zdarzenie a:hover zmienimy parametr padding-bottom (lub też odstęp w innym kierunku - zależnie jak są umieszczone spany) to wyświetlony tekst będzie widoczny dopóki będzie umieszczony nad nim kursor, ale wszystko co jest wyświetlone jest wnętrzem odnośnika, a specyfikacja HTML zabrania zagnieżdżania odnośników.

Środek

Zrobienie tego jest tak proste, że najpierw muszę coś wyjaśnić.

Tyle razy już podkreślałem jak proste jest konsekwentne zastosowanie CSS do budowy strony www, że można by odnieść wrażenie iż nie wymaga właściwie żadnych umiejętności. Nie jest to prawda ponieważ trzeba wyobraźni, żeby konsekwentnie wybierać proste rozwiązania.
Z kilku powodów podkreślam łatwość stosowania CSS - największym z nich jest to, że wreszcie można się skoncentrować na tym co jest najważniejsze: na projektowaniu. Drugim powodem jest fakt, że CSS jest relatywnie łatwą metodą. W porównaniu z katorżniczym namnażaniem tabel w tabelach i zawiłymi, nie zawsze i nie w każdej przeglądarce działającymi javascriptami CSS jest adekwatnym sposobem tworzenia właściwych efektów wizualnych. Trzeba się go jednak nauczyć i uważnie przyglądać się jak go stosują inni.
Ale bywa i tak, że najprostsze i najskuteczniejsze techniki wymagają obejścia poprzez niezastosowanie ich. Wbrew pozorom to właśnie czasem sprawia trudność.

Jak rozmieściłem obrazki z odnośnikami w centrum obiektu głownego? Było to proste, w ogóle ich nie rozmieściłem.

Jeśli uważnie czytasz te objaśnienia od początku pamiętasz, że środek to prostokątny div umieszczony w centrum dzięki atrybutowi float:left, on również nie jest w żaden sposób rozmieszczony, jego pozycja nie jest określona wprost w arkuszu stylów i wynika wyłącznie z określonego w arkuszu sposobu w jaki sposób ma zostać umieszczony tam gdzie wypadnie jego miejsce, co z kolei zależne jest od tego gdzie znajduje się sam znacznik w kodzie.
Podobnie te obrazki w odnośnikach. Po prostu są wewnątrz obiektu div a ich rozmieszczenie i pozycja wynika wyłącznie z właściwości ich maginesu oraz odstępu wewnątrz div-a. Wielkość marginesu (inna w pionie niż w poziomie) jest jedyną właściwością jaką musiałem im przypisać, żeby się proporcjonalnie ułożyły.

Tak opisany jest obiekt w którym się znajdują:

#nazwa {float:left; width:200px; height:140px; background-color:transparent; color:#ddd;}

Dzięki temu, że div, w którym się znajdują nie ma krawędzi i jest przeźroczysty wydają się być umieszczone bezpośrednio na tle. Czemu określiłem kolor? To snobizm - po prostu chcę przejść bez żadnych zastrzeżeń przez walidację CSS a brak określenia koloru znaków przy określeniu koloru tła wywołuje ostrzeżenie (tak samo jak identyczny kolor tła i znaków).

Prawe menu

Po pochwale prostoty pora na zalety innowacyjności. Rozwiązania użytego w prawym menu nie nazwałby skomlikowanym, jest ono dość oczywistym rozwinięciem metody przedstawionej przez Erica Meyera, które można przedstawić w jednym zdaniu: każdemu odnośnikowi został przypisany identyfikator i dla tego identyfikatora określono obrazek tła oraz zmianę tego obrazka na inny po najechaniu na odnośnik kursorem.

W kodzie wygląda to tak:

<div id="nazwa">
<a id="identyfikator">nazwa_odnośnika</a>
<a id="identyfikator">nazwa_odnośnika</a>
...
</div>

Co w arkuszu wykorzystujemy w ten sposób:

#identyfikator {position:relative; display:block;
background: url(ścieżka_dostępu/nazwa_pliku1.ext) transparent;
wielkość_i_właściwości_tekstu;}
div#nazwa a#identyfikator:hover {background: url(ścieżka_dostępu/nazwa_pliku2.ext) transparent;
właściwości_tekstu_po_najechaniu_kursorem;}

Początkowo wykorzystałem osobnego div-a w odnośniku, ale to rozwiązanie odrzucił mi walidator, na szczęscie okazało się, że właściwości przypisane obiektowi div bez problemu można zastosować i do odnośnika.

Dolny blok

Nie jest to tak jakby można się spodziewać po prostu ilustracja img wewnątrz obiektu div. Gdyby tak było to dla odnośnika 'copy2003 - redesign' potrzebowałbym osobnego obiektu div i musiałbym go jakoś umieścić we wlaściwym miejscu. Nie byłoby to prawdopodobnie zbyt trudne.
Ale po co to robić skoro można odnośnik umieścić po prostu w jego wnętrzu a obrazek umieścić jako tło obiektu nadrzędnego. Paragraf, w którym się znajduje odnośnik ma identyfikator i w arkuszu stylów został wyrównany w prawo przez float:right; a w dół jest przesunięty odpowiednią wartością górnego marginesu.

Przyznam się, że zanim tak zrobiłem próbowałem bardziej skomplikowanych metod.
Zawiodły.

A na tej stronie:

To co teraz widzisz jest przykładem stylu minimalistycznego: proporcjonalnie rozmieszczone bloki tekstowe, łatwe do rozbudowy lub reedycji; niewielka ilość kodu (strona składa się głownie z samego tekstu); wygodna nawigacja (no chyba, że używasz Internet Explorera lub jakiejś innej przegądarki nie obsługującej atrybutu position:fixed) i przede wszystkim skuteczne zarządzanie wyglądem.

Bloki tekstowe są umieszczone w obiektach div, które wyglądają tak:

<h2><a id="nazwa_odnośnika"></a>A na tej stronie:</h2>

<div class="block">
... tu zawartość obiektu...
</div>

Jak widać są umieszczone w klasie "block" a jej wygląd określa bardzo krótka definicja:

.block {position:relative; width:70%; border:dashed 1px #699aa;
background-color:#ffe; color:#333;
margin:2em; padding:1em; line-height:1.4em;}

I to wystarczy. Najważniejsze jest określenie: position:relative; width:70%;, które zapewnia prawidłowe rozmieszczenie i szerokość obiektu.

W podobny sposób umieszczone jest menu:

#menu {position:absolute; display:block; left:75%; width:25%; top:20px;}
body #menu {position:fixed;}

Oczywiście najpierw określona jest pozycja dla Internet Explorera potem, w sposób dla niego nieczytelny bardzo pożyteczna deklaracja position:fixed; dla poprawnych przeglądarek, zapewniająca cały czas widoczność menu. Gdybym nie użył tego błedu MSIE umieściłby menu u góry nad blokami tekstu zamiast obok.

W podobny sposób określiłem wygląd wszystkich innych elementów tego dokumentu, zarówno cytatów - tych blokowych "cssquote" jak i inline "cssquoteil" oraz wyróżnień istotniejszych fragmentów tekstu "attention" (o bardziej ogólnym znaczeniu - jak ten, który jest poniżej).

Używając wyłącznie CSS, nie muszę zajmować się drobiazgami i zastanawiac się jakie dokładnie mogą być efekty zmiany danego parametru, czy tabela się nie rozsypie, czy raczej zmienić cellpadding czy może wielkość 'przeźroczystego gifa'.
Jeśli mam do czynienia z obiektami div, wystarczy że sprawdzę jakie mają identyfikatory, do jakich klas należą i w arkuszu stylów widzę ich właściwości, które z łatwością mogę zmieniać bezpośrednio a nie poprzez nieczytelną warstwę struktur i zagnieżdżeń tabel.
Jedyne czego potrzebuję to określenie pozycji (position:) oraz własności: wewnętrznego odstępu (padding:), krawędzi (border:) oraz marginesu (margin:); wygląd mogę doprecyzować atrybutami tła (background:) i fontu (font:). Wszystko to bezpośrednio, nie używając technik przeznaczonych w zasadzie do innych zastosowań.
Projektowanie oparte na CSS ma jeszcze jedną ważną cechę - także widoczną na frontscreenie - jest niedokładne.
Z pozoru brzmi to mało zachęcająco, ale w gruncie rzeczy chodzi o rzecz naturalną dla takiego medium jakim jest internet.
Istotna jest czytelność treści, ogólny wystrój, funkcjonalna nawigacja. Nienaturalna dla internetu wywodząca się z DTP tradycja pozycjonowania wszystkiego za wszelką cenę z dokładnością do jednego piksela powoduje zamieszanie jeśli użytkownik będzie miał inną przeglądarkę niż przewidział to autor strony. Bardziej swobodne potraktowanie jest korzystne dla obu stron. Projektant nie musi się martwić o ściśnięcie layoutu co do piksela, a internauta otrzyma czytelną zawartość niezależnie od tego jakiego oprogramowania użyje. Nigdzie w tej witrynie nie dociskałem na siłę elementów, a cały projekt i jego rozwinięcie powstawał na bieżąco raczej w wyniku rozwoju układu 'zbiorników' zawartości, czyli elementów strukturalnych HTML (listy, div i span).

Tylko raz pojawił się powązniejszy problem - przy demonstracji działania napisów i obrazka pokazujących się po najechaniu myszą na odnośnik. W Internet Explorerze tekst wprawdzie prawidowo pojawiał się na wyznaczonym miejscu i znikał w momencie kiedy kursora już nie było nad odnośnikiem ale nadal zajmował tam miejsce i pojawiał się natychmiast kiedy kursor pojawiał się nad nim; było to nieprawidłowe i nie dawało się usunąć. Umieściłem więc w tym miejscu przezroczysty div o wyższym z-indeksie, przy okazji tworzy krawędź.

Okazało się, że materiału jest dość dużo - sam plik HTML ma ponad 50KB - ale jest to w zasadzie sam tekst. Teraz wyobraź sobie, że zrobiłbym to w tabeli, wyrównując tekst dodatkowymi kolumnami i 'przeźroczystym gifem' a do ustawienia menu użyłbym zewnetrznego javascriptu, który musiałby się załadować, wykryć z jaką przeglądarką ma do czynienia a potem stale zajmować miejsce w pamięci. Musiałbym zastosować jedną dużą tabelę a w niej podwójne zagnieżdżenie, lub długą sekwencję tabel - a żadne z tych rozwiązań nie jest optymalne. Każda zmiana wyglądu musiałaby być dokonywana bezpośrednio w kodzie HTML: osobno dla każdego elementu. Zamiast tego mam kilka rodzajów obiektów div łatwo opisywalnych poprzez klasy i identyfikatory a jedyne co muszę zrobić w HTML-u to umieszczać tekst między znacznikami <div> i <span> oraz zawijać linie przy pomocy <br />.

That's all Folks!

HOW TO

Wstęp

Narzędzia

Tło