preview 1 preview 2 preview 3

13

Eric Meyer o CSS w CSS

Autoplagiat jest stylowy.
—Alfred Hitchcock

Często inspiracją do nowego projektu są rzeczy, które widzimy wokół siebie. Reklama, artykuł w gazecie albo okładka książki mogą stanowić zaczątek bardzo ciekawych pomysłów. Podczas pisania i projektowania tej książki wpadł mi do głowy pewien pomysł. A może by utworzyć taki projekt, który w jak najwierniejszy sposób odtwarzałby wygląd samej książki? Wykonanie takiego zadania wymagałoby znajomości różnych technik, a także całego wachlarza innych umiejętności i stanowiłoby idealny sposób na to, aby w jednym miejscu zebrać wszystko, co zostało dotychczas omówione w tej książce. Byłoby to niespotykane wyzwanie — w najlepszy możliwy sposób odtworzyć projekt, którego nie utworzyłem ja, lecz ktoś inny.

Gdy otrzymałem ostateczny projekt książki, wiedziałem, że muszę podjąć to wyzwanie. Dlatego też ten projekt będzie polegał na odtworzeniu układu graficznego książki, którą masz przed sobą i przełożeniu go na HTML oraz CSS. Zadanie to na pewno nie zostanie zrealizowane w stu procentach, a to, czego nie zrobimy (oraz powody, dla których tego nie zrobimy) będzie tak samo pouczające, jak wszystko to, co uda nam się osiągnąć.

Cel projektu

Chcemy odtworzyć wygląd i układ graficzny książki, którą w tej chwili czytasz, a więc naszym głównym celem jest to, abyś, pracując nad tym projektem, miał wrażenie déjà vu. Na bardziej praktycznym poziomie cel jest dwojaki:

Cele te są określone bardzo generalnie, ale w tym projekcie prawie każdy jego fragment będzie samodzielnym miniprojektem, dlatego trudno sprecyzować jakieś szczególne cele. Trzeba po prostu skoczyć do wody i zobaczyć, dokąd poniesie nas prąd rzeki — a więc, do roboty!

Przygotowania

Web

Instrukcje dotyczące pobierania plików z serwera znajdują się we wstępie do tej książki.

Z serwera FTP pobierz pliki wykorzystywane w projekcie 13. Jeśli masz zamiar poeksperymentować w domu, wczytaj plik ch13proj.html do dowolnego edytora. Plik ten będziesz edytował, zapisywał i wczytywał ponownie w miarę postępu prac nad projektem.

Na początek

Przeglądając tę książkę na pewno zwrócisz uwagę na jeden fakt — każda strona to dwie kolumny, z których jedna zawiera zasadniczy tekst książki, natomiast druga znajduje się na jej boku i ma postać paska. Na wydruku pasek boczny zawsze znajduje się na zewnętrznej krawędzi strony, po stronie przeciwległej do grzbietu książki. Moglibyśmy sprawić, aby pasek boczny przeskakiwał z jednej krawędzi strony na drugą, ale byłoby to bardzo uciążliwe dla czytelnika. Dlatego umieścimy go na naszym projekcie z prawej strony.

Decydując się na takie rozwiązanie, musimy jednak znaleźć sposób na to, aby notatki i zrzuty rysunków umieścić w odpowiednich miejscach. Najprostszym wyborem może się wydawać po prostu określenie ich pozycji, ale jest w tym ukryte pewne niebezpieczeństwo — jeżeli na pasku bocznym umieścimy dwa elementy zbyt blisko siebie, prawdopodobnie będą one na siebie nachodzić, a my nie będziemy mieli żadnej możliwości, aby temu zapobiec. Jeżeli umieścimy je na pasku swobodnie, możemy skorzystać z właściwości clear, aby nie nachodziły na siebie. Jest to dla nas dużo lepsze rozwiązanie, choć niesie ze sobą kolejne problemy, o czym przekonamy się już wkrótce.

Ponadto musimy upewnić się, że treść, którą chcemy umieścić na stronie, ma odpowiednią strukturę, tak aby można było w niej zastosować odpowiednie style. Akapity powinny być zawarte w elemencie p, nagłówki podrozdziałów w elementach h3 i h4, notatki umieszczone na pasku bocznym powinny być odpowiednio sklasyfikowane jako elementy div o poszczególnych atrybutach class i tak dalej. Nie będziemy się jednak nad tym teraz zastanawiać, ponieważ na każdy element przyjdzie kolej podczas naszej pracy nad projektem.

Określenie stylów w dokumencie

Ponieważ naszym celem jest odtworzenie układu graficznego książki, możemy przyjąć ją za punkt odniesienia podczas pracy nad projektem. Do problemu możemy podejść na wiele sposobów; my zaczniemy od zdefiniowania fundamentalnej zasady określającej wygląd książki, czyli od podziału na dwie kolumny, w którym notatki i zrzuty obrazów znajdują się na pasku bocznym.

Pasek boczny

Wstawiając na stronie pasek boczny, musimy tylko upewnić się, czy istnieje ramka, która oddziela go od treści zasadniczej dokumentu oraz czy w rzeczywistości tworzą go notatki i zrzuty. Okazuje się, że ten problem wcale nie jest taki prosty, jak się wydaje.

Możemy umieścić całą treść zasadniczą w elemencie div , a następnie do elementów znajdujących się na pasku bocznym dodać ujemny prawy margines, który sprawi, że wszystkie elementy swobodne zostaną przeniesione do paska. W ten sposób będziemy mogli określić prawą ramkę dla treści zawartej w elemencie div, zapewniając jednocześnie, że wysokość ramki będzie równa wysokości samej treści. Elementy swobodne wraz z ujemnym marginesem mogą być umieszczone bezpośrednio obok ramki. Niestety, na przeszkodzie temu rozwiązaniu stoi sporo robaków, zagnieżdżonych w programie Internet Explorer 6 dla Windows. Są one tak szkodliwe, że prowadzą do prawie całkowitego rozpadu układu graficznego IE dla Windows, co więcej, podobnych skutków możemy się spodziewać w większości innych przeglądarek.

Możemy rozbić treść na wiele elementów div, których atrybut class ma wartości, takie jak main oraz sidebar. W ten sposób unikniemy robaków zagnieżdżonych w IE dla Windows, a jednocześnie ułatwimy sobie dalszą pracę. Przyjęcie takiego rozwiązania oznaczałoby jednak mozolne opracowywanie odpowiednich struktur, dlatego na nie również się nie zdecydujemy.

A może by tak nadać różnym elementom „z górnego poziomu” dokumentu szeroki prawy margines, który będzie otwierał pusty obszar? W ten sposób unikniemy dodawania elementu div tylko po to, aby utworzyć kolumny, a także ominiemy błędy w programie IE dla Windows. Musimy mieć pewność, że uwzględnimy wszystkie elementy, które są dziećmi elementu body ; na szczęście w przypadku tej treści nie powinniśmy mieć trudności. Utworzenie pierwszych reguł w naszym arkuszu stylów przyniesie efekt pokazany na rysunku 13.1.

<head>
<title>Rozdział 13.</title>
<style type="text/css">
body {margin: 0; padding: 0; color: black;
  background: white;}
h1, h2, h3, h4, h5, p, pre, table, div {margin-right: 22%;
  margin-left: 8%; padding: 0;}
ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}
div.listing pre {margin: 0;}
</style>
</head>
figure
Rysunek 13.1.

Zastosowanie marginesów w elementach znajdujących się wewnątrz elementu body daje efekt kolumn


Tip
Dodatkowe wcięcie

Nagłówek jest wcięty dalej niż reszta tekstu, ponieważ jest on zawarty w elemencie div. W ten sposób elementy znajdujące się wewnątrz nagłówka elementu div zostały wyrównane zarówno przez lewy margines elementu div, jak i przez swoje własne lewe marginesy. Naprawimy to w następnym punkcie.

