Wave wersja preview

Kilka dni temu dostałem dość długo wyczekiwany dostęp do nowej usługi Google – Google Wave. Dla niewtajemniczonych – jest to narzędzie do komunikacji i współpracy on-line. Oczywiście aplikacja nie jest jeszcze finalna, wersja preveiw jest okrojona i posiada tylko główne funkcje. Obecnie Waves testuje 100 tys. osób, ja również znalazłem się w tym gronie

Co to jest?

Aplikacja łączy w sobie e-mail, komunikator, forum, serwis społecznościowy, wiki, narzędzie do zarządzania projektami – to wszystko w oknie przeglądarki. Udostępnia API, które umożliwia tworzenie własnych gadgetów (Google Gadgets) oraz robotów do wykonywania powtarzalnych czynności. Dzięki temu staje się niezwykle rozszerzalna i dopasowywalna. Google Wave można zintegrować ze stroną internetową, np. blogiem i za jej pomocą np. komentować wpisy.

Fala

Czym jest fala? W skrócie jest to wirtualna dyskusja. Fala dzieli się na wavelety, a te z kolei na blipy. Wavlety są wątkami w dyskusji, a blipy to pojedyńcze wiadomości. Do fali można dołączyć gadget lub rozszerzenie. Pierwsze to mini aplikacje, typu ankieta (takie jak quizy w Facebooku), a rozszerzenia to programy takie jak Google Maps czy gry np. sudoku. Projekt jest w pełni w wersji Open Source, dlatego każdy może tworzyć i rozpowszechniać swoje własne aplikacje.

Możliwości

Jak mówią pracownicy firmy Google, Wave jest odpowiedzią na pytanie – jak wyglądałaby poczta elektroniczna, gdyby została wynaleziona w 2009 roku. Wave (ang. fala) jest dyskusją, w której brać udział może nie tylko kilka osób, ale również roboty. Te ostatnie to inaczej boty (programy symulujące użytkownika) z tą różnicą, że potrafią modyfikować treść wiadomości (np. tłumaczyć wątek na inny język), komunikować się z innymi falami czy wyszukiwać informacje.

Przypomina mi to wizję WEB 3.0 według Berners-Lee, Hendler oraz Lassil (info z mojej pracy magisterskiej) po raz pierwszy przywołaną w American Science w 2001 roku. Artykuł opisywał programy, które działają w sieci i wykonują zadania dla użytkowników, np. zapisują na wizytę u dentysty czy kupują bilety lotnicze.

Waves

Wave działa w czasie rzeczywistym. Można nawet zaobserwować jak użytkownik wpisuje wiadomość znak po znaku. Fale można umieszczać na blogu czy swojej stronie internetowej, a wiadomości mogą być współdzielone, dzięki czemu więcej użytkowników może je edytować. W przyszłości pełny kod Google Wave będzie opublikowany, dzięki temu każdy będzie mógł postawić swój własny serwer Waves. Czyż to nie wspaniałe?

Zaproszenia do Google Wave

W niedługim czasie postaram się podzielić na blogu pierwszymi doświadczeniami z Google Wave. Dysponuje jeszcze kilkoma zaproszeniami do aplikacji i chętnie się nimi podzielę. Proszę o wiadomość, albo komentarz pod wpisem. Na Wave’ach można mnie znaleźć pod pseudonimem okrutnik@googlewave.com

Tutaj na blogu opisuje ogólnie najważniejsze funkcje Google Wave, więcej można znaleźć w angielskiej Wikipedii

Zachęcam do obejrzenia popularnego filmiku bardzo szeroko prezentującego możliwości Google Wave.

A tutaj streszczenie dla osób nie dysponujących 1:20:

Dla tych, którzy preferują słowo pisane, przewodnik po Google Wave

Konsorcjum W3C

W3C (ang. World Wide Web Consortium) to organizacja zajmująca się standardami w sieci WWW. Założona została przez ojca idei stron internetowych oraz pierwszej przeglądarki internetowej Sir Tim Berners-Lee. W3C zrzesza ponad 400 organizacji (firmy, uczelnie, agencje rządowe). Dzięki swojemu autorytetowi i pozycji w branży internetowej, rozporządzenia przygotowywane przez konsorcjum są szeroko akceptowane i wprowadzane w życie, mimo braku mocy prawnej.

