float left - Kurs HTML i CSS
HTML dla zielonych / Ustawienie obrazka HTML <img src alt "float"><img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny" style="float: ustawienie"> gdzie zamiast: "Tu podaj względną ścieżkę dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek, a w miejsce "Tu podaj tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony. Natomiast jako: "ustawienie" należy wpisać: left Obrazek będzie ustawiony po lewej stronie względem...
Pozycjonowanie CSS / Ustawienie {float, vertical-align}Spis treści {float, vertical-align} Ustawienie w poziomie {float} Ustawienie w pionie {vertical-align} Ustawienie w poziomie {float} selektor { float: sposób } Polecenia nie można zastosować do elementów pozycjonowanych absolutnie. Selektorem może być praktycznie dowolny znacznik, który nie został wypozycjonowany absolutnie [zobacz: Wstawianie stylów]. Natomiast jako "sposób" należy podać: left - element ustawiony po lewej stronie, względem elementów sąsiadujących right - element...
- Rozmiary CSS / Szerokość i marginesy automatyczne
...inline, nie-zastępowane Elementy inline, zastępowane Elementy blokowe, nie-zastępowane Elementy blokowe, zastępowane Elementy z oblewaniem (float) nie-zastępowane Elementy z oblewaniem (float) zastępowane Elementy pozycjonowane absolutnie, nie-zastępowane Elementy pozycjonowane absolutnie, zastępowane Elementy inline-block, nie-zastępowane Elementy inline-block, zastępowane Wstęp Podanie wartości auto dla własności określającej szerokość elementu (width) lub jego marginesy...
- Szablon strony na DIV-ach / Stały szablon
...top { width: 780px; margin-left: auto; margin-right: auto; text-align: left; } #NAGLOWEK { background-color: #888; } #MENU { width: 150px; float: 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...
- Pozycjonowanie CSS / Przyleganie {clear}
...Na przykład umieszczamy na stronie opis poparty odpowiednimi ilustracjami, które mają być ułożone po prawej stronie względem otaczającego tekstu (float: right). Jeśli w kodzie źródłowym umieścimy obrazki zbyt blisko siebie, tzn. nie rozdzielimy ich odpowiednio długim tekstem opisu, nie zostaną one ułożone jeden pod drugim - tak jak prawdopodobnie oczekiwaliśmy - lecz obok siebie. Co więcej, ułożenie będzie zależało od rozdzielczości ekranu i rozmiarów okna przeglądarki (w mniejszej...
- Menu w CSS / Poziome menu
...rodzaju i rozmiaru czcionki, a przy tym nie mogą być mniejsze niż szerokość jednej spacji Ustawiając wyświetlanie w bloku (block) oraz oblewanie (float) dla pozycji listy: ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul li { float: left; } Efekt: Czcionki Tekst Tło Marginesy Obramowanie W tym przypadku blokada zawijania tekstu nie jest konieczna, ponieważ nastąpi to zawsze pomiędzy oblewanymi blokami. Wykorzystuje się wtedy właściwość, że kilka...
- Szablon strony na DIV-ach / Płynny szablon
...html, body { background-color: #fff; color: #000; margin: 0; padding: 0; } #NAGLOWEK { background-color: #888; } #MENU { width: 150px; float: 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łą...
- Szablon strony na DIV-ach / Responsywny szablon
...{ background-color: #fff; } #STOPKA { background-color: #888; } @media only all and (min-width: 800px) { #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...
- Oprawa graficzna / "Duszki" CSS
...tekstu na zakładce. ul, ul li { display: block; list-style: none; margin: 0; padding: 0; line-height: normal; font-size: 12px; } ul { float: left; width: 100%; border-bottom: 1px solid #365; padding-left: 20px; } ul li { float: left; background: url(obrazek.gif) no-repeat -240px -25px; margin-right: 5px; } ul a:link, ul a:visited { text-decoration: none; display: block; font-weight: bold; background: url(obrazek.gif) no-repeat 100% 0; color: #365; padding: 5px 15px...
Aktualizacja / System newsów...left, right, center, justify */ padding: 5px; padding-bottom: 0; } .news_date span { font-weight: bold; } /* Obrazek: */ .news_img { float: left; /* ustawienie: left, right */ margin-right: 10px; margin-bottom: 5px; border: 0; } /* Więcej... */ .news_more { font-size: 11px; text-align: right; margin-bottom: 5px; margin-right: 15px; } /* Autor */ .news_author { font-size: 11px; /* rozmiar czcionki */ text-align: left; /* wyrównanie tekstu: left...