clear - Kurs HTML i CSS
Pozycjonowanie CSS / Przyleganie {clear}selektor { clear: sposób } Polecenie można zastosować tylko do elementów wyświetlanych w bloku (block). Jako "sposób" należy podać: left - lewy bok elementu nie przylega do poprzedzającego elementu pływającego right - prawy bok nie przylega both - żaden bok nie przylega none - brak ograniczeń Polecenie pozwala ustalić pozycję elementów sąsiadujących względem elementu pływającego (np. obrazka). Określa które krawędzie elementu następującego po elemencie pływającym nie będą do niego...
- Komendy CSS 2 / clear
WARTOŚĆ none | left | right | both | inherit OPIS Przyleganie do elementu pływającego INICJALIZACJA none ZASTOSOWANIE elementy blokowe DZIEDZICZENIE nie PROCENTY nie MEDIA visual
- Szablon strony na DIV-ach / Stały szablon
...left; overflow: hidden; background-color: #ccc; } #TRESC { width: 630px; float: left; overflow: hidden; background-color: #fff; } #STOPKA { clear: both; width: 100%; background-color: #888; } Wyjaśnienie: Pierwszą regułą stylów w arkuszu CSS jest ustalenie domyślnego koloru tła oraz kolor tekstu w całym dokumencie. Zawsze trzeba o tym pamiętać, ponieważ użytkownik może zmienić domyślne kolory w swoim systemie operacyjnym, a wtedy przypadkowo możemy uzyskać dość osobliwy efekt...
- Szablon strony na DIV-ach / Płynny szablon
...left; overflow: hidden; position: relative; background-color: #ccc; } #TRESC { margin-left: 150px; background-color: #fff; } #STOPKA { clear: both; background-color: #888; } Wyjaśnienie: Ustalamy kolor tła oraz tekstu dla całej strony oraz usuwamy marginesy, aby mieć większy obszar dostępny na nasz szablon. Ustalamy stałą szerokość kolumny menu nawigacyjnego, aby nie rozszerzała się przy zmianie rozmiarów okna przeglądarki ani rozdzielczości ekranu. Menu nawigacyjne zwykle...
- Szablon strony na DIV-ach / Responsywny szablon
...MENU { width: 150px; float: left; overflow: hidden; position: relative; } #TRESC { margin-left: 150px; } #STOPKA { clear: both; } } @media only all and (min-width: 1280px) { html, body { text-align: center; } #top { width: 1260px; margin-left: auto; margin-right: auto; text-align: left; } #MENU { width: 300px; } #TRESC { width: 960px; float: left; overflow: hidden; margin-left: 0; } #STOPKA...
Komendy HTML 4.01 / Elementy zdeprecjonowane...background BODY CSS: background-image bgcolor BODY, TABLE, TD, TH, TR CSS: background-color border IMG, OBJECT CSS: border-width clear BR CSS: clear code APPLET OBJECT codebase APPLET OBJECT color BASEFONT, FONT CSS: color compact DIR, DL, MENU, OL, UL CSS: margin-top, margin-bottom, line-height face BASEFONT, FONT CSS: font-family height APPLET OBJECT height TD, TH CSS: height hspace APPLET, IMG, OBJECT CSS: margin-left...
- HTML dla zielonych / Jak zrobić dobrą stronę HTML
...się odsyłacze spisu treści </nav> <article style="margin-left: 320px"> Tu wpisuje się treść strony </article> <footer style="text-align: center; clear: both">Tutaj można umieścić stopkę serwisu</footer> a otrzymamy: Tutaj można umieścić logo serwisu Tu umieszcza się odsyłacze spisu treści Tu wpisuje się treść strony Tutaj można umieścić stopkę serwisu Nawigacja w serwisie to bardzo ważna sprawa. Nieczytelny układ strony, menu w którym trudno cokolwiek znaleźć i inne podobne...
- Komendy HTML 4.01 / Wykaz atrybutów
...BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE Lista klas rozdzielonych odstępami classid OBJECT Identyfikuje implementację clear BR Kontroluje przepływ tekstu code APPLET Plik klasy apletu codebase APPLET Opcjonalny adres bazowy dla apletu codebase OBJECT Adres bazowy dla klas, danych, archiwów codetype OBJECT Typ zawartości dla kodu color BASEFONT, FONT Kolor tekstu cols FRAMESET Lista długości, domyślnie: 100% (1 kolumna) cols...
- Menu w CSS / Poziome menu
...Dokładne ustalenie marginesu pomiędzy pozycjami listy Wady: Trudności przy ustawieniu odnośników centralnie Konieczność przypisania własności clear następnemu elementowi na stronie Czcionki Tekst Tło Marginesy Obramowanie ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul li { float: left; } ul a:link, ul a:visited { text-decoration: none; display: block; width: 80px; text-align: center; background-color: #ccc; color: #000; border: 2px...
Aktualizacja / System newsów...dashed, dotted, double, groove, ridge, inset, outset */ border-top-color: gray; /* kolor obramowania */ padding: 5px; /* margines wewnatrz */ clear: both; } .news_author span { font-weight: bold; } Wszystkie ważniejsze linijki zostały opisane. Oczywiście powyższe deklaracje można dołączyć do istniejącego arkusza stylów strony. Dalej wykonujemy analogiczną czynność z kodem przedstawionym poniżej, jednak tym razem zapisujemy go w pliku z rozszerzeniem *.js - np. news.js...