Jeśli nie chcesz czytać przydługawego wstępu o W3C i HTML’u, przejdź do punktu narzędzia

Proces ustalania standardów jest bardzo złożony. Każda organizacja będąca członkiem W3C może złożyć propozycję utworzenia lub zmiany standardu. Po zebraniu wszelkich propozycji na dany temat, powoływany jest zespół ekspertów, który dyskutuje i podejmuje decyzje co do przyszłych zaleceń. Oczywiście jest to bardziej skomplikowana procedura.

Standard XHTML

Jednym z zagadnień, którym zajmuje się W3C jest XHTML (ang. Extensible HyperText Markup Language) – ogólnie powszechny język znaczników do tworzenia stron WWW. Na stronach w3c.org można znaleźć bardzo obszerne dokumenty opisujące ten język.

Walidator

Oprócz tego do dyspozycji web developerów oddany jest walidator. Jest to narzędzie pozwalające sprawdzić poprawność i zgodność ze standardami zakodowanych stron. Dzięki niemu można bardzo łatwo namierzyć błędy przy kodowaniu strony. Oczywiście pozytywny wynik w walidatorze nie oznacza, że dokument jest zgodny z określonym w nagłówku strony typem DTD. Aczkolwiek jest na to duże prawdopodobieństwo. Walidator daje pewne poczucie zgodności i w praktyce pomaga (w dość niewielkim stopniu) tworzyć strony dostępne, działające na różnych platformach, poprawnie odczytywane przez Google, co ma wpływ na SEO.

Narzędzia

Jest wiele różnych narzędzi sprawdzających kod pod względem poprawności. Od jakiegoś już czasu korzystam z wtyczki do Firefoxa – Total Validator. Jest to bardzo prosty w obsłudze program, dysponujący walidatorem nie tylko do XHTML’a, ale również sprawdzający stronę pod względem dostępności (W3C Web Accessibility Guidelines (1.0 and 2.0)), standardu US Section 508 Standard. Wykrywa nie działające linki, sprawdza poprawność gramatyczną (do dyspozycji jest 5 języków) oraz potrafi zrobić obraz strony w różnych przeglądarkach. Polecam!

Błędy

Do napisania tej notki skłoniły mnie błędy, na jakie natknąłem się niedawno przy walidacji strony. Otóż nie mogłem poradzić sobie z walidacją statusu on-line z (popularnego i w niektórych kręgach znienawidzonego) komunikatora Gadu-Gadu oraz z elementami html (np. odnośnikami) w linii opisu (title=”") w lightbox’ie.

Rozwiązanie, bardzo proste, sprowadzało się do jednego, mianowicie chodzi o zastąpienie znaków specjalnych htmla:

< > ' &

Encjami, odpowiednio:

< > & "

To rozwiązuje wszelkie ostrzeżenia i błędy w walidatorze.

Zachęcam do zapoznania się bliżej ze standardami języka HTML, ciekawą lekturę wprowadzającą zapewnia jak zawsze Wikipedia

Pamiętajcie – „zdrowy”, poprawny, zgodny ze standardami i dobrymi praktykami kod to podstawa!

sIFR – korzystaj z czcionek do woli!

W ostatnim projekcie, nad którym pracowałem (htmluj.pl) wykorzystałem powszechnie znaną technikę sIFR (ang. Scalable Inman Flash Replacement). Polega ona na podmienianiu tekstowych elementów strony (np. nagłówków, bloku tekstu) automatycznie na dynamicznie generowany element Flash. Dzięki temu na stronie można wyświetlać dowolne kroje czcionki, niekoniecznie tylko te popularne, wbudowane w system (Arial, Verdana, Times New Roman, itp.) bez potrzeby ręcznego tworzenia obrazków z żądanym tekstem. Rozwiązanie takie jest z pewnością świetną sprawą dla designerów, pragnących w pełni realizować swoje wizje.

Jak to działa

Technika jest połączeniem JavaScriptu, CSSa i Flasha. Jest bardzo prosta w implementacji i działa wszędzie tam gdzie jest zainstalowany Flash (przy wyłączonym Flashblocku rzecz jasna) i włączony JavaScript. Technologia wykorzystuje Flasha (za pomocą ActionScript) do osadzenia czcionki i JavaScript do wstawienia elementów w odpowiednie miejsca. Jeśli Flash nie jest zainstalowany, czcionki wyświetlają się w wersji standardowej, możliwej do ustawienia w CSSie. Krój czcionki definiuje się z góry w dostarczonym pliku Flash.

Pierwsze problemy

sIFR jest projektem open source, co oznacza, że jest dostępne za darmo i każdy użytkownik może przyczynić się do jego rozwoju. Obecnie sIFR jest wydany w wersji oznaczonej numerem 3 beta. Wersja 2.0.7 jest bardzo stabilna i nie sprawia większych problemów. Kwestie, które na początku sprawiły problem i wymagały przeszukania sieci to:

• Ustawienie interlinii tekstu sIFR. W tym przypadku przy zmianie wartości znacznika line-height nic się nie dzieje. Rozwiązaniem jest ustawienie znacznika leading.

  sIFR.replace(zamien, {
    css: '.sIFR-root { leading: 1.5; }'
  });
   

  Jednakże w przypadku kiedy mamy tylko jedną linię tekstu (przy nagłówkach) zmiana leading nic nie daje. Pozostaje ostylować element podmieniony, ustawić zerowy margines i eksperymentować z height.
• Każdy element sIFR z float bezpośrednio na nim musi mieć określoną wartość width, niestety nie jest ona określana wtedy poprawnie względem długości tekstu. Elementy maja wartość dispaly:block;. Dodanie znacznika

  <h1><span>Nagłówek</span></h1>

  powoduje to ustalenie właściwości inline. Później występuje tylko kwestia przejścia do nowej linii.
• Float może powodować różne nieprzewidziane zachowania. Problem może rozwiązać display:inline; lub np. position : absolute; w pojemniku ustawionym jako relative. W zależności od sytuacji trzeba szukać rozwiązania.
• W przypadku tworzenia linków sIFR cały znacznik

  <a href="">link</a>

  należy umieścić w znacznik uruchamiający podmianę np.

  <span><a href="">link</a></span>

• Lepiej jest określać wielkość czcionki za pomocą pikseli, a nie relatywnie – em
• Wewnątrz elementu z float, sIFR zachowuje się „dziwnie” i potrafi znaleźć się nie na swoim miejscu
• Wykorzystywanie techniki clear:both; w oddzielnym elemencie div jest wskazane i ułatwia dopasowanie elementów sIFR
• Zrenderowany tekst nie jest płynny, technologia najlepiej spisuje się w nagłówkach
• Trzeba pamiętać o zagnieżdżeniu polskich znaków w pliku Flash

Wady i zalety sIFR

Oczywiście sIFR nie jest doskonały, oprócz wspomnianych problemów można mu zarzucić braki w dostępności i użyteczności. Przekształcony tekst zaznacza się dużo toporniej, strona, na której występuje sprawia wrażenie „ciężkiej”, nie jest skalowalny przez przeglądarkę. Pozytywne cechy tej technologii to, pierwsza i oczywista to realna możliwość wykorzystania dowolnej czcionki na stronie. Kolejne to: „kompatybilność” z SEO, tekst można zaznaczyć i skopiować, możliwa dynamiczna zmiana tekstu, co oznacza szybszą edycję, przy braku Flasha i JavaScriptu strona nie traci funkcjonalności.

W następnym odcinku…

W kolejnej części tego tematu przedstawię alternatywy dla sIFR, będzie to FLIR (Face Lift Image Replacement) oraz Cufon (Typeface.js)

Zbiór linków

W trakcie pracy z sIFR znalazłem wiele ciekawych stron poświęconych tej technice. Oto one:

• Pobierz sIFR
• sIFR Documentation & FAQ sIFR dokumentacja i faq
• The Joyent Community Forum o sIFR, sprawdź, na pewno ktoś miał problem podobny do Twojego
• Mike industries Ogólne informacje o projekcie
• perishablepress.com Przykłady wykorzystania argumentów

Adobe Fireworks CS3

Na początku przygody z grafiką i tworzeniem stron korzystałem z Photoshopa. Jednakże kiedy zacząłem pracować jako web developer w Szkocji, mój kolega współpracownik polecił mi Fireworksa CS3. Jest to program, który łączy ze sobą możliwość korzystania z grafiki wektorowej i rastrowej. Producent, firma Adobe na swojej stronie opisuje Fireworksa jako wydajne narzędzie do tworzenia prototypów stron internetowych i aplikacji.

Idealny tam gdzie prostota ma dominować

Większość web designerów, których znam, w pracy nad stroną www posługuje się Photoshopem. Jest on najsilniej zakorzenionym narzędziem i stał się wręcz standardem w branży. Uważam jednak, że nie w każdym przypadku jego wybór jako narzędzia do tworzenia stron jest uzasadniony. Pracując nad projektem, który z założenia ma być estetyczny, prosty, i w którym usability powinno dominować nad bogatymi czynnikami wizualnymi, Photoshop wydaje się być przysłowiową armatą na zająca.

Wybór odpowiedniego narzędzia

Oczywiście nie twierdzę, że Fireworks jest pod każdym względem lepszy lepszy. Chodzi mi o to, że wybór odpowiedniego narzędzia do danego zadania przekłada się na wydajność i nawet jakość wykonania. Photoshop zawsze pozostanie standardem w branży projektowania high-endowej grafiki dla sieci i do druku. Oczywiste jest, że wtedy swoimi możliwościami przewyższa Fireworksa. Jednakże do budowania stron internetowch Fireworks wyprzedza swojego starszego przyszywanego brata (bo początkowo produkowanego przez firmę Macromedia).

Bitmapa vs. Wektor

Przy pierwszym użyciu, rzuciła mi się w oczy lekkość i szybkość programu w porównaniu do Photoshopa, w którym pracować można tylko przy użyciu bitmap. Z tego powodu wszelkie operacje edycji stworzonych elementów są znacznie bardziej skomplikowane, niż takie same operacje w grafice wektorowej. Zmiana koloru czy gradientu obiektu w Fireworksie to kwestia dwóch kliknięć w pasku właściwości obiektu. W Photoshopie do tego celu wykorzystuje się dwa elementy: obiekty i ich maski.

Autokształty

Fireworks dostarcza bardzo dużą liczbę łatwo edytowalnych automatycznych kształtów. Stworzenie prostokąta o zaokrąglonych rogach w dowolnym kącie jest niezmiernie proste i szybkie. Również edytowanie takiego prostokąta to żaden problem. Photoshop niestety zachowuje się w takiej sytuacji niezbyt przyjaźnie, deformuje zaokrąglone rogi. Krzywe Beziera działają jakby wyjęte z Illutratora. Oprócz tego mamy zestaw narzędzi do grafiki rastrowej: stempel, różczka, narzędzia wyostrzania, rozmycia i inne.

Wybieranie obiektów i filtry

Znacznie wydajniej można edytować stworzone elementy dzięki automatycznemu zaznaczaniu. Wystarczy najechać kursorem (pointer tool) na dany obiekt, a ten podświetli się i klikając na niego zostaje wybrany. Ta funkcja była również obecna w programie Paint Shop Pro. Zaznaczę, że w Photoshopie aby wybrać daną warstwę z obszaru roboczego należy skorzystać aż z dwóch narzędzi. Na uwagę zasługuje funkcja nakładania filtrów (cienie, wypukłości, rozmycia, przenikanie i inne) na obiekty. Dany filtr można w każdej chwili edytować lub szybko usunąć. Narzędzia tekstowe pracują doskonale, na tekst również można nałożyć filtr.

Cięcie i zapis

Niezwykle rozbudowany jest również system cięcia i zapisu grafiki. Do wyboru mamy najpopularniejsze formaty, wraz z oknem, w którym można porównać zoptymalizowane pliki i wybrać najbardziej odpowiedni format czy kompresję. Niestety nie korzystałem z funkcji automatycznego kodowania pociętej strony. Mam złe doświadczenia z tego typu funkcjonalnościami i zawsze ręcznie generuję kod. Aczkolwiek Adobe chwali się na swoich stronach, że w pakiecie CS4, stworzony projekt może być zakodowany automatycznie do poprawnego kodu CSS i HTML. Będę musiał sprawdzić, na ile jest to prawdziwe i wydajne.

PNG vs. PSD

Domyślny format zapisu Fireworksa to PNG, co umożliwia (w przeciwieństwie do Photoshopa – PSD) przeglądanie stworzonych projektów w innych programach.

Nie do druku

Do niewątpliwych wad Fireworksa należy brak obsługi kolorów CMYK, więc nie nadaje się jako narzędzie do tworzenia elementów do druku. Istnieją jednakże metody eksportu RGB np. do programu Illustrator.

Dodatkowe możliwości

Wymienione przeze mnie cechy Fireworksa to tylko mała część jego możliwości. Zachęcam do zapoznania się z tym programem. Polecam również stronę speckyboy.com, gdzie na jednym z wpisów autorzy przedstawiają 75 rozszerzeń do Fireworksa czyniąc go jeszcze większym rywalem dla Photoshopa.

Przykład wykorzystania programu

Jako przykład możliwości Fireworksa przedstawię wykonaną przeze mnie witrynę Htmluj.pl, która za kilka dni ujrzy światło dzienne. W celu zabezpieczenia przed kradzieżą pozwoliłem sobie dodać półprzeźroczysty napis, który mam nadzieję nie będzie przeszkadzał w odbiorze projektu. Strona będzie pod adresem: htmluj.pl. A tutaj widok projektu strony.

Htmluj.pl - przykład wykorzystania programu Fireworks

Dodatki

Na zakończenie podaję linka do ciekawego wpisu na blogu spoongraphics.co.uk, gdzie autorzy przedstawiają 20 trików przyspieszających pracę w Photoshopie. Część z nich można zastosować do Fireworksa. Tutoriali do Fireworksa można szukać na youtube.com, jest ich wiele. Jako przykład, że strony można tworzyć nie tylko w Fireworksie czy Photoshopie wklejam linka do tutoriala o tworzeniu strony w Illustratorze. Przy okazji polecam serwis Vectortuts!

CSS

Dwie istotne kwestie często pojawiające się przy kodowaniu stron to błąd IE6 dotyczący elementu z float i marginesem w kierunku float’a oraz technika zamiany tekstu (najczęściej tytułów h) na grafikę. Opiszę je pokrótce oraz zaproponuje rozwiązania, które stosuje w codziennej pracy.

Powiększony margines (ang. IE5/6 Doubled Float-Margin Bug)

.box {
  float: left;
  width: 100px;
  height: 100px;
  margin: 5px 0 5px 100px;  /*Ta wartość nadaje lewy margines 100px */
  }

.box {
  float: left;
  width: 100px;
  height: 100px;
  margin: 5px 0 5px 100px;  /*Ta wartość nadaje lewy margines 100px */
display: inline;
  }

Zamiana tekstu na grafikę (ang. image replacement technique)

<!--HTML-->
<h1 id="logo"><a href="index.html">Nazwa firmy</a></h1>

/*CSS*/
h1#logo a {
display : block;
width : 100px;
height : 100px;
background : url(logo.gif) no-repeat;
text-indent : -999999px;
overflow:hidden;
outline:none;
}

