Lekcje

Łącza powyżej przedstawiają prostą strukturę nawigacyjną, w której wykorzystano nieuporządkowaną listę ze stylami CSS. Możesz jej użyć jako punktu wyjścia, modyfikując ją w celu uzyskania własnego, niepowtarzalnego efektu. Jeśli chcesz użyć wysuwanych menu, utwórz je za pomocą widgetu menu Spry, widgetu menu z serwisu Adobe Exchange lub dowolnego innego kodu JavaScript lub stylu CSS.

Jeśli chcesz umieścić pole nawigacyjne na górze, przenieś blok ul.nav na początek strony i ponownie utwórz style.

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 stałych 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.

Wyłączanie opływu

Ponieważ wszystkie kolumny są pływające, w tym układzie wprowadzono deklarację overflow:hidden dla bloku klasy .container. 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 umieścisz wewnątrz bloku .container zbyt duży element, wystający poza obręb tego bloku, to zostanie on ucięty. Nie można będzie również używać marginesów ujemnych ani pozycjonowania bezwzględnego z użyciem wartości ujemnych, aby przyciągać elementy znajdujące się poza blokiem .container, bo również nie będą wyświetlane.

Jeśli użycie takich właściwości jest konieczne, to musisz użyć innej metody wyłączania opływu. Najlepszą metodą jest dodanie elementu <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.

Stopka

Dodanie stopki za kolumnami, ale wewnątrz bloku .container spowoduje, że metoda wyłączania opływu deklaracją overflow:hidden nie zadziała. Możesz umieścić blok stopki (.footer) wewnątrz kolejnego bloku .container, poza pierwszym. Pozwoli to uniknąć niepożądanych efektów. Najprostszym wyjściem może być skorzystanie z układu, który zawiera nagłówki i stopki — wystarczy usunąć nagłówek, aby skorzystać z metod wyłączania opływu użytych w takich układach.

Tła

Kolor tła bloku DIV jest z natury wyświetlany tylko do miejsca, w którym kończy się zawartość. Oznacza to, że jeśli użyjesz koloru tła lub krawędzi, aby uzyskać efekt kolumny bocznej, to tło lub linia nie będą sięgać aż do stopki, lecz tylko do miejsca, w którym skończy się zawartość bloku. Jeśli blok DIV klasy .content będzie zawsze zawierać więcej treści, to możesz zdefiniować dla niego krawędź boczną, oddzielającą go od sąsiedniej kolumny.

www.000webhost.com