Nie, dziękuję. Chodzi to, że niedawno przerzuciłem się z tabelek na divy bo wszyscy mówią, że to jest lepsze. Ale ostatnio zaglądałem do kodu phpBB3 i tam wszystko stoi na tabelkach. Wydawało mi się, że twórcy tego skryptu znają się na swojej pracy a jednak korzystają z starych rozwiązań. To jak to w końcu jest? Co jest lepsze? Tabelki czy divy?

Obydwa rozwiązania są dobre w zależności do czego je używasz. Mówiąc krótko divy powinny być używane do budowy kontrukcji wyglądu strony. Na przykład umieszczenia loga na górze, sidebara z boku i stopki na dole. Tabelki zaś należy stosować tylko gdy chcemy wyświetlić jakieś dane tabelaryczne. Podchodzą pod to między innymi dane statystyczne oraz wielokolumnowe listy jak na np. interfejsy na forach. Tabelek nie powinno zaś się używać gdy chcemy dla przykładu stworzyć trzy kolumnową stronę i w tym celu tworzyć tabeli z trzema kolumnami. Takie rozwiązanie to nieporozumienie gdyż zwiększa czas jaki przeglądarki potrzebują do wyświetlenia witryny. Da się zauważyć to opóźnienie gdy np. środkowa kolumna zawiera dużo grafik. Wtedy na wyświetlenie komórki po prawej możemy musieć trochę poczekać.

Ok. A jak wygląda sprawa z ramkami?

Zwykłe ramki wyszły już całkiem z użycia. Chodzi mi tu o elementy frame i frameset. Nie powinno się ich używać gdyż obecnie istnieją o wiele lepsze rozwiązania jak na przykład php lub ajax. Co zaś się tyczy ramek pływających, to znaczy elementów iframe to są one wciąż w użyciu ale radzi się ich już wystrzegać. Inaczej mówiąc skorzystanie z nich to nic złego ale jeśli tylko jest możliwość to powinno skorzystać się z innej techniki.

Ciekawe. A są jeszcze jakieś nowe standardy o których powinien wiedzieć każdy początkujący?

Długo by tu wymieniać ale pokrótce mogę wymienić parę punktów. Po pierwsze aktualnie jedyne kodowanie znaków jakiego powinno się używać to UTF-8. I od tego nie ma odstępstw. Używając tego kodowania pozbędziesz się problemów na stronach wielojęzykowych oraz przy korzystaniu z zewnętrznych interfejsów np. przycisków Facebooka. Ponadto wycofano wszystkie dziwne znaczniki typu <font>, <big> itd dotyczących wyglądu tekstu. Zamiast nich należy stosować znacznika <span> i odpowiednie style CSS. Nawet zamiast <b> radzi się korzystać z <strong> chociaż ten pierwszy wciąż oficjalnie jest w użyciu.

Dobrze, przestańmy już mówić o tym htmlu. Ostatnio chciałem poszerzyć swoje horyzonty i pouczyć się JavaScriptu. Ale mam mały dylemat. Czego radzisz się uczyć? JavaScriptu czy może tej słynnej biblioteki jQuery.

Na początek może wyjaśnię, że jQuery to zestaw funkcji napisanych w języku  JavaScript. Ale jeśli dopiero zaczynasz swoją przygodę z językami skryptowymi to radzę ci zacząć uczyć się samego JS. Dlaczego? Ponieważ umiejąc korzystać z jQ ale nie znając dobrze niektórych możliwości JavaScriptu będziesz mocno ograniczony. Mam tu na myśli wszystkie funkcję odpowiedzialne za przetwarzanie tekstu, dokonywanie obliczeń czy obsługę zdarzeń. Gdy to już opanujesz możesz śmiało ruszać do nauki JQuery. Pisanie skryptów stanie się dla Ciebie o wiele łatwiejsze i ponadto będziesz miał wiedzę potrzebną do pisania zaawansowanych aplikacji internetowych.