W ten sposób sprawiliśmy, że szerokość kolumny zawierającej tekst zasadniczy dokumentu odpowiada 70% szerokości elementu body. W rzeczywistości nie jest to oczywiście kolumna, jedynie tworzy takie wrażenie. Powód, dla którego użyliśmy wartości 22%dla prawego marginesu, już za chwilę stanie się jasny. Marginesy zdefiniowane dla listy są trochę szersze niż inne elementy, ponieważ chcemy, aby elementy listy zostały nieco wcięte względem reszty tekstu. Wstawiliśmy regułę dla div.listing pre, aby uniknąć problemów z IE dla Windows w toku dalszej pracy. (Regułę tę napisalibyśmy wcześniej czy później, ale wstawiając ją w tym miejscu, unikniemy niejasności podczas dalszej pracy nad projektem).

Teraz jeszcze musimy znaleźć odpowiedź na pytanie, jak narysować linię między główną kolumną a paskiem bocznym. Możemy narysować ramkę z prawej strony każdego elementu, do którego właśnie dodaliśmy 22% margines, ale wówczas musielibyśmy wprowadzić pionowe oddzielenie w ramach dopełnienia, a to wprowadziłoby bałagan do naszego projektu. Ponadto nie wszystkie elementy dotykają linii oddzielenia. Gdyby taka linia została utworzona z ramek elementów zawierających tekst zasadniczy naszego dokumentu, wszystkie ramki dotykałyby jej.

Zamiast tego pożyczymy pewien trik od starszych stron WWW i zmodyfikujemy go trochę. Pamiętasz triki z 1-pikselowymi obrazami GIF? Skorzystamy z jednego z nich — weźmiemy 1-pikselowy obraz GIF, który ma odpowiedni odcień niebieskiego, i zastosujemy go w tle elementu body. Jeżeli umieścimy go w odpowiednim miejscu i powielimy wyłącznie w pionie, otrzymamy linię dzielącą, taką jak na rysunku 13.2.

<style type="text/css">
body {margin: 0; padding: 0; color: black;
  background: white url(blue.gif) 80% 0 repeat-y;}
h1, h2, h3, h4, h5, p, pre, table, div {margin-right: 22%;
  margin-left: 8%; padding: 0;}
figure
Rysunek 13.2.

Prosty obraz tła elementu body tworzy oddzielenie między kolumnami


Pamiętasz, jak ustawialiśmy wszystkie prawe marginesy na 22%? Z uwagi na to, że prawe marginesy mają wartość 22%, a linia znajduje się w odległości 20% od prawej krawędzi elementu body, pozostało nam 2% miejsca między krawędzią elementów a linią. W ten sposób utworzyliśmy niewielki dystans między tekstem zasadniczym a linią oddzielającą.

Nagłówek

Tip
Obrazy odłożone na później

Trzy obrazy podglądu, które znajdują się na pierwszej stronie projektu, nie są częścią nagłówka; nie znajdują się one nawet w bieżącym pliku z projektem. Zajmiemy się nimi w następnym podrozdziale.

Zdefiniowaliśmy już ustawienia kolumny zawierającej tekst zasadniczy, a więc możemy zająć się nagłówkiem — jasnoniebieskim pojemnikiem, który rozpoczyna każdy projekt, określając jego numer, tytuł oraz epigram dla niego. Kod dla nagłówka wygląda następująco:

<div id="masthead">
<h1>13</h1>
<h2><cite>Eric Meyer o CSS</cite> w CSS</h2>
<blockquote>Autoplagiat jest stylowy.</blockquote>
<div id="attrib">&mdash;Alfred Hitchcock</div>
</div>

Dzięki elementowi div, który zawiera całą treść nagłówka, utworzenie niebieskiego pojemnika jest w miarę proste. Chcemy, aby nagłówek wypełnił całą przestrzeń między lewą krawędzią elementu body a linią oddzielającą — efekt ten możemy osiągnąć przy użyciu marginesów. Ramka również jest prosta, więc ustaw 1-pikselową ramkę wokół prawej i dolnej krawędzi nagłówka. Wreszcie, aby treść nie znalazła się zbyt blisko górnej lub dolnej krawędzi nagłówka, zmienimy wartość dopełnienia dla elementu div.

ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}
div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0;
  border: 1px solid #006; border-width: 0 1px 1px 0;
  background: #BDF;}
</style>
Tip
Kapitaliki o innym rozmiarze

IE dla Windows wyświetli tekst napisany kapitalikami za pomocą wielkich liter. Technicznie jest to dozwolone w CSS1, ale efekt może być inny niż ten, którego się spodziewasz. W naszym projekcie będziemy nadal korzystać z kapitalików, ale pamiętaj, aby mieć tę kwestię na uwadze podczas tworzenia własnych projektów.

Aby odpowiednio sformatować epigram, potrzebujemy tylko kilku stylów. Cytat, zawarty w elemencie blockquote, powinien być napisany czcionką nieco mniejszą od normalnej kursywy. Dla autora cytatu czcionka powinna być taka sama z tym, że musimy przenieść nazwisko do prawej krawędzi i napisać je kapitalikami, tak jak to przedstawiono na rysunku 13.3.

div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0;
  border: 1px solid #006; border-width: 0 1px 1px 0;
  background: #BDF;}
div#masthead blockquote {font-size: 90%; font-style: italic;}
div#attrib {font-size: 90%; font-style: italic;
  text-align: right; font-variant: small-caps;}
</style>
figure
Rysunek 13.3.

Ogólne zdefiniowanie nagłówka za pomocą ramek i tła


Nasz projekt zaczyna coraz lepiej wyglądać. Pozostała jeszcze lewa krawędź dokumentu, która na razie robi wrażenie nieco postrzępionej. Strona wyglądałaby dużo ładniej, gdyby wszystkie jej elementy zostały wyrównane do jednej linii, ale to wymagałoby zdefiniowania dla nich takiego samego lewego marginesu. Zacznijmy od elementu blockquote i jego lewego marginesu, a także pozostałych krawędzi.

div#masthead blockquote {font-size: 90%; font-style: italic;
  margin: 2em 22% 0.5em 10%;}

Marginesy górny oraz dolny posłużą oczywiście do tego, aby oddzielić nagłówek od treści innych nagłówków. Prawy margines jest wystarczająco duży, abyśmy mieli pewność, że nawet długi cytat nie sięgnie zbyt blisko linii oddzielającej, natomiast zadaniem lewego marginesu jest wyrównanie treści cytatu z tekstem zasadniczym dokumentu. Teraz dokonamy podobnych zmian w elementach h1 oraz h2 i zdefiniujmy rozmiar ich czcionek.

ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}
h1 {font-size: 300%; margin: 0.5em 0 0.5em 10%;}
h2 {font-size: 200%; margin: 0 0 0.66em 10%;}
div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0;
  border: 1px solid #006; border-width: 0 1px 1px 0;
  background: #BDF;}

Na pierwszy rzut oka wszystko wygląda dobrze, ale w naszych stylach ukrył się pewien mały błąd. Aby go ujawnić, nadamy dolną krawędź elementowi h1.

h1 {font-size: 300%; border-bottom: 2px solid white;
  margin: 0.5em 0 0.5em 10%;}

Problem polega na tym, że ramka rozciąga się od linii oddzielającej do lewej strony numeru 13 — nie jest natomiast kontynuowana dalej, do lewej krawędzi okna przeglądarki. Aby to naprawić, musimy pozbyć się lewego marginesu i zastąpić go lewym dopełnieniem.

h1 {font-size: 300%; border-bottom: 2px solid white;
  margin: 0.5em 0 0.5em 0; padding: 0 0 0.125em 10%;}

