Jeżeli jeszcze nie przekonałeś się do zalet XHTML-a i nadal tworzysz projekty w oparciu o poczciwe tabele, przeczytaj ten artykuł. Pokażemy w nim, jak w szybki i bezbolesny sposób uaktualnić przestarzały kod strony.
Wszechobecność stron internetowych sprawia, że łatwo zapomnieć o tym, jak młodą dziedziną jest sztuka projektowania witryn internetowych. Ma ona zaledwie nieco ponad dziesięć lat – to wtedy do HTML-a obsługiwanego przez przeglądarkę Mosaic wprowadzono nieoficjalnie tag {stala}CENTER{/stala}, pozwalający autorom strony wyrównać jej zawartość.
Fakt ten znakomicie obrazuje, jak wymyślny stał się webdesign oraz layout stron w relatywnie niedługim przecież czasie. W roku 1996 typograf David Siegel, proponując sposób emulacji wyglądu druków (jak gazety, magazyny itp.), instruował projektantów, w jaki sposób używać tabel do tworzenia layoutu strony, jak wypełniać ich komórki treścią oraz rozciągać jednopikselowe GIF-y w celu osiągnięcia porządnych białych znaków w celu uzyskania \”zabójczej strony\” (killer website).
Książka Siegela \”Creating Killer Web Pages\” stała się bestsellerem, jednak już w ciągu kolejnych dwóch lat Siegel odwołał to, co w niej wcześniej napisał – sławne stało się jego stwierdzenie \”internet jest martwy i to jak go zabiłem\” (\”The web is dead and I killed it\”). Odnosił się on w tym zdaniu do faktu, że chociaż jego projekty opierały się na tabelach oraz sztuczkach z HTML-em, takich jak jednopikselowe GIF-y służące do robienia odstępów, to strony nigdy nie powinny być budowane w ten sposób.
CSS kontra tabele
Wciąż rośnie liczba projektantów świadomych zalet, jakie niesie ze sobą użycie CSS (Cascading Style Sheets) podczas projektowania layoutu stron internetowych, oraz tego, że tabele powinny być używane jedynie do prezentowania danych tabelarycznych, takich jak na przykład kalendarze. Jednak mimo fascynacji społeczności twórców witryn internetowych możliwościami, jakie daje wykorzystanie CSS do nadania stylów elementom stron oraz wyboru używanych czcionek, niektórzy wciąż niechętnie podchodzą do pomysłu porzucenia tabel.
Najczęściej spotykanym wytłumaczeniem tego faktu jest to, że layout utworzony z wykorzystaniem CSS cierpi na brak intuicyjności, jaką wydają się oferować tabele – gdy tylko utworzysz zarys szablonu strony, a następnie zadecydujesz, jak wiele precyzyjnie rozlokowanych tabel potrzebujesz, możesz z łatwością wypełnić je treścią. Dla kontrastu, wczytanie zewnętrznego pliku, nauka odmiennej składni języka oraz przełączanie się pomiędzy edytorem HTML, plikiem CSS oraz przeglądarką sprawia wrażenie najbardziej zagmatwanej, nieprzyjaznej i zastraszającej technologii.
Dlaczego więc powinieneś sprawiać sobie kłopot, korzystając z CSS? Pierwszym i najważniejszym powodem jest to, że CSS pozwoli ci na odseparowanie treści strony od jej wyglądu.
Dostępność Internetu pociąga dziś za sobą konieczność dostępu do stron internetowych nie tylko z poziomu takich programów jak Internet Explorer czy Firefox na PC, ale także z poziomu telefonów komórkowych lub innych przenośnych urządzeń, czasem dodatkowo wyposażonych w drukarkę czy inne urządzenia peryferyjne, umożliwiające dostęp do treści strony np. niewidomym. Pod tym względem layout oparty na tabelach staje się nonsensem. Użycie stylów pozwala ci na bezproblemowy wybór odpowiedniego projektu stosownie do oprogramowania czy też sprzętu, jaki jest wykorzystywany do jego obejrzenia.
Wyobraź sobie, jak wiele czasu możesz zaoszczędzić, gdy chcąc zmienić kolorystykę strony, dokonujesz edycji tylko jednego pliku, podczas gdy w przypadku witryny HTML opartej na tabelach musiałbyś modyfikować kolejno każdą ze stron. Podobnie, gdy budujesz wiele stron, możesz ponownie wykorzystywać fragmenty ich layoutu poprzez wywołanie reguły CSS w miejscu definicji layoutu lub poprzez ponowne powielenie stylu (kopiując go np. z innego pliku).
Użycie CSS ma swoje odbicie również w czasie ładowania się strony oraz w liczbie odwołań do serwera – twoja strona nie tylko ma krótszy kod, ale i wczytuje się szybciej dzięki porzuceniu tabel oraz jednopikselowych obrazków.
Zaczynamy pracę
Tym, co powinno stać się dla ciebie oczywiste po przeczytaniu kolejnych kilku stron, jest fakt, że CSS jest technologią prostszą, niż się to wydaje. Aby to zademonstrować, skorzystamy z prostego layoutu opartego na tabelach oraz dokonamy jego konwersji do CSS w trzech krokach – najpierw zidentyfikujemy kluczowe powierzchnie projektowe strony, następnie usuniemy cały niepotrzebny kod HTML, aż w końcu użyjemy CSS w celu kontrolowania wyglądu strony.
Celem każdego projektu używającego CSS jest ukończenie projektu z wykorzystaniem dobrze zbudowanej struktury tagów w sekwencyjnej kolejności oraz z wyglądem tak bardzo, jak to tylko możliwe, przypominającym oryginalny layout na tabelach.
Dekonstrukcja projektu
Prawdopodobnie jesteś zaznajomiony z budową bloków twojego projektu. Jeżeli nie, w kodzie swojej strony znajdziesz doskonałe informacje na temat jej budowy. Jeśli używasz głównej tabeli w projekcie strony, ustaw jej krawędzie ({stala}borders{/stala}) poprzez nadanie im wartości 5 lub większej. Jeśli natomiast używasz SSI (Server Side Includes), wówczas prawdopodobnie już myślałeś nad tym, w jaki sposób najlepiej pociąć projekt strony na mniejsze fragmenty.
Jeśli popatrzysz na przykładowy obrazek, wówczas ujrzysz, że główna przestrzeń zawiera nagłówek, element nawigacyjny (menu), a po prawej stronie treść i stopkę zlokalizowaną na samym dole. Do poszczególnych elementów dodaliśmy komentarze, tak żeby móc je później (po usunięciu zbędnych tagów) łatwo odróżniać.
Podczas dodawania komentarzy we własnym projekcie nie zapomnij o komentarzach na końcu poszczególnych bloków. Następnie usuń cały kod HTML formatujący stronę – wszystkie tagi tworzące tabele, określające czcionki, tworzące odstępy (np. przejścia do nowej linii, odstępy utworzone za pomocą jednopikselowych GIF-ów itp.). W efekcie na polu bitwy powinna pozostać jedynie sama treść oraz komentarze.
Tworzymy to wszystko od nowa
W celu zrozumienia idei budowania layoutu z użyciem CSS musisz najpierw zrozumieć, jak działa tak zwany box model (model pudełkowy). Z punktu widzenia wyglądu strony oznacza to, że każdy fragment na stronie jest prostokątnym elementem otoczonym przez marginesy, ramki oraz dopełnienie ({stala}padding{/stala}). Element taki możesz dowolnie pozycjonować na stronie, korzystając z właściwości {stala}float{/stala}.
Pływający element (o elementach z ustawionym parametrem float w CSS mówi się, że pływają) możesz ustawić z lewej bądź prawej strony, podając odpowiednią wartość tej właściwości (odpowiednio {stala}left{/stala} lub {stala}right{/stala}). Element ten zostaje wówczas oblany obiektami znajdującymi się w jego sąsiedztwie. My użyjemy tego typu elementów do pozycjonowania elementów kolumn, a mianowicie nawigacji i treści.
Jeśli nie chcesz, aby dany element został oblany elementami otaczającymi go, wówczas musisz zastosować właściwość {stala}clear{/stala} z wartościami {stala}left{/stala}, {stala}right{/stala} lub {stala}both{/stala}. Sposób działania tej metody możesz zaobserwować w naszej stopce.
Jako elementów zastępujących tabele będziemy używali kontenerów {stala}div{/stala}. Są nimi nazwane bloki elementów, na które mamy wpływ z poziomu CSS – element ten obejmuje większe bloki oraz wymusza przejście do nowej linii przed oraz po treści, którą obejmuje. Do mniejszych elementów skorzystamy z tagu {stala}span{/stala}, który nie powoduje przejścia do nowej linii, a więc nie zaburza porządku layoutu.
Ostatnią rzeczą, na którą musisz zwrócić uwagę, zanim zaczniemy budować nasz layout, jest fakt, że bez właściwej definicji typu dokumentu strona nie będzie mogła zostać poprawnie zinterpretowana przez większość przeglądarek. Jako że będziemy używali XHTML-a, nasza definicja typu dokumentu wygląda następująco:
Rozpoczynamy zatem od zastąpienia komentarzy otwierających i zamykających (jak dobrze pamiętasz, dodaliśmy je wcześniej) opisujących bloki, otwierającymi oraz zamykającymi tagami {stala}div{/stala}. Upewnij się przy tym, że odpowiednio ustawiasz parametry {stala}id{/stala} tworzonych kontenerów. W naszym przykładzie stworzony kod wygląda następująco:
Po szybkim sprawdzeniu efektów naszej pracy w przeglądarce okazuje się, że rezultaty pozostawiają wiele do życzenia. Ale nie martw się – dalej poczynimy odpowiednie kroki, aby nowa strona nabrała funkcjonalności początkowego projektu. Zauważ, że uzyskaliśmy teraz właściwe, sekwencyjne ułożenie informacji. Taka kolejność jest poręczna, odpowiada także kolejności, w jakiej czytnik (np. przeglądarka) zwraca informacje do użytkownika.
Dodajmy teraz style do arkusza stylów (style sheet). Aby zachować prostotę naszego przykładu, umieścimy arkusz stylów bezpośrednio w sekcji head pliku HTML. Jeśli jednak jesteś zaznajomiony z arkuszami stylów, wówczas lepszym rozwiązaniem będzie odwołanie się z poziomu strony HTML do zewnętrznego pliku. Dzięki temu będziesz mógł trzymać swój plik CSS w jednym miejscu i odnosić się do niego z poziomu wszystkich stron. Redukuje to wielkość pliku, a także skraca czas ładowania.
Dodajmy następujący kod sekcji {stala}head{/stala}:
Przykład layoutu
Nasz CSS dodawać będziemy w przestrzeni tagu {stala}style{/stala} (a więc pomiędzy tagiem {html}
{/html}). Dodamy teraz podstawowe style, określając takie elementy jak wielkość oraz rodzaj fontu ({stala}font-size{/stala}, {stala}font-family{/stala}) i kolor ({stala}colour{/stala}) bloku {stala}body{/stala}. Zauważ, że {stala}fontsize{/stala} zostało ustawione na wartość {stala}small{/stala}, która jest powiązana z wartością specyficzną dla danej przeglądarki, zazwyczaj mniejszą niż 12 pkt. – takie określenie wielkości czcionki jest bardzo istotne z punktu widzenia dostępności strony, gdyż pozwala użytkownikowi swobodnie zmienić jej wielkość z poziomu własnej przeglądarki, jeśli tylko ma taką potrzebę (np. słaby wzrok). Dodajemy jeszcze obrazek na tło naszej strony – tutaj jest to mały GIF, który przeglądarka powieli zarówno w pionie, jak i w poziomie.
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
color: #2f4f4f;
background-image: url(images/backer.gif);
margin: 0px;
padding: 0px;
}
Przyjrzyj się teraz sekcji nagłówka. W oryginalnym projekcie nagłówek zawierał obrazek oraz nazwę strony, jednak my dążymy do tego, aby nagłówek był przyjaźniejszy. Nadajemy więc nagłówkowi tło w postaci obrazka, a divowi nagłówka taką samą wysokość oraz szerokość, jaką ma ten obrazek. Następnie ustawiamy białą otoczkę wokół nagłówka, tworząc w tym celu dookoła niego ramkę o szerokości czterech pikseli. Ważne jest, aby odpowiednio policzyć szerokość kontenera zawierającego nagłówek – jako że powinien on mieć 700 pikseli, musisz od tej wartości odjąć 8 pikseli (po 4 na obramowanie z lewej i prawej strony), co daje w końcowym rozliczeniu 692 piksele.
#header {
background-image: url(images/header_blank.jpg);
width: 692px;
height: 60px;
border: 4px solid white;
}
Następnie zmieniamy tytuł, będący częścią obrazka do postaci tekstu. Umieść go w tagu {stala}h1{/stala} (wewnątrz bloku {stala}div{/stala} nagłówka), a następnie zdeklaruj czcionkę, jej wielkość oraz kolor tekstu. Gdy przyjrzysz się przykładowi poniżej, zobaczysz, że deklaracja stylu dla elementu {stala}h1{/stala} została połączona z identyfikatorem ({stala}id{/stala}) kontenera {stala}div{/stala} zawierającego nagłówek. Dzięki temu styl ten będzie stosowany tylko do tagów {stala}h1{/stala} znajdujących się wewnątrz kontenera o identyfikatorze {stala}id{/stala} i wartości {stala}header{/stala}.
W celu ulokowania tytułu strony w tym samym miejscu, w którym znajdował się on poprzednio, przesuń go z lewego górnego rogu nagłówka, korzystając z właściwości {stala}padding-top{/stala} oraz {stala}padding-left{/stala} wraz z odpowiednimi wartościami. Teraz tytuł strony jest widoczny dla każdego odwiedzającego witrynę, nawet wówczas gdy ma on wyłączone wyświetlanie obrazków.
#header h1 {
color: white;
font-size: large;
font-family: Arial, Helvetica, sans-serif;
margin-left: 34px;
margin-top: 14px;
}
Przejdź teraz do sekcji nawigacyjnej (lewa niebieska belka). Analizując poprzedni kod, zauważysz z pewnością, że nawigacja została w nim osadzona w komórce tabeli, która ma szerokość 216 pikseli, a odległość pomiędzy poszczególnymi jej komórkami ustalono na cztery piksele. Możesz odtworzyć te rozmiary, nadając kontenerowi z elementami nawigacyjnymi identyczną szerokość, natomiast obramowaniu wartość czterech pikseli. Musisz jeszcze ustawić tylko odpowiedni kolor tła nawigacji.
#navigation {
width: 216px;
margin-left: 4px;
background-color: #c8d8e8;
float: left;
}
Styl odnośników oraz ich pozycję w stosunku do kontenera nawigacyjnego tworzy się podobnie jak miało to miejsce w przypadku tytułu (i elementu {stala}h1{/stala} z nim związanego), z tą różnicą, że odnośniki znajdować się będą wewnątrz paragrafu (znacznik {stala}p{/stala}).
W celu wypozycjonowania paragrafu musisz przesunąć go z lewego górnego rogu kontenera nawigacyjnego do oczekiwanego położenia, w sposób analogiczny jak miało to miejsce dla znacznika {stala}h1{/stala}, jednak z nadaniem odpowiednich dla tego elementu wartości. Ustawienie odpowiedniego stylu tekstu umożliwi ci skorzystanie z właściwości argumentów {stala}font-size{/stala}, {stala}font-weight{/stala} oraz {stala}font-family{/stala} z odpowiednimi wartościami:
#navigation p {
margin-top: 45px;
margin-left: 30px;
font-size: medium;
font-weight: bold;
font-family: Arial, Helvetica, Sans-serif;
width: 125px;
border: 1px solid #2f4f4f;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 20px;
}
Przestrzeń zawierającą treść strony możesz wygenerować w analogiczny sposób. Utwórz zatem reguły budujące przestrzeń o szerokości 472 pikseli z białym marginesem o szerokości czterech pikseli z lewej i prawej strony.
Możesz tu zaobserwować zachowania się definiowanych jeden po drugim kontenerów. Domyślnie elementy {stala}div{/stala} umieszczane są pionowo jeden po drugim i wyrównane do lewej strony. Oczywiście musi to zostać zmienione – treść chcemy mieć z prawej strony belki nawigacyjnej, nie zaś pod nią. W naszym przypadku musisz nadać elementowi zawierającemu elementy nawigacyjne właściwość {stala}float{/stala} z wartością {stala}left{/stala}. Spowoduje to przyciągnięcie elementu {stala}content{/stala} do belki nawigacyjnej. Lecz belka wbrew naszym oczekiwaniom zostanie oblana treścią – my zaś oczekujemy, iż treść utworzy osobną kolumnę, z prawej strony nawigacji. Możesz temu zaradzić – dodaj wartość {stala}left{/stala} do właściwości {stala}float{/stala} w CSS odpowiadającym za położenie bloku {stala}content{/stala}. Dzięki temu uzyskasz dwie kolumny, jakich oczekiwałeś.
#content {
width: 472px;
margin-left: 4px;
margin-right: 4px;
padding-bottom: 70px;
float: left;
}
Jeśli przyjrzysz się oryginalnemu layoutowi opartemu na tabelach, zauważysz zagnieżdżoną tabelę użytą w celu stworzenia marginesu dookoła treści (20 pikseli z lewej oraz 30 z prawej strony). To samo możesz osiągnąć, używając CSS. Tytuł treści umieść w tagu {stala}h2{/stala}, natomiast samą treść wewnątrz paragrafu (tag {stala}p{/stala}). Oto kod CSS odpowiedzialny za odpowiednie formatowanie bloku content:
#content p {
padding-left: 20px;
padding-right: 30px;
}
#content h2 {
padding-top: 45px;
padding-left: 20px;
font-size: xlarge;
font-family: Arial, Helvetica, san-serif;
font-weight: normal;
}
W oryginalnym projekcie, w osobnej ramce umieszczonej w bloku content znajduje się dodatkowo krótka informacja o zawartości prezentowanej treści. Taki cytat bądź streszczenie umieść w tagu {stala}blockquote{/stala} (wewnątrz kontenera z treścią). Z elementu tego zrobimy pływającą ramkę z wyrównaniem do prawej strony. Położenie tego elementu zdefiniuj, korzystając z tych samych właściwości, co poprzednio, z odpowiednio dobranymi wartościami.
blockquote {
width: 160px;
margin-left: 10px;
margin-right: 20px;
font-size: small;
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-weight: bold;
padding-bottom: 20px;
float: right;
}
Po tym wszystkim możesz przystąpić do stworzenia stopki, co przebiega w sposób analogiczny do nagłówka – nadaj mu czteropikselowe obramowanie oraz szerokość określoną na łączną szerokość dwóch kolumn. Jeśli jednak już to zrobiłeś i sprawdziłeś wyniki w przeglądarce, okaże się, że kontener z treścią zostaje osadzony w następnym elemencie – w tym wypadku w stopce (która zresztą zostanie przez to rozciągnięta w taki sposób, że zajmie zbyt dużo miejsca). Aby temu zapobiec, użyj właściwości {stala}clear{/stala} z wartością {stala}both{/stala}. Dodanie do definicji reguły {stala}clear: both{/stala} zatrzyma osadzanie treści w stopce, a także spowoduje przywrócenie treści oraz stopki do ich oczekiwanego położenia. Możesz teraz utworzyć style poprawnie umieszczające stopkę oraz nadające jej oczekiwany kolor. Dodatkowo zdefiniuj styl, dzięki któremu tekst umieszczony w tagu {stala}span{/stala} otrzyma biały kolor.
#footer {
width: 692px;
border: 4px solid white;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
font-size: x-small;
background-color: blue;
clear: both;
}
#footer span {
font-weight: bold;
color: white;
}
Na koniec dodaj tło do elementu {stala}body{/stala}, które będzie wyświetlane poza obszarem naszych ramek i design skończony. Chociaż niekoniecznie… Przyjrzy się ramce z blokiem nawigacyjnym – powinna ona zostać rozciągnięta maksymalnie w dół, a niestety nie jest. Jej rozmiar jest dopasowany do elementu zawierającego menu (czyli paragrafu z menu). Jedną z najbardziej rzucających się w oczy wad CSS w stosunku do tabel jest właśnie to, że tabele można swobodnie przesuwać i rozszerzać względem innych tabel, natomiast layout w CSS jest w dużej mierze statyczny.
Sposobem poradzenia sobie z tym problem jest otoczenie całego layoutu (od nagłówka aż po stopkę) strony specjalnym kontenerem, w którym wykorzystany zostanie obrazek kopiowany wiele razy w dół. Obrazek ten powinien odpowiadać stworzonym kolumnom. Nazwijmy ten dodatkowy kontener warperem:
#warper {
width: 700px;
background-image: url(images/contentbg.gif);
background-repeat: repeat-y;
}
Tworząc teraz przezroczysty panel nawigacyjny i panel z treścią, usuwając jednocześnie kolor tła, otrzymasz obraz kolumn powstały z kopiowania obrazka w dół. Nie jest to oczywiście idealne rozwiązanie – innym sposobem na poradzenia sobie z problemem jest zerwanie z projektowaniem jak dla strony druków (nagłówek, treść, stopka) i korzystanie z pełni możliwości CSS-a.
Gotowe! W tym artykule wykonaliśmy emulację starego layoutu opartego na tabelach, używając stylów. Zaoszczędziliśmy jednocześnie na rozmiarze pliku, zwiększyliśmy jego czytelność oraz, co bardzo istotne, ułatwiliśmy jego edycję (wprowadzanie poprawek, modyfikacji, rozszerzeń). Poeksperymentuj z zaprezentowanymi tu technikami – praktyka pozwala na odkrycie całej natury CSS, która okazuje się być bardzo pomocna podczas projektowania. Przyjrzyj się również dokładniej opisanym fragmentom kodu źródłowego w celu zdobycia nowych informacji oraz inspiracji.
Warto przeczytać
CSS według Erica Meyera. Sztuka projektowania stron WWW
Autor: Eric Meyer
Podręcznik projektowania z wykorzystaniem CSS dla średnio zaawansowanych. Znajdziesz w nim działające przykłady oraz ćwiczenia, włączając w to przykłady konwersji layoutu opartego na tabelach do CSS.
Utopia HTML. Projektowanie w CSS bez użycia tabel
Autor: Dan Shafer
Rozbudowany przewodnik na temat budowy twojego pierwszego layoutu
z wykorzystaniem CSS bądź sposobu konwersji do CSS istniejącej już strony.
Przykładowe rozdziały można pobrać ze strony Sitepoint (http://www.sitepoint.com).
Problem z modelem pudełkowym
Prawdopodobnie największym problemem projektantów pragnących używać CSS do tworzenia własnych layoutów jest fakt różnej implementacji przez przeglądarki standardów określonych przez korporację W3C oraz, co się z tym wiąże, różną interpretacją CSS.
Mimo że oprogramowanie developerskie jest coraz doskonalsze, to nadal różnice pomiędzy Internet Explorerem, Mozillą, Operą oraz Safari są głównym powodem bólu głowy wśród webmasterów, zwłaszcza jeżeli ma się do czynienia ze starszymi wersjami tych programów.
Głównym problemem jest implementacja tak zwanego box model w IE 5. Model ten jest sposobem obliczania szerokości kontenerów takich jak {stala}div{/stala}. W przypadku poprawnej implementacji modelu, szerokość kontenera definiowana jest przez przestrzeń przeznaczoną dla jego zawartości, podczas gdy margines i obramowanie są dodawane, tworząc razem całkowitą przestrzeń zajmowaną przez kontener na stronie.
Dla dokładniejszego zobrazowania problemu, przyjrzyj się poniższemu przykładowi. Zdefiniuj element {stala}div{/stala} o szerokości 100 px, z marginesem 10 px oraz ramką 5 px. Tworzysz w ten sposób kontener zajmujący 100+20+10=130 pikseli:
#box {
width: 100px;
border: 5px solid red;
margin: 10px;
}
Niestety Internet Explorer 5 reguły te interpretuje w inny sposób. W przypadku rozpatrywanego przykładu, rezerwuje on dla kontenera jedynie 100 pikseli (czyli tyle, ile wynosi jego szerokość), odejmując od jego wewnętrznej przestrzeni (przeznaczonej na zawartość – taką jak na przykład tekst) szerokości marginesu oraz ramki. Tak więc otrzymasz w efekcie kontener zajmujący 100 px i tworzący miejsce o szerokości 100-20-10=70 pikseli, zamiast oczekiwanych 100.
Przykład ten obrazuje, jak olbrzymi wpływ mają wszelkie niezgodności ze standardem na wygląd layoutu w IE 5 oraz jak takie problemy potrafią zburzyć wygląd strony u osób wciąż używających tej przeglądarki. Co więc możesz zrobić? Na szczęście programista Tantek Celik (http://www.tantek.com) opracował tak zwany hack (czyli nieoficjalny sposób, nieprzewidziany zarówno przez standard jak i samego producenta programu) umożliwiający obejście problemu. Opiera się on na wykorzystaniu błędu parsowania CSS występującego w obarczonych opisanym wcześniej błędem przeglądarkach, dzięki czemu można spowodować, że IE zacznie interpretować style w odmienny aniżeli inne przeglądarki sposób. W poniższym kodzie pierwsza wartość {stala}width{/stala} używana jest przez IE 5. Następnie IE 5 ignoruje wszystko, co znajduje się poniżej wartości {stala}voice-family{/stala}. Pozostałe przeglądarki kontynuują analizę reguł, dzięki czemu zastępują poprzednią wartość width nową, wynoszącą 100px:
#box {
border: 5px solid red;
margin: 10px;
width: 130px;
voice-family: \"\\"}\\"\";
voice-family: inherit;
width: 100px;
}
Zobacz w sieci
{tlo_1}
W3C
http://www.w3.org/Style/CSS
Strona światowego centrum standaryzacyjnego. Chociaż nie jest to najlepsze miejsce do rozpoczynania własnej przygody z CSS, to pełni ono rolę znakomitej bazy danych zwierającej mnóstwo tytułów interesujących książek, odnośników do stron i kursów.
{/tlo}
{tlo_0}
W3C Schools
http://www.w3schools.com/css/default.asp
Ponownie strona W3C, tym razem poświęcona przewodnikowi, który stanowi cenną pomoc w nauce CSS. Na stronie konsorcjum możesz odnaleźć bardzo wiele tego typu darmowych materiałów instruktażowych.
{/tlo}
{tlo_1}
HTML Dog
http://www.htmldog.com/guides
Jest to kolekcja przejrzystych i praktycznych przewodników po kluczowych elementach CSS. Znajdą tu coś dla siebie zarówno początkujący, jak i zaawansowani webmasterzy. To doskonałe miejsce do rozpoczęcia nauki.
{/tlo}
{tlo_0}
Brainjar
http://www.brainjar.com/css/positioning
Artykuł dokładnie opisujący istotę pozycjonowania. Po przeczytaniu tego materiału ostatecznie zrozumiesz pływające elementy oraz box model.
{/tlo}
{tlo_1}
CSS Zen Garden
http://www.csszengarden.com
Strona dla wyznawców CSS. Setki pięknych przykładów obrazujących, co można zdziałać za pomocą CSS-a. Możesz tu także pobrać przykładowe pliki CSS oraz plik XHTML, na którym opierają się opisane layouty.
{/tlo}
{tlo_0}
Little Boxes
http://www.thenoodleincident.com/tutorials/
box_lesson/boxes.html
Inna strona z przykładami layoutów w CSS. Całość przedstawiona w interesujący sposób. Klikając na obrazkach, przenosisz się do przykładu zawierającego jednocześnie kod CSS wykorzystany do jego utworzenia.
{/tlo}