A istnieją jakieś alternatywy do jQuery?

Tak, np. Prototype i Moo Tools. Te biblioteki są jednak mniej popularne od jQuery i możesz przy nich liczyć na mniejsze wsparcie społeczności.

Dobrze wiedzieć. Ok, to chyba dziś już na tyle.

W porządku. Wracaj jak tylko nazbierają Ci się znowu jakieś problemy.

Na pewno przyjdę Cię pomęczyć, cześć.

Trzymaj się.

Grafika

Finalnie nasza praca ma wyglądać tak:

Jak widać przy większej ilości tekstu grafika musi się się rozszerzać. Aby tak było trzeba to sprytnie zakodować. Najpierw jednak musimy przygotować dwie grafiki. Jedną która będzie się składała tylko z prawych zaokrągleń i druga która będzie bardzo szeroką wersją buttonu ale bez zaokrągleń po prawej. Dokładniej to potrzebujemy takich obrazków:

Ważne jest to aby obrazki miały jednolite lub prawie jednolite tło. W tym przypadku jest ono białe.

Kod

Przy kodowaniu użyjemy pewnej sztuczki. Krótszy obrazek wstawimy jako tło linku przycisku a sam link wstawimy do diva któremu jako tło nadamy dłuższy obrazek. Dzięki temu krótsza grafika odpowiednio zasłoni tą dłuższą. Oto kod html:

<div class="przycisk"><a href="#">Przejdź do galerii zdjęć</a></div>

A poniżej kod CSS:

 .przycisk{
    height: 30px;
    background: url('left.png') no-repeat;
    display: block;
    float: left;
 }
 .przycisk a{
    height: 30px;
    background: url('right.png') right no-repeat;
    display: block;
    padding: 0 15px 0 15px;
    font: italic normal bolder 14px Georgia;
    text-decoration: none;
    color: #dadada;
    line-height: 30px;
 }

Jak widać obrazek right.png dosunęliśmy do prawej strony aby pojawił się w odpowiednim miejscu. Musieliśmy także użyć float: left aby wszystko przyjmowało możliwie najmniejszą szerokość. Kod w działaniu można zobaczyć pod tym linkiem.

Eee… ostatnio przerzuciłem się z tabel na divy i mam kłopot. Nie wiem jak wyśrodkować diva. Wiesz jak to zrobić?

Oczywiście. Wystarczy mu nadać stałą szerokość oraz margin: auto. Nic trudnego.

No dobrze, a w takim razie w jaki sposób ustawić dwa divy obok siebie? Żeby utworzyły się dwie kolumny.

Ponownie musisz obu blokom ustawić stałą szerokość a ponadto każdemu nadać  float: left. Ewentualnie obu float: right lub też jednemu float: left a temu drugiemu float: right. Jeśli tylko suma szerokości tych bloków będzie wystarczająco mała aby zmieściły się obok siebie to wszystko powinno działać tak jak chcesz.

Kiedyś tak próbowałem ale mimo, że rozmiary się zgadzały to jednak te dwa bloki nie mieściły się obok siebie!

Pamiętaj, że szerokość diva to suma jego wartości width, grubości obramowania po obu stronach a także, uwaga: wielkość odstępu wewnętrznego czyli paddingu, także po obu stronach.

A faktycznie, miałem tak ustawione! To pewnie dlatego. A już kiedyś bawiłem się wartościami float ale był przy tym same problemy. W momencie jeśli w divie był inny pływający obiekt to ten blok się zsuwał, miał zły rozmiar. Przez to float wszystkie elementy będące poniżej podnosiły się w górę. Dlaczego?

To typowe. Jeśli w jakimś elemencie jest obiekt z ustawionym float to nie będzie on przyjmował prawidłowej wysokości. Będzie zachowywał się tak jakby tego pływającego elementu wcale tam nie było. Ale naprawienie tego jest proste. Wystarczy temu elementowi który się zsuwa nadać wartość CSS overflow: hidden. Wszystko powinno być od tego momentu dobrze.

