Instrukcje

Uwaga: Kod CSS w tych układach zawiera bardzo wiele komentarzy. Jeśli pracujesz głównie w widoku Projekt, zaglądaj do kodu — znajdziesz tam wskazówki dotyczące używania stylów CSS dla układów o płynnych szerokościach. Przed wdrożeniem własnego serwisu możesz usunąć te komentarze. Więcej informacji o technikach użytych w układach CSS zawiera następujący artykuł w serwisie Adobe Developer Center: http://www.adobe.com/go/adc_css_layouts.

Metoda wyłączania opływu

Ponieważ wszystkie kolumny są pływające, w tym układzie wprowadzono deklarację clear:both w regule klasy .footer. Taka technika wyłączania opływu wymusza prawidłowe zakończenie kolumn wewnątrz bloku klasy .container, tak aby krawędzie i tło tego bloku były prawidłowo wyświetlane. Jeśli układ wymaga usunięcia bloku .footer z bloku .container, musisz użyć innej metody wyłączania opływu. Najlepiej dodać element <br class="clearfloat" /> lub <div class="clearfloat"></div> za ostatnią kolumną pływającą (ale przed zamknięciem bloku .container). Da to taki sam efekt wyłączenia opływu.

Zastępowanie logo

W tym układzie w bloku .header, w miejscu, w którym użytkownicy zazwyczaj wstawiają swoje logo, znajduje się obraz zastępczy. Usuń ten obraz zastępczy i wstaw łącze do własnego logo.

Uwaga: Jeśli użyjesz Inspektora właściwości w celu nawigacji do obrazu logo za pomocą pola SRC (zamiast usunąć i zamienić obraz zastępczy), to musisz usunąć właściwości „background” i „display” wprowadzone w stylu wewnętrznym. Style wewnętrzne w znaczniku zostały użyte tylko po to, aby obraz zastępczy pojawiał się jako przykład w przeglądarkach.

Aby usunąć style wewnętrzne, ustaw panel Style CSS w tryb Bieżący. Zaznacz obraz i przejdź do panelu Właściwości w panelu Style CSS. Kliknij prawym przyciskiem myszy i usuń właściwości „display” i „background”. (Możesz oczywiście również przejść bezpośrednio do kodu i tam usunąć style wewnętrzne z obrazu zastępczego).

Komentarze warunkowe dla programu Internet Explorer 3.0

Układy o płynnych szerokościach zawierają komentarz warunkowy dla programu Internet Explorer (IECC), korygujący dwa błędy.

1. Przeglądarki w różny sposób zaokrąglają rozmiary bloków DIV w układach używających wartości procentowych. Aby wyświetlić blok o rozmiarze np. 144,5 piksela albo 564,5 piksela, przeglądarka musi zaokrąglić tę wartość do najbliższej liczby całkowitej. Programy Safari i Opera zaokrąglają w dół, Internet Explorer zaokrągla w górę, natomiast Firefox zaokrągla jedną kolumnę w dół, a drugą w górę, całkowicie wypełniając kontener. Niespójności zaokrąglania mogą powodować niespójny wygląd układu. W tym komentarzu warunkowym IECC wprowadzono margines ujemny o szerokości 1 piksela, poprawiający układ w programie IE. Możesz go przenieść do dowolnej kolumny (umieszczając po lewej albo po prawej stronie), zgodnie z wymaganiami układu.
2. Do kotwicy łącza w liście nawigacyjnej dodano właściwość „zoom”, ponieważ w niektórych przypadkach programy IE6 i IE7 renderują dodatkowy odstęp. Właściwość „zoom” powoduje uaktywnienie się niestandardowej właściwości hasLayout programu IE, która koryguje ten problem.