Styl domyślny

Każda przeglądarka internetowa ma fabrycznie zdefiniowany, domyślny styl css (browser default/built-in stylesheet). Kod xhtml, który nie posiada przypisanego stylu jest renderowany z wykorzystaniem stylu domyślnego. Oczywiście taki stan rzeczy przewiduje specyfikacja css (stąd nazwa kaskadowy). Jest to pozytywna cecha, gdyż dokument xhtml (nie zawierający stylu) wyświetla się nam w wersji minimalistycznej i użytecznej, a nie jako jeden długi ciąg znaków.

Niestety w wielu przypadkach „defaultowe” style przeglądarek znacząco różnią się od siebie (szczególnie jeśli chodzi o elementy blokowe). Prowadzi to do niejednolitego wyglądu stron w zależności od przeglądarki. Szczególną niechęć webdesignerów w tej kwestii zyskały sobie różne wersje Internet Explorera, ale i na nie znalazł się sposób.

Metody restartowania stylu

Jedną z metod zapobiegania różnicom w wyświetlaniu treści jest resetowanie stylu, czyli nadpisanie stylu domyślnego stylem własnym (w kaskadzie styl domyślny jest najniżej w hierarchii). W sieci można znaleźć wiele tzw. resetów. Niektóre z nich są bardzo proste, ale i nie pozbawione wad, inne skomplikowane i tym samym niepotrzebnie rozbudowane. Według mnie ciekawą i wyważoną propozycją jest reset autorstwa Erica Meyera (eksperta css) prezentowany poniżej:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Reset ten oprócz niwelowania różnic elementów blokowych, zmienia też elementy liniowe określając standardowy krój czcionki.

Selektor uniwersalny

Nie polecam korzystania z selektora uniwersalnego (*) przy resetowaniu. Selektor wybiera wszystkie elementy, blokowe i liniowe, również te, dla których nie ma potrzeby ustawiać np. marginesu. Może się to przekładać na szybkość renderowania strony. W przypadku korzystania z formularzy można spodziewać się efektu „ścięcia” niektórych pól.

Własny reset

Warto podczas pracy tworzyć i usprawniać własny reset, który oczywiście może bazować na gotowych rozwiązaniach.

Znajomość domyślnych stylów przeglądarek oraz sposobów na ich „zneutralizowanie” jest elementem kluczowym w tworzeniu stron działających w różnych przeglądarkach. Reset znacznie ułatwia pracę i może zaoszczędzić godziny spędzone na szukaniu przyczyny niespójności stron przy kodowaniu.

W ramach przypomnienia sobie „trików” dla css’a postanowiłem zamieścić na blogu serię wpisów dotyczących tego jakże szerokiego zagadnienia.

Tematem pierwszej części jest prawidłowe wykorzystanie znacznika float

Float – podstawowe informacje

Float wykorzystywany jest do tworzenia tzw. pływających elementów. Mogą one znajdować się przy lewej lub prawej krawędzi obiektu, w którym się znajdują. Nie można używać go do wyśrodkowania elementu w tekście. Do wyśrodkowania służy margin: 0 auto; Float może być wykorzystywany do:

• Tworzenia opływającego grafikę tekstu
• Układania list poziomo
• Tworzenia kolumn
• Wstawienia inicjału, dużej litery na początku tekstu

Wartości, które przyjmuje:

• left
• right
• none – wartość domyślna dla wszystkich elementów

Zapobieganie opływaniu

Aby spowodować wyświetlenie elementu poniżej obiektu z float należy nadać mu wartość clear. Poniższe przykłady pokazują zachowanie się elementów, mających różną wartość float:

Przykład 1

Przykład 2

Ciekawe zachowanie można zaobserwować w przykładzie 1. Element z float zostaje wyjęty z normalnego biegu dokumentu. W przykładzie 2, właściwość clear taki bieg ponownie przywołuje.

Clear może przyjmować wartości:

• left
• right
• both
• none – wartość domyślna dla wszystkich elementów

Element może mieć również obie wartości clear i float, wtedy będzie „pływał” poniżej innych floatów

Obiekt w obiekcie i overflow

Jeśli element, który zawiera elementy pływające ma właściwość overflow z wartością inną niż visible to zachowuje się tak jakby jego dolna krawędź miała clear:both;

Przykład 3

Przykład 4

Przykład 5

Przykład 3 ilustruje prawidłowe wykorzystanie overflow, tak aby dwa pływające obiekty mieściły się w głównym boksie, a dodatkowy tekst znajdował się pod nim

Przykład 4 pokazuje, że dodanie float do elementu zawierającego w sobie obiekty z float powoduje zawarcie tych elementów wewnątrz obiektu nadrzędnego. Niestety dodatkowy tekst będzie opływać tenże obiekt z prawej strony. Można ten efekt zniwelować poprzez dodanie przed dodatkowym tekstem elementu:

Przykład 5 to sytuacja, w której elementy „pływające” nie zawierają się w elemencie nadrzędnym, dodatkowy tekst opływa elementy wewnętrzne.

Oczywiście nie są to wszystkie metody rozwiązywania problemu z opływaniem. Ciekawym, nowoczensym i wartym uwagi jest sposób z wykorzystaniem właściwości :after. Metoda jest szerzej opisana w linku numer 1.

Linki

Dodatkowe informacje o elementach pływających można znaleźć pod następującymi adresami: 1. http://www.complexspiral.com/publications/containing-floats/ 2. http://www.positioniseverything.net/easyclearing.html