Ok, zostawmy już te divy. Mam jeszcze inny kłopot. Niedawno temu próbowałem stworzyć menu i  chciałem aby przestrzeń do kliknięcia była konkretnych rozmiarów. Próbowałem nadać elementowi a wysokość i szerokość ale nic nie działało. To błąd przeglądarki?

Nie, Twój. Element a to obiekt liniowy więc nie można mu nadawać wymiarów. Ale w CSS istnieje atrybut display dzięki czemu można sprawić by każdy element zachowywał się tak jak chcemy. I żeby odnośnik zachowywał się jak blok i miał wymiary najzwyczajniej nadajemy mu wartość display: block.

Dobra cwaniaku. To teraz mi powiedz w jaki sposób zrobić taki pasek na dole strony z na przykład newsami by nie ruszał się podczas przewijania strony.

CCSem. Nadajesz paskowi position: fixed oraz bottom: Ypx gdzie Y to wysokość tego paska i wszystko będzie chodzić jak w szwajcarskim zegarku.

No dobra, a w takim razie jak…

Herbata mi się skończyła.

I?

Na dzisiaj już skończmy. Wrócimy do naszej rozmowy w przyszłości.

Na początek HTML

Nasze menu jak nakazuje dobry webdeveloperski obyczaj będzie opierało się na odpowiednio ostylowanej liście.

<ul class="menu">
  <li><a href="#">Homepage</a></li>
  <li><a href="#">Artykuly</a></li>
  <li><a href="#" class="menu-active">Galeria</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">O mnie</a></li>
  <li><a href="#">Kontakt</a></li>
</ul>

Jak widać jednemu z elementów nadaliśmy dodatkową klasę menu-active. Za jej pomocą oznaczamy aktualnie aktywny element, to znaczy link do strony, na której jesteśmy. Całe menu oznaczyliśmy klasą menu, za pomocą której będziemy się odwoływać w arkuszu styli.

Meritum czyli CSS

Teraz zajmijmy się pisaniem opisu CSS. Po pierwsze zerujemy wszystkie odstępy w elemencie UL i usuwamy kropki sprzed elementów listy:

.menu{
  margin: 0px;
  padding: 0px;
  list-style: none;
}

Dalej ustawiamy elementy LI w jednym rzędzie i nadajemy ujemny prawy margines by zakładki na siebie nachodziły:

.menu li{
  float: left;
  display: block;
  height: 30px;
  width: 100px;
  margin-right: -5px;
}

Pora na ustawienie linków. Ważne jest aby wyświetlały się jako bloki (display: block;) i miały ustalone rozmiary i pozycję w wymiarze Z (z-index: 1;). Aby jednak nasze menu przybrało „zakładkowy” wygląd trzeba dodać na przykład zaokrąglone rogi. Ostatnie cztery wartości ustawiają zaokrąglenie dla prawego górnego rogu kolejno w:  Chromie/Safari, Konquerorze, Firefoxie i przeglądarkach zgodnych z CSS3. Dla przejrzystości kod pozbawiony jest opisów czcionek i kolorów

.menu li a{
  display: block;
  height: 30px;
  width: 100px;
  position: relative;
  z-index: 1;
  -webkit-border-top-right-radius: 20px;
  -khtml-border-radius-topright: 20px;
  -moz-border-radius-topright: 20px;
   border-top-right-radius: 20px
}

Teraz pozostaje jeszcze tylko opisać naszą dodatkową klasę menu-active. Jak już pisałem zakładka z taką klasą musi wystawać ponad pozostałe. Inaczej mówiąc musi być na wyższej pozycji w wymiarze Z. Normalnie zakładki mają pozycję 1, więc ta aktywna musi mieć większą:

.menu a.menu-active{
  z-index: 2;
}

I to wszystko. Zero grafiki, a efekt co najmniej ciekawy. Gotowy przykład można zobaczyć pod tym linkiem.