Wreszcie musimy zmienić czcionkę tytułu, tak aby wyglądał on mniej więcej tak samo jak na wydruku. Wykorzystanie takiej samej czcionki nie leży w granicach naszych możliwości, ale możemy przynajmniej spróbować przybliżyć wygląd naszej czcionki do wersji drukowanej, korzystając z kapitalików. Ponieważ wszystkie tytuły i nagłówki (z wyjątkiem elementów h5) wyglądają w książce tak samo, ustawimy je tak, aby były napisane kapitalikami. Efekt jest przedstawiony na rysunku 13.4.

ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}
h1, h2, h3, h4 {font-variant: small-caps;}
h1 {font-size: 300%; border-bottom: 2px solid white;
  margin: 0.5em 0 0.5em 0; padding: 0 0 0.125em 10%;}
figure
Rysunek 13.4.

Pracę nad nagłówkiem zakończyło nadanie treści ładnego stylu


Dopasowywanie czcionek w CSS

Być może myślisz, że łatwo zmienić czcionkę elementu za pomocą CSS, ale prawda jest taka, że masz do wyboru tylko najbardziej popularne czcionki. Wynika to z tego, że przeglądarka WWW jest całkowicie uzależniona od czcionek zainstalowanych na komputerze użytkownika. Możesz zastosować definicję, zgodnie z którą dany element będzie wyświetlony za pomocą czcionki New Century Schoolbook, taką, jak ta:

p {font-family: "New Century Schoolbook", serif;}

Definicja ta przyniesie pożądany efekt na każdym komputerze, na którym jest zainstalowana ta czcionka. Jeżeli jednak czcionka nie jest dostępna, w jej miejsce zostanie użyta domyślna czcionka użytkownika. Dlatego właśnie nie staramy się dokładnie odtworzyć czcionki tytułowej użytej w książce.

Nasz dylemat mógłby zostać rozwiązany, gdyby istniała możliwość określenia czcionki, która ma być załadowana i użyta na stronie WWW. W wojnie przeglądarek firmy Microsoft oraz Netscape wynalazły metody ładowania czcionek, każda swoją własną, przy czym żadna z nich nie obsługiwała drugiej. CSS2 wprowadziło opisy czcionek i metody ich ładowania, które nie współpracowały z mechanizmami Windows i Netscape. Dlatego na razie czcionki ładowane przez różne przeglądarki pozostają dla nas w sferze pobożnych życzeń.

Wstawianie obrazów podglądu

U góry naszego dokumentu znajduje się jeszcze jedna rzecz, którą musimy się zająć — mam na myśli trzy okna podglądu widoczne na pierwszej stronie każdego projektu. Okna te stanowią reprodukcje rysunków, które pojawią się w dalszej części projektu. W tym miejscu wskażemy tylko obrazy, które nas interesują i rozmieścimy je na stronie.

Ważną rzeczą jest jednak to, aby umieścić obrazy w odpowiednim miejscu. Ponieważ chcemy, aby zaczynały się bezpośrednio pod nagłówkiem i były rozmieszczone swobodnie wzdłuż strony, musimy je wstawić, zanim zdefiniujemy sam nagłówek.

<body>
<div id="previews">
<img src="13CSS03.jpg" alt="preview 1">
<img src="13CSS10.jpg" alt="preview 2">
<img src="13CSS15.jpg" alt="preview 3">
</div>
<div id="masthead">
<h1>13</h1>

Teraz pozostaje nam już tylko nadać elementowi div swobodny charakter oraz określić rozmiar obrazów.

div#attrib {font-size: 90%; font-style: italic;
  text-align: right; font-variant: small-caps;}
div#previews {float: right; width: 33%; margin: 0; text-align: center;}
div#previews img {width: 80%; margin-top: 1em;}
</style>

Być może zauważyłeś, że element div jest szerszy niż 20% margines zdefiniowany dla tekstu zasadniczego. Powód jest taki, że chcemy, aby obrazy wystawały z paska bocznego, tak samo jak w wersji drukowanej książki. Nadaliśmy obrazom szerokość o wartości 80% zawierającego ich elementu div, z kolei wartość text-align umieści je na środku elementu div. W ten sposób odepchniemy je od krawędzi elementu body (patrz rysunek 13.5).

figure
Rysunek 13.5.

Odtworzenie obrazów podglądu oraz kilka małych zmian, które ułatwią nam życie


Oczywiście nie jest to dokładnie to samo co drukowana wersja książki. Ciągle nie mamy zaokrąglonych na rogach pojemników, które otaczają obrazy, a także ciemnoniebieskiego tła dla paska bocznego. Moglibyśmy spróbować odtworzyć te efekty, ale nie zrobimy tego. Dlaczego? Uzyskanie odpowiedniego wyglądu pojemników zabrałoby nam mnóstwo czasu i wysiłku, a tak niewielki w sumie element całego projektu nie jest po prostu wart zachodu. Z kolei ciemnoniebieskie tło zostało pominięte dlatego, że dziwnie wyglądałaby nasza strona, gdyby kończyło się ono tuż pod obrazami i pozostawiało pod sobą pusty pasek boczny. Dlatego nie będziemy odtwarzać tych efektów i przejdziemy od razu do tekstu zasadniczego dokumentu.

Wstawianie odstępów w tytułach

Gdy tylko spojrzymy na cel projektu, zdefiniowany w podrozdziale o tym samym tytule, zobaczymy, że odstęp różni się od tego, który widzimy w drukowanej wersji książki. Musimy go przesunąć w dół, bliżej tekstu, który się pod nim znajduje, a dalej od poprzedzającego go akapitu. To samo dotyczy elementów h3, h4 oraz h5, dlatego teraz nadamy im wszystkim odpowiedni styl.

h1, h2, h3, h4 {font-variant: small-caps;}
h3, h4, h5 {margin-top: 1.25em; margin-bottom: 0;}
h1 {font-size: 300%; border-bottom: 2px solid white;
  margin: 0.5em 0 0.5em 0; padding: 0 0 0.125em 10%;}
Tip
Odstępy między akapitami

Mimo że w akapitach zmniejszyliśmy górne marginesy, dwa następujące po sobie akapity wciąż będą oddalone od siebie o około 1 em, ponieważ nadal obowiązuje domyślny margines dolny dla akapitów. Marginesy, które bezpośrednio przylegają do siebie w pionie, łączą się, a odległość między ramkami elementów jest zawsze większa niż szerokość dwóch marginesów, dlatego dolny margines o szerokości 1em zapewni tradycyjny odstęp między akapitami.

To samo oczywiście nie wystarcza. Jeśli chcemy, aby tytuły znajdowały się bliżej tekstu, który po nich następuje, musimy również zmniejszyć górny margines akapitów. A jak już przy tym jesteśmy, to ustawimy jeszcze trochę większy odstęp między wierszami (line-height).

h2 {font-size: 200%; margin: 0 0 0.66em 10%;}
p {margin-top: 0.5em; margin-bottom: 1em; line-height: 1.2em;}
div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0;
  border: 1px solid #006; border-width: 0 1px 1px 0;
  background: #BDF;}

Powinniśmy również zwiększyć rozmiar elementu h3 , który w wersji drukowanej jest większy od normalnego tekstu (zobacz rysunek 13.6).

h2 {font-size: 200%; margin: 0 0 0.66em 10%;}
h3 {font-size: 150%;}
p {margin-top: 0.5em; margin-bottom: 1em; line-height: 1.2em;}
figure
Rysunek 13.6.

Czas na akapity i ustawienie odstępów w tytułach, aby wyglądały one tak, jak w książce


Skoro już zaczęliśmy określać rozmiar elementów nagłówka, zróbmy to samo z pozostałymi nagłówkami. Dzięki temu nie będziemy musieli martwić się o nie już później.

h3 {font-size: 150%;}
h4 {font-size: 110%;}
h5 {font-size: 100%;}
p {margin-top: 0.5em; margin-bottom: 1em; line-height: 1.2em;}

Cel został osiągnięty, a więc zastanówmy się teraz, jak ożywić nasze listy.

Listy

