float - Kurs HTML i CSS
Komendy HTML 4.01 / Elementy zdeprecjonowane...CSS: text-decoration Wykaz atrybutów zdeprecjonowanych Atrybut Zastosowanie Zamiennik align APPLET, IFRAME, IMG, INPUT, OBJECT CSS: float, vertical-align align CAPTION CSS: caption-side align DIV, H1, H2, H3, H4, H5, H6, P CSS: text-align align HR CSS: text-align, float align LEGEND - align TABLE CSS: margin-left (auto), margin-right (auto), float alink BODY CSS: :active alt APPLET OBJECT archive APPLET OBJECT background BODY CSS...
Komendy CSS3 / Kształty CSS...Kształt obszaru oblewania Wartość none | [ <basic-shape> || <shape-box> ] | <image> Inicjalizacja none Zastosowanie elementy z oblewaniem (float) Dziedziczenie nie Media visual shape-image-threshold Wybór pikseli obrazka obszaru oblewania Wartość <number> Inicjalizacja 0.0 Zastosowanie elementy z oblewaniem (float) Dziedziczenie nie Media visual shape-margin Margines obszaru oblewania Wartość <length> | <percentage> Inicjalizacja 0 Zastosowanie elementy z oblewaniem...
- 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...
- Marginesy CSS / Załamywanie marginesów
...załamywane mogą być tylko marginesy pionowe w następujących przypadkach: Dwa lub więcej sąsiadujące marginesy pionowe bloków bez "oblewania" (float) zostają załamane. Wynikowy margines ma wysokość najwyższego z załamywanych marginesów składowych i jest on zawsze dodatni lub równy zero, nawet w przypadku ujemnych wartości marginesów składowych. Pionowe marginesy pomiędzy elementami z ustawionym "oblewaniem" (float) a dowolnymi innymi elementami nigdy nie są załamywane. Pionowe...
- HTML dla zielonych / Jak zrobić dobrą stronę HTML
...we właściwej treści strony (BODY) wpisz np.: <header style="text-align: center">Tutaj można umieścić logo serwisu</header> <nav style="width: 300px; float: left; overflow: hidden"> Tu umieszcza 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...
- Oprawa graficzna / Zamiennik obrazkowy
...przezroczyste. <div>Zamiennik obrazkowy</div> div { width: 200px; height: 50px; overflow: hidden; } div:before { content: url(obrazek.gif); float: right; } Przykład Zamiennik obrazkowy Zamienniki obrazkowe a Google Stosowanie techniki Image replacement może teoretycznie budzić pewne kontrowersje, jeśli chodzi o wyszukiwarki internetowe takie jak np. Google. Większość internautów używa przeglądarek graficznych, w związku z czym na ekranie ich monitorów wyświetlają się wszystkie...
- Dobre praktyki / CSS Zorientowane Obiektowo
...tak: .Menu { background-color: white; } .Menu ul, .Menu li { display: block; list-style: none; margin: 0; padding: 0; } .Menu li { float: left; margin-right: 1em; } .Menu a { color: blue; text-decoration: none; } Kompozycja Zwróćmy uwagę, że typowy artykuł może zawierać informacje o: autorze - np. z jego imieniem, nazwiskiem i zdjęciem źródle - nazwa, logo i odnośnik Każdy z tych elementów można traktować jako osobny obiekt (zmiana wyglądu informacji o autorze...
- Selektory pseudoelementów CSS / Pierwsza litera :first-letter
...w MSIE 6 wszystko jest w porządku. Inny ciekawy przykład: p:first-letter { color: red; font-family: 'Times New Roman', serif; font-size: 300%; float: left } W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób...
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...
- Układ elastyczny CSS / Flexbox
...przewidzieć, ile tekstu będą zawierać artykuły, opublikowane w serwisie. Rozwiązaniem miało być płynne ustalanie pozycji przy pomocy właściwości float [zobacz: Szablon strony na DIV-ach]. I rzeczywiście w większości typowych zastosowań taki sposób był zupełnie wystarczający. Niestety w pewnych szczególnych przypadkach miał podobne ograniczenia jak pozycja absolutna. Bardzo trudno było zrealizować, zdawać by się mogło, tak trywialne sposoby układania elementów, jak wyśrodkowanie w pionie...