Przejdźmy teraz do podrozdziału „Cel projektu” — znajdziemy w nim nieuporządkowaną listę. W naszej książce poszczególne punkty listy nie są wyróżnione za pomocą standardowych kropek, lecz ikonek mających postać małych niebieskich diamentów. Jeśli tylko mamy odpowiedni plik graficzny zawierający symbol niebieskiego diamentu na białym tle, skorzystajmy z niego.

div#previews img {width: 80%; margin-top: 1em;}
ul li {list-style: outside square url(diamond.gif);}
</style>

Trzeba również wziąć pod uwagę to, że elementy listy są nieco od siebie oddzielone. Moglibyśmy zmienić ustawienia odstępu między wierszami (line-height) dla elementów listy, ale jest lepszy sposób — zwiększenie marginesu albo dopełnienia dla poszczególnych elementów listy. Jedyna różnica między tymi dwoma metodami jest taka, że jeśli kiedykolwiek chcielibyśmy zdefiniować kolor tła dla listy, to w przypadku zwiększonego marginesu tła nie będą się dotykać i będą tworzyć oddzielone od siebie bloki danego koloru. Nas to jednak nie dotyczy, ponieważ tło listy w książce jest białe, zatem zwiększamy dolny margines elementów li elements. Efekt możesz obejrzeć na rysunku 13.7.

ul li {list-style: outside square url(diamond.gif);
  margin-bottom: 0.5em;}
figure
Rysunek 13.7.

Wykorzystaliśmy obrazy do tego, aby zastąpić nudne kropki błyszczącymi diamentami


Uwagi na pasku bocznym

Przechodząc do podrozdziału „Przygotowania”, napotykamy pierwszą notatkę umieszczoną na pasku bocznym. Jest to jedna z notatek dotyczących sieci Web (nadamy jej kolor zielony), różniąca się od notatek mających charakter uwagi lub ostrzeżenia jednym drobiazgiem — uwagi dotyczące sieci Web nie mają tytułu. Oto kod notatki mówiącej o sieci Web:

<div class="note web">
<img src="web-icon.gif" alt="Web">
<p>
Instrukcje dotyczące pobierania plików z serwera znajdują się we wstępie do tej książki.
</p>
</div>

A oto kod jednej z pozostałych notatek:

<div class="note tip">
<img src="tip-icon.gif" alt="Tip">
<h5>Obrazy odłożone na później</h5>
<p>
Trzy obrazy podglądu, które znajdują się na pierwszej stronie projektu, nie są częścią nagłówka; 
nie znajdują się one nawet w bieżącym pliku z projektem. Zajmiemy się nimi w następnym punkcie.
</p>
</div>

Pod względem strukturalnym jedynym elementem, który różni te dwa rodzaje notatek, jest element h5. Dużo ważniejszą kwestią jest wartość atrybutu class w tych dwóch notatkach. Widzimy, że obie notatki zawierają słowo note, a gdy przejrzymy pozostałe fragmenty książki, przekonamy się, że wartość ta występuje we wszystkich notatkach umieszczonych na pasku bocznym, a po niej pojawia się słowo określające rodzaj notatki; są to wyrazy web (sieć Web), tip (wskazówka) oraz warn(ostrzeżenie).

W związku z tym te style, które są wspólne dla wszystkich notatek, mogą być zapisane w jednej regule, natomiast te, które są charakterystyczne tylko dla danego typu notatek, zostaną zapisane w swoich własnych regułach. Chcemy, aby notatki były umieszczone na pasku bocznym swobodnie, ale również chcemy mieć pewność, że żadna notatka nie pojawi się pod inną notatką lub z jej lewej strony. Jeżeli wstawimy do kodu styl width oraz kilka marginesów, osiągniemy efekt widoczny na rysunku 13.8.

ul li {list-style: outside square url(diamond.gif);
  margin-bottom: 0.5em;}
div.note {float: right; clear: right; border-width: 0;
  width: 19%; margin: 0 1% 0 0; padding: 0;}
</style>
figure
Rysunek 13.8.

Pierwszy krok w kierunku określenia stylów notatek umieszczonych na pasku bocznym, aby odpowiadały one wersji drukowanej


Okazuje się, że Explorer dla Windows ma pewne problemy ze stylami, które właśnie dodaliśmy; z jakiegoś powodu wydaje mu się, że 19% plus 1% równa się więcej niż 20%. Użyjemy więc triku voice-family, aby dać IE dla Windows wartość, której potrzebuje, jednocześnie dostarczymy odpowiednią liczbę innym przeglądarkom, które tego problemu nie mają.

Tip
Trik voice-family

Jeśli interesuje Cię trik voice-family, a także inne sposoby wykorzystywania robaków zagnieżdżonych w przeglądarkach, zobacz „Tricking Browsers and Hidding Styles” na stronie WWW.

div.note {float: right; clear: right; border-width: 0;
  width: 18%; margin: 0 1% 0 0; padding: 0;
  voice-family: "\"}\""; voice-family:inherit;
  width: 19%;}

Teraz chcemy przesunąć ikonę nieco w prawo. Ponieważ wcięcie obrazów odbywa się tak samo jak w przypadku tekstu, możemy wyrównać je do prawej krawędzi za pomocą stylu text-align. Pamiętamy jednak, że tytuł oraz tekst umieszczony w akapicie mają być wyrównane do lewej strony.

div.note {float: right; clear: right; border-width: 0;
  width: 18%; margin: 0 1% 0 0; padding: 0;
  text-align: right;
  voice-family: "\"}\""; voice-family:inherit;
  width: 19%;}
div.note h5, div.note p {text-align: left;}
</style>

Wciąż pozostaje jeszcze zmniejszenie tekstu i użycie w nim pogrubionej czcionki sans-serif, takiej jak ta, którą użyto w książce. Najłatwiej dokonać tego w samym elemencie div.

div.note {float: right; clear: right; border-width: 0;
  width: 18%; margin: 0 1% 0 0; padding: 0;
  text-align: right; font: 80% Arial, Verdana, Helvetica, sans-serif;
  voice-family: "\"}\""; voice-family:inherit;
  width: 19%;}

Teraz przyjrzyjmy się treści samych notatek. Element obrazu nie jest wyposażony w atrybuty height oraz width, dlatego musimy dostarczyć te wartości za pomocą CSS. Ponadto chcemy sprawić, aby tekst notatek odstawał nieco od krawędzi paska bocznego w kierunku prawej krawędzi elementu div notatki. Dlatego tworzymy następujący kod:

div.note h5, div.note p {text-align: left; margin-left: 1em; margin-right: 0;}
div.note img {height: 30px; width: 30px; margin: 0;}
</style>

Teraz musimy połączyć ikonę z linią oddzielającą za pomocą ciemnoniebieskiej poziomej linii. Dlaczego znowu nie skorzystać z triku, który posłużył nam do utworzenia linii oddzielającej? Wiemy, że ikona ma wysokość 30px i znajduje się w prawym, górnym rogu notatki. Zatem możemy narysować w tle elementu div linię, która będzie znajdowała się w odległości 15px od górnej krawędzi elementu div — w tym celu wstawimy ponownie 1-pikselowy plik, tym razem w kierunku poziomym, tak jak pokazano na rysunku 13.9.

div.note {float: right; clear: right; border-width: 0;
  width: 18%; margin: 0 1% 0 0; padding: 0;
  text-align: right; font: 80% Arial, Verdana, Helvetica, sans-serif;
  background: transparent url(blue.gif) 50% 15px repeat-x;
  voice-family: "\"}\""; voice-family:inherit;
  width: 19%;}
figure
Rysunek 13.9.

Za pomocą zaledwie kilku stylów zbliżyliśmy się do odtworzenia oryginalnego wyglądu książki


Teraz pozostało jeszcze określenie koloru tekstu i przesunięcie tekstu do góry, tak aby znalazł się bliżej linii, którą właśnie narysowaliśmy. Nie powinniśmy jednak przypisywać takiej samej wartości color do wszystkich notatek, ponieważ nadamy im, zależnie od typu notatki, trzy różne kolory: niebieski, zielony oraz czerwony. Dlatego właśnie przyda nam się drugie słowo w każdej klasie notatki.

div.note img {height: 30px; width: 30px; margin: 0;}
div.web {color: #399;}
div.tip {color: #006;}
div.warn, div.warn code {color: maroon;}
</style>
Tip
Dziedziczenie stylów

Innym sposobem na to, aby tekst code ostrzeżenia wyglądał tak samo jak jego rodzic, jest użycie wartości inherit w nowej regule: div.warn code {color: inherit;}. Wartość ta jest dość dobrze obsługiwana przez różne przeglądarki, a my nie skorzystaliśmy z niej tylko dlatego, że nie jest ona bardziej skuteczna niż metoda, której my użyliśmy.

Wstawiliśmy selektor, który zmieni czcionkę tekstu ostrzeżenia umieszczonego w elemencie code na taką samą, jaką ma otaczający go tekst. W ten sposób utworzyliśmy regułę, która uchyla wcześniejszą regułę, określającą kolor czcionki wszystkich elementów code jako ciemnoniebieski.

Przy przesunięciu tekstu do góry musimy zachować pewną ostrożność. Możemy wprawdzie zdefiniować ujemny margines górny, ale nie chcemy przecież, aby tekst nachodził na ikony. Dlatego też musimy sprawić, aby każdy element, który pojawi się jako pierwszy w dowolnym typie notatki, miał prawy margines, zostawiający wystarczającą ilość miejsca na ikonę. W notatkach dotyczących sieci Web pierwszym elementem jest zawsze akapit.

div.note img {height: 30px; width: 30px; margin: 0;}
div.web p {margin: -10px 30px 0 1em;}
div.web {color: #399;}

Wstawienie prawego marginesu o szerokości 30px, czyli dokładnie takiej, jaką ma ikona, powinno zapobiec nachodzeniu tekstu na obraz. Teraz musimy zastosować podobne style w pierwszym elemencie notatek i ostrzeżeń, czyli w elemencie h5. Tytuły tych notatek nie są napisane kapitalikami, więc możemy pozbyć się tego stylu i przywrócić ich pierwotny wygląd.

div.note img {height: 30px; width: 30px; margin: 0;}
div.note h5 {margin: -5px 30px 0 1em; padding: 0;
  font-variant: normal;}
div.web p {margin: -10px 30px 0 1em;}

Dopełnienie o wartości 0, zdefiniowane dla tytułów notatek, ma charakter zabezpieczenia, ponieważ nigdy nie wiadomo, kiedy przeglądarka zdecyduje się użyć dopełnienia zamiast marginesów, aby utworzyć miejsce wokół elementów nagłówka.

Musimy jeszcze upewnić się, że tekst w każdej notatce będzie czytelny. W wielu przeglądarkach tekst elementu code jest mniejszy niż normalny tekst. W przypadku naszych notatek chcemy, aby tekst miał mniej więcej taki sam rozmiar jak tekst akapitu, tak jak przedstawiono na rysunku 13.10.

div.web p {margin: -10px 30px 0 1em;}
div.note code {font-size: 100%;}
div.web {color: #399;}
figure
Rysunek 13.10.

Niebieska notatka ma wygląd bardzo zbliżony do wersji drukowanej


Oczywiście poszczególne wiersze tekstu nie będą łamane dokładnie w tym samym miejscu co w wersji drukowanej książki, przez co notatki mogą być nieco dłuższe lub krótsze niż te, które widzisz na wydrukowanej stronie. Mimo to podobieństwo jest wystarczające, abyśmy mogli przejść do następnego zagadnienia, czyli wyróżniania w tekście kodu, który został napisany inną czcionką.

Bloki i fragmenty kodu

W podrozdziale zatytułowanym „Na początek” widzimy, że część tekstu została ujęta w elementach code. Przykładowo, spójrz na trzeci akapit:

<p>
Ponadto musimy upewnić się, że treść, którą chcemy umieścić na stronie, ma odpowiednią strukturę, 
tak aby można było w niej zastosować odpowiednie style. Akapity powinny być zawarte w elemencie 
<code>p</code>, nagłówki podrozdziałów w elementach <code>h3</code> i <code>h4</code>, notatki 
umieszczone na pasku bocznym powinny być odpowiednio sklasyfikowane jako elementy <code>div</code> 
o poszczególnych atrybutach <code>class</code> i tak dalej. Nie będziemy się jednak nad tym teraz 
zastanawiać, ponieważ na każdy element przyjdzie kolej podczas naszej pracy nad projektem.
</p>
Tip
Walka z rozciągniętym kodem

Zależnie od tego, która czcionka monospace zostanie użyta przez przeglądarkę, elementy code mogą robić wrażenie nieco rozciągniętych. Jednym ze sposobów naprawienia takiego stanu rzeczy może być nadanie ujemnej wartości stylowi letter-spacing.

W książce takie fragmenty kodu są napisane ciemnoniebieską czcionką monospace. Jest to niewiarygodnie proste do odtworzenia, ale poczekajmy jeszcze chwilę. Bloki kodów mają taką samą czcionkę jak elementy code , ale nie są niebieskie. Gdy zajrzymy do kodu źródłowego, przekonamy się, że te bloki to elementy pre. Dlatego nasz kod będzie wyglądał następująco:

p {margin-top: 0.5em; margin-bottom: 1em; line-height: 1.2em;}
code, pre {font-family: "Courier New", Courier, monospace;}
code {color: #006;}
div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0;
  border: 1px solid #006; border-width: 0 1px 1px 0;
  background: #BDF;}

Bloki kodów zamieszczone w książce często zawierają fragmenty wyróżnione kolorem ciemnoczerwonym, który symbolizuje zmiany dokonane w projekcie. Przyjrzyjmy się bliżej jednemu z takich bloków kodu dokumentu HTML.

<pre>
ul li {list-style: outside square url(diamond.gif);
  <b>margin-bottom: 0.5em;</b>}
</pre>

Zmiany wyróżniono za pomocą elementu b , który jest wciąż niedocenianym elementem określającym czcionkę pogrubiającą. W książce zmiany mają kolor ciemnoczerwony i są wyróżnione za pomocą pogrubionej czcionki. Zamiast próbować skomplikowanych metod, takich jak zastąpienie elementów b elementami span, spróbujmy popracować trochę nad tym, co już mamy. Ponadto upewnimy się, że tekst bloku kodu zostanie nieco wcięty w porównaniu z normalnym tekstem i będzie od niego trochę mniejszy (patrz rysunek 13.11).

code {color: #006;}
pre {margin-left: 10%; font-size: 80%;}
pre b {color: maroon; font-weight: normal;}
div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0;
  border: 1px solid #006; border-width: 0 1px 1px 0;
  background: #BDF;}
figure
Rysunek 13.11.

Fragmenty kodu oraz bloki kodu wyróżniają się w tekście dzięki zastosowaniu nowych stylów


Rysunki

Wreszcie doszliśmy do tej części naszego projektu, która dla nas będzie stanowić największe wyzwanie — rysunki oraz podpisy do nich. Odpowiednie zdefiniowanie tych struktur będzie wymagało nie tylko znajomości CSS, ale również trochę HTML-u.

Spójrzmy najpierw na kod rysunku użytego wcześniej w tym projekcie.

<div class="figure">
<img src="13CSS04.jpg" height="300" width="400" alt="figure">
</div>
<div class="caption">
<h5>Rysunek 13.4.</h5>
<p>
Pracę nad nagłówkiem zakończyło nadanie treści ładnego stylu
</p>
</div>

Istnieje wiele sposobów na to, aby nadać rysunkom oraz podpisom do nich odpowiednią strukturę — jeden z nich jest naprawdę bardzo przydatny. Ponieważ rysunek jest zawarty w jednym elemencie div, a podpis do niego w drugim, łatwo możemy umieścić je obok siebie, wstawiając obraz z lewej, a podpis z prawej strony. Najpierw zróbmy rysunek.

div.warn, div.warn code {color: maroon;}
div.figure {float: left; width: 75%; margin: 0; padding: 0;}
</style>
Tip
Dlaczego umieszczamy obrazy swobodnie?

Być może myślisz, że moglibyśmy po prostu pozwolić napisom „unosić się w przestrzeni” z prawej strony rysunku, jednak ta metoda ma pewne wady, o czym przekonasz się już wkrótce.

W ten sposób pozostawiamy wystarczającą ilość miejsca na to, aby podpis znalazł się w pasku bocznym, plus dodatkowe 5% (to pozwoli nam uniknąć niektórych problemów z IE dla Windows). Przenieśmy teraz podpis na prawo, korzystając z tych samych podstawowych deklaracji, których użyliśmy dla zdefiniowania notatek. Nasze postępy w pracy możesz zobaczyć na rysunku 13.12.

div.figure {float: left; width: 75%; margin: 0; padding: 0;}
div.caption {float: right; width: 18%; padding: 0 1% 0 0; margin: 0;
voice-family: "\"}\""; voice-family:inherit;
  width: 19%;}
</style>
figure
Rysunek 13.12.

Rysunek oraz podpis do niego zostały umieszczone swobodnie na stronie, ale wciąż pozostało nam sporo pracy


Rysunek wykracza poza wyrównanie, ale tym zaczniemy się martwić dopiero wtedy, gdy nadamy podpisowi odpowiedni styl. Najprostszą czynnością jest wpisanie odpowiedniego tekstu do podpisu, a umieścimy go w elemencie p. Odtworzenie jego wyglądu zajmie tylko moment.

div.caption {float: right; width: 18%; padding: 0 1% 0 0; margin: 0;
  voice-family: "\"}\""; voice-family:inherit;
  width: 19%;}
div.caption p {font: italic 80% Arial, Verdana, Helvetica, sans-serif;
  color: #555;}
</style>

Odtworzenie górnej krawędzi ramki podpisu może wydawać się proste, ponieważ musimy ustawić ją w samym elemencie div. Zwróć jednak uwagę na to, w jaki sposób linia ta wchodzi w główną kolumnę. Najpierw określimy wymiary ramki, a potem zobaczymy, co trzeba zmienić, aby osiągnąć wygląd, który nas interesuje.

div.caption {float: right; width: 18%; margin: 0 1% 0 0; padding: 0;
  border-top: 1px solid #006;
  voice-family: "\"}\""; voice-family:inherit;
  width: 19%;}

Teraz nasza górna ramka zatrzymuje się na linii oddzielającej. Gdybyśmy nie nadali podpisowi swobodnego charakteru, linia zostałaby pociągnięta w poprzek całej strony, aż do lewej krawędzi ekranu. Dzięki temu, że elementy swobodne współdziałają z tłem oraz krawędziami, uniknęliśmy tego problemu.

Aby wydłużyć linię z lewej strony, musimy wstawić tam dopełnienie, a przy okazji dostosować pierwszą wartość width, aby IE dla Windows nie narobił zbyt dużego bałaganu. Niestety, program ten myśli, że wielkość każdego dopełnienia dodanego do swobodnego elementu została obliczona z uwzględnieniem rozmiaru tego elementu, więc jeśli nadamy dopełnieniu wartość 25%, to miejsce na podpis pod rysunkiem zostałoby odpowiednio zwężone. Poza tym byłoby to zbyt duże dopełnienie dla przeglądarek, które poprawnie obliczają wielkość odstępu. Długi proces prób i błędów doprowadza nas do następującej kombinacji wartości, zilustrowanej na rysunku 13.13.

div.caption {float: right; width: 30%; margin: 0 1% 0 0;
  padding: 0 0 0 40%;
  border-top: 1px solid #006;
  voice-family: "\"}\""; voice-family:inherit;
  width: 19%; padding-left: 10%;}
figure
Rysunek 13.13.

Wydłużenie górnej krawędzi podpisu w głąb głównej kolumny przy użyciu dopełnienia


Nagle podpis przesunął się pod rysunek. Dodanie dopełnienia spowodowało rozszerzenie podpisu tak, że jego pojemnik nachodzi na pojemnik utworzony przez element div rysunku. Elementy swobodne nie powinny na siebie nachodzić, dlatego drugi z nich (podpis) został umieszczony pod pierwszym. Możemy tego uniknąć, zmniejszając po prostu atrybut width elementu div rysunku. Ponieważ szerokość całego podpisu wynosi 30%, moglibyśmy zastosować wartość 70%, ale żeby mieć pewność, że rysunek z podpisem na pewno nie będą nachodzić na siebie, zmniejszymy ją jeszcze trochę.

div.figure {float: left; width: 67%; margin: 0; padding: 0;}

Teraz nasz podpis wrócił do miejsca, w którym powinien się znajdować, ale niektóre fragmenty kolejnego akapitu podążyły za nim! Przyczyna tkwi w tym, że przed ostatnimi zmianami, których dokonaliśmy, element div rysunku był taki szeroki, że nie pozostawało już miejsca na to, aby tekst, który go dotyczył, zmieścił się obok niego. Tak już nie jest dzięki zmianom, których dokonaliśmy w stylach podpisu.

Problem, z którym się przed chwilą zetknęliśmy, zwraca naszą uwagę na jeszcze inne, podobne zagadnienie. Załóżmy, że mamy notatkę, która powinna znajdować się bezpośrednio przed rysunkiem, ale kończy się poniżej górnej krawędzi rysunku. Podpis do rysunku zostałby wówczas przeniesiony na koniec notatki, a to wyglądałoby dość dziwnie. W CSS nie ma żadnego sposobu na to, aby wyrównać dwa swobodnie umieszczone elementy tak, aby znajdowały się w jednej linii. Możemy jednak posłużyć się kodem HTML, dzięki któremu osiągniemy pożądany cel.

<hr>
<div class="figure">
<img src="13CSS04.jpg" height="300" width="400">
</div>
<div class="caption">
<h5>Rysunek 13.4.</h5>
<p>
Pracę nad nagłówkiem zakończyło nadanie treści ładnego stylu
</p>
</div>
<hr>
Tip
Ukryte elementy

Różnica między stylami visibility: hidden oraz display: none jest taka, że pierwszy z nich sprawia po prostu, że elementy są niewidoczne, umożliwia im jednak wpływanie na wygląd dokumentu. Drugi z wymienionych stylów całkowicie usuwa element z układu graficznego dokumentu, przez co nie ma on żadnego wpływu na wygląd dokumentu.

Wystarczyło wstawić element hr przed każdym rysunkiem i po każdym napisie — mamy dokładnie to, czego chcieliśmy. Teraz jeszcze tylko nadamy tym elementom atrybut clear: both i ustawimy tak, aby się nie pojawiały (patrz rysunek 13.14).

div.warn, div.warn code {color: maroon;}
hr {clear: both; visibility: hidden;}
div.figure {float: left; width: 67%; margin: 0; padding: 0;}

figure
Rysunek 13.14.

Niewidoczne elementy hr utrzymują rysunki i podpisy do nich w jednej linii, choć są oddzielone od siebie


Tip
Zaokrąglenie rogów

Aby uzyskać szczegółowe informacje na temat tego, jak wykorzystać obrazy tła do zaokrąglania rogów, zobacz rozdział 10., „Ucieczka z pudełka”.

Teraz pozostało jeszcze nadanie odpowiedniego stylu etykiecie podpisu (na przykład „Rysunek 13.4.”). Szybkie spojrzenie w książkę i już wiemy, że etykieta musi być umieszczona w niebieskim pojemniku i wyrównana z linią oddzielającą paska bocznego, ale nie powinna rozciągać się aż do końca górnej krawędzi podpisu. Utworzenie pojemnika wymaga wstawienia w prawym, dolnym rogu elementu h5 niewielkiej grafiki w tle oraz określenia jej koloru. Rozciągnijmy też trochę litery.

div.caption {float: right; width: 30%; margin: 0 1% 0 0;
  padding: 0 0 0 40%;
  border-top: 1px solid #006;
  voice-family: "\"}\""; voice-family:inherit;
  width: 19%; padding-left: 10%;}
div.caption h5 {letter-spacing: 1px; color: black;
  background: #9BD url(captioncurve.gif) bottom right no-repeat;}
div.caption p {font: italic 80% Arial, Verdana, Helvetica, sans-serif;
  color: #555;}

Jeszcze tylko niewielkie dopełnienie oraz marginesy i jesteśmy na miejscu. Aby wyrównać tekst etykiety z akapitem, musimy sprawdzić, jaka jest szerokość marginesów akapitu. Reguła, która definiuje marginesy dla akapitu podpisu, jest następująca:

h1, h2, h3, h4, h5, p, pre, table, div {margin-right: 22%;
  margin-left: 8%;}
Tip
Rezygnujemy z okręgów

Nie będziemy próbowali odtworzyć efektu małych okręgów, które są umieszczone na każdej etykiecie podpisu. Osiągnięcie takiego wyglądu jest z pewnością możliwe, ale, podobnie jak w przypadku pojemników otaczających obrazy podglądu, ten niewielki w sumie aspekt całego projektu kosztowałby nas zbyt wiele wysiłku.

Ta reguła działa bez zarzutu w odniesieniu do akapitów, ale niestety nie jest odpowiednia do zdefiniowania etykiety podpisu. Musimy określić nowe marginesy dla elementu h5 i, dbając o spójność kodu, dodamy podobne marginesy do akapitów. Przy okazji zmienimy czcionkę etykiet na kapitaliki, ponieważ takiej właśnie czcionki użyto w książce.

div.caption h5 {margin: 0 1em 0 0; padding: 0.33em 10px 0 1em;
  color: black; letter-spacing: 1px; font-variant: small-caps;
  background: #9BD url(captioncurve.gif) bottom right no-repeat;}
div.caption p {font: italic 80% Arial, Verdana, Helvetica, sans-serif;
  color: #555; margin: 0; padding: 0.25em 1em;}

Podobnie jak w przypadku notatek umieszczonych na pasku bocznym, musimy upewnić się, że każdy tekst elementu code umieszczony w podpisach do rysunków będzie miał taki sam rozmiar jak otaczający go tekst. Efekt ten osiągniemy, dodając selektor do reguły, którą już zastosowaliśmy w odniesieniu do tekstu notatek.

div.note code, div.caption code {font-size: 100%;}

Ostatnią rzeczą, którą musimy zrobić, jest przesunięcie rysunku bardziej w kierunku środka tekstu. Niestety, z uwagi na wszystkie zmiany, których wcześniej dokonaliśmy, nie możemy po prostu wycentrować obrazu, aby osiągnąć pożądany efekt. Nie możemy zapominać o tym, że element div zawierający rysunek ma teraz tylko 67% szerokości elementu body. Zamiast centrowania obrazu wyrównamy więc rysunek do prawej, przenosząc go tak, aby jego prawa krawędź zrównała się z prawą krawędzią elementu div (patrz rysunek 13.15).

div.figure {float: left; width: 67%; margin: 0; padding: 0;
  text-align: right;}
figure
Rysunek 13.15.

Na zakończenie nadajemy rysunkom i podpisom do nich odpowiednie style


Nie jest to idealne rozwiązanie, ale będzie ono działało w miarę poprawnie w większości przeglądarek. Zapewnia ono mały, ale zauważalny odstęp między rysunkiem a górną ramką podpisu, taki sam, jaki widać w książce.

Listingi kodów i tabele

Aby już wszystko zapiąć na ostatni guzik, spójrzmy na dwie różne struktury, które, jak się okazuje, mają bardzo podobne style — to listingi kodów oraz tabele. Listing 13.1 zawiera przykład tego, co chcemy odtworzyć.

Listing 13.1.—Listing 13.1. Przykładowy listing
div.web {color: #399;}
div.tip {color: #006;}
div.warn, div.warn code {color: maroon;}

Wystarczy jeden rzut oka na drukowaną wersję listingu i już wiemy, jaki kod będzie potrzebny do jego odtworzenia, być może z wyjątkiem nagłówka. Wstawimy go najpierw do elementu h5 i otoczymy numer listingu elementem span. W ten sposób otrzymamy następujący kod:

<h5><span>Listing 13.1.</span>Przykładowy listing</h5>

Teraz nadamy odpowiedni kolor numerom listingu, a element span wyposażymy w prawy margines, dzięki czemu tytuł listingu zostanie nieco odsunięty od jego numeru.

h5 {font-size: 100%;}
h5 span {color: #006; margin-right: 0.5em;}
p {margin-top: 0.5em; margin-bottom: 1em; line-height: 1.2em;}

Jest jeszcze jedna drobnostka, która psuje nam cały efekt — element h5 ma margines o szerokości 22% i jest on zawarty w elemencie div, który również ma 22% lewy margines. Musimy zmienić tę sytuację, jeśli nie chcemy dopuścić do tego, aby element h5 został zbyt mocno wcięty. Dlatego zmienimy lewy margines elementu h5.

div.listing pre {border: 1px solid #006; border-width: 1px 0;
  padding: 0.5em 1em; margin: 0.125em 0 1.5em;}
div.listing h5 {margin-left: 0.5em;}
ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}

Jeśli zaś chodzi o kod listy, najbardziej sensowne wydaje się dodanie do niego elementu pre. Tak naprawdę zdefiniowaliśmy już regułę div.listing pre, którą wstawiliśmy na początku projektu, chcąc uniknąć problemów z IE dla Windows. Teraz przepiszemy ją, aby dodać górną i dolną ramkę, a także zmienimy nieco marginesy oraz dopełnienie (patrz rysunek 13.16).

div.listing pre {border: 1px solid #006; border-width: 1px 0;
  padding: 0.5em 1em; margin: 0.125em 0 1.5em;}
figure
Rysunek 13.16.

Nadanie listingom odpowiednich stylów to kwestia zaledwie kilku prostych reguł


Tabele przypominają nieco listingi tym, że posiadają górną i dolną ramkę, przy czym ich tytuł znajduje się bezpośrednio nad górną ramką. Istnieje jednak kilka różnic przedstawionych w tabeli 13.1.

Tabela 13.1.—Przykładowa tabela
Kolumna 1Kolumna 2Kolumna 3
Tojesttypowy
przykładtabeliK?

Tytuł jest taki sam jak w listingu, a ponieważ pracujemy nad tabelą, kod będzie zawierał element table.

<h5><span>Tabela 13.1</span> Przykładowa tabela</h5>
<table cellspacing="0">
<tr>
<th>Kolumna 1</th><th>Kolumna 2</th><th>Kolumna 3</th>
</tr>
<tr>
<td>To</td><td>jest</td><td>typowy</td>
</tr>
<tr>
<td>przykład</td><td>tabeli</td><td>K?</td>
</tr>
</table>
Tip
Określanie szerokości tabeli

W wielu przeglądarkach szerokość tabeli jest domyślnie ustawiana tak, aby pomieściła całą treść. Dlatego my dokładnie określamy szerokość tabeli (table width), tak aby nasza definicja zastąpiła domyślne zachowanie przeglądarki.

Być może kusi Cię, aby dodać do elementu table atrybut class, ale uwierz, że nie ma takiej potrzeby. Jedyne elementy table , które pojawią się w naszym projekcie, będą zawierały właśnie takie tabele jak ta z przykładu 13.1. Dlatego dodamy do nich górne i dolne ramki, zmienimy nieco rozmiar czcionki, dołączymy dolny margines, który oddzieli tabele od tekstu i zadeklarujemy ich szerokość za pomocą atrybutu width.

div.listing h5 {margin-left: 0.5em;}
table {border: 1px solid #006; border-width: 2px 0;
  font-size: 90%; margin-bottom: 1.5em; width: 70%;}
ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}

Ostatnią rzeczą, którą musimy się zająć, są nagłówki kolumn. Dodamy regułę, która zdefiniuje ich kolor, wyrówna tekst do lewej strony, a także wstawi dolną ramkę.

table {border: 1px solid #006; border-width: 2px 0;
  font-size: 90%; margin-bottom: 1.5em; width: 70%;}
th {color: #006; border-bottom: 1px solid #006; text-align: left;}
ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}

Na koniec dodamy trochę dopełnienia w komórkach tabeli, tak aby nie robiły wrażenia zbyt przepełnionych. Efekt możesz zobaczyć na rysunku 13.17.

th {color: #006; border-bottom: 1px solid #006; text-align: left;}
th, td {padding: 0.125em 0.66em;}
ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}
figure
Rysunek 13.17.

Odtworzenie wyglądu tabeli sprowadza się tylko do napisania trzech reguł


Analiza po ukończeniu projektu

Mimo że za pomocą CSS udało się osiągnąć wygląd bardzo podobny do układu graficznego książki, nie można nie zauważyć, że pominęliśmy kilka rzeczy. Brak możliwości załadowania czcionek jest jednym z największych ograniczeń w sieci Web, choć jest to też swoiste szczęście w nieszczęściu. Projektanci stron nie mogą liczyć na to, że każda przeglądarka wyświetli wybraną przez nich czcionkę, a to wymusza na nich pewną elastyczność w pracy nad projektem.

Inną, równie istotną przeszkodą podczas pracy nad tego typu projektem są jak zawsze ograniczenia dotyczące przeglądarek. W tym konkretnym projekcie dużym problemem był dla nas program Internet Explorer dla Windows, ale równie dobrze mogła to być dowolna inna przeglądarka — wszystko zależy od charakteru Twojego projektu. Na szczęście przeglądarki są na tyle zaawansowanymi programami, że z reguły istnieje możliwość obejścia problemu bez robienia zbyt dużego bałaganu.

Pominęliśmy również cztery różne aspekty projektu.

Wziąwszy jednak wszystko pod uwagę, musimy przyznać, że zdecydowaną większość elementów udało się odtworzyć, a pominęliśmy naprawdę niewiele zagadnień. Ostateczną wersję utworzonego przez nas arkusza stylów przedstawia listing 13.2.

Listing 13.2.—Kompletny arkusz stylów
<style type="text/css">
body {margin: 0; padding: 0; color: black;
  background: white url(blue.gif) 80% 0 repeat-y;}
h1, h2, h3, h4, h5, p, pre, table, div {margin-right: 22%;
  margin-left: 8%;}
div.listing pre {border: 1px solid #006; border-width: 1px 0;
  padding: 0.5em 1em; margin: 0.125em 0 1.5em;}
div.listing h5 {margin-left: 0.5em;}
table {border: 1px solid #006; border-width: 2px 0;
  font-size: 90%; margin-bottom: 1.5em; width: 70%;}
th {color: #006; border-bottom: 1px solid #006; text-align: left;}
th, td {padding: 0.125em 0.66em;}
ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}
h1, h2, h3, h4 {font-variant: small-caps;}
h3, h4, h5 {margin-top: 1.25em; margin-bottom: 0;}
h1 {font-size: 300%; border-bottom: 2px solid white;
  margin: 0.5em 0 0.5em 0; padding: 0 0 0.125em 10%;}
h2 {font-size: 200%; margin: 0 0 0.66em 10%;}
h3 {font-size: 150%;}
h4 {font-size: 110%;}
h5 {font-size: 100%;}
h5 span {color: #006; margin-right: 0.5em;}
p {margin-top: 0.5em; margin-bottom: 1em; line-height: 1.2em;}
code, pre {font-family: "Courier New", Courier, monospace;}
code {color: #006;}
pre {margin-left: 10%; font-size: 80%;}
pre b {color: maroon; font-weight: normal;}
div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0;
  border: 1px solid #006; border-width: 0 1px 1px 0;
  background: #BDF;}
div#masthead blockquote {font-size: 90%; font-style: italic;
  margin: 2em 22% 0.5em 10%;}
div#attrib {font-size: 90%; font-style: italic;
  text-align: right; font-variant: small-caps;}
div#previews {float: right; width: 33%; margin: 0; text-align: center;}
div#previews img {width: 80%; margin-top: 1em;}
ul li {list-style: outside square url(diamond.gif);
  margin-bottom: 0.5em;}
div.note {float: right; clear: right; border-width: 0;
  width: 18%; margin: 0 1% 0 0; padding: 0;
  text-align: right; font: 80% Arial, Verdana, Helvetica, sans-serif;
  background: transparent url(blue.gif) 50% 15px repeat-x;
  voice-family: "\"}\""; voice-family:inherit;
  width: 19%;}
div.note h5, div.note p {text-align: left;
  margin-left: 1em; margin-right: 0;}
div.note img {height: 30px; width: 30px; margin: 0;}
div.note h5 {margin: -5px 30px 0 1em; padding: 0;
  font-variant: normal;}
div.web p {margin: -10px 30px 0 1em;}
div.note code, div.caption code {font-size: 100%;}
div.web {color: #399;}
div.tip {color: #006;}
div.warn, div.warn code {color: maroon;}
hr {clear: both; visibility: hidden;}
div.figure {float: left; width: 67%; margin: 0; padding: 0;
  text-align: right;}
div.caption {float: right; width: 30%; margin: 0 1% 0 0;
  padding: 0 0 0 40%;
  border-top: 1px solid #006;
  voice-family: "\"}\""; voice-family:inherit;
  width: 19%; padding-left: 10%;}
div.caption h5 {margin: 0 0.5em 0 0; padding: 0.33em 7px 0 0.5em;
  color: black; letter-spacing: 1px;
  background: #9BD url(captioncurve.gif) bottom right no-repeat;}
div.caption p {font: italic 80% Arial, Verdana, Helvetica, sans-serif;
  color: #555; margin: 0; padding: 0.25em 0.5em;}
</style>

Przykładowe modyfikacje

Nie mamy zbyt wielu możliwości modyfikacji strony, gdy próbujemy odtworzyć układ graficzny książki, ale oto kilka propozycji, które możesz wypróbować.

  1. branch Zmniejsz ilość miejsca poświęconego na nagłówek, nie zmieniając go jednak znacząco w porównaniu z wersją drukowaną. Nie musisz się starać, aby ramka znajdowała się w tej samej linii co obrazy podglądu, ponieważ i tak w większości przypadków nie są one wyrównane.
  2. branch Napisz style, które odtworzą odpowiednio wygląd podrozdziału „Przykładowe modyfikacje”. Pamiętaj, na jakie kompromisy musieliśmy się zgodzić, umieszczając obrazy podglądu obok nagłówka, i przyjmij podobną postawę podczas pracy nad wyglądem tego podrozdziału.
  3. branch Napisz style, które odtworzą szare prostokąty zawierające dodatkowe informacje — są to elementy div, których atrybut class ma wartość aside. Aby osiągnąć pełny efekt, konieczne będzie utworzenie dwóch obrazów, które wykorzystasz w nagłówku prostokąta. Nie masz wprawdzie możliwości umieszczenia obu obrazów w tle nagłówka, ale możesz pomyśleć nad tym, w jaki sposób zmienić kod HTML tak, aby dwa obrazy znalazły się w odpowiednim miejscu bez użycia elementu img w HTML, a przy wykorzystaniu CSS.