position - Kurs HTML i CSS
Szablon strony na DIV-ach / Responsywny szablon...{ 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: 300px; } #TRESC { width: 960px...
- Komendy CSS3 / Tło i obramowanie CSS
...Module Level 3 Spis treści background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color...
- Komendy CSS3 / Obrazki CSS
Źródło: CSS Images Module Level 3 Spis treści image-orientation image-rendering object-fit object-position image-orientation Orientacja obrazka na stronie Wartość from-image | none | [ <angle> || flip ] Inicjalizacja from-image Zastosowanie wszystkie elementy Dziedziczenie tak Procenty nie image-rendering Określenie jak przeskalozwać obrazek Wartość auto | smooth | high-quality | crisp-edges | pixelated Inicjalizacja auto Zastosowanie wszystkie elementy Dziedziczenie...
- Komendy CSS3 / Maskowanie CSS
...mask-border-repeat mask-border-slice mask-border-source mask-border-width mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type clip Obcinanie Wartość rect() | auto Inicjalizacja auto Zastosowanie elementy pozycjonowane absolutnie Dziedziczenie nie Procenty nie Media visual clip-path Kształt obcinania Wartość <clip-source> | [ <basic-shape> || <geometry-box> ] | none Inicjalizacja none Zastosowanie wszystkie...
- Rozmiary CSS / Szerokość i marginesy automatyczne
...nie-zastępowane Przykład: DIV, SPAN i inne (ale nie IMG, INPUT, TEXTAREA, SELECT, OBJECT, które są elementami zastępowanymi) - z ustawionym stylem position: absolute. Elementy takie muszą spełniać następujące równanie: 'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = szerokość bloku obejmującego Rozwiązanie tego równania uzyskuje się poprzez wykonanie podstawień w następującym porządku (CSS 2)...
- Komendy CSS 2 / background
WARTOŚĆ [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit OPIS Atrybuty mieszane tła INICJALIZACJA zobacz cechy indywidualne ZASTOSOWANIE wszystkie elementy DZIEDZICZENIE nie PROCENTY dla cechy 'background-position' MEDIA visual
- Tło CSS / Atrybuty mieszane tła {background}
...Wartość rozmiarów tła (background-size) musi być poprzedzona znakiem ukośnika i musi się znajdować bezpośrednio po wartości pozycji (background-position), np.: "left top / contain". Nie można podać rozmiarów tła bez określenia pozycji, ale można samą pozycję bez rozmiarów. Jeżeli zostanie podana pozycja początkowa tła (background-origin), a pominiemy przycinanie tła (background-clip), przyjmie ono taką samą wartość. Nie można podać przycinania tła bez określenia pozycji początkowej...
- Menu w CSS / Poziome menu
...przycisków. Czcionki Tekst Tło Marginesy Obramowanie ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul { position: absolute; } ul li { float: left; border-width: 0 1px 1px 1px; border-style: solid; border-color: transparent #25b #25b #9ce; } ul a:link, ul a:visited { text-decoration: none; display: block; width: 95px; text-align: center; padding: 5px 0; font-weight: bold; background-color: #27c; color: #def; border-top: 10px solid...
- Oprawa graficzna / Zamiennik obrazkowy
...ponieważ użytkownik ich nie widzi, nie wie w co może kliknąć. <div><span></span>Zamiennik obrazkowy</div> div { width: 200px; height: 50px; position: relative; } div span { background-image: url(obrazek.gif); display: block; width: 100%; height: 100%; position: absolute; } Koncepcja tego zamiennika obrazkowego polega na pozostawieniu tekstu bez zmian, a jedynie przykryciu go obrazkiem. Dzięki temu po wyłączeniu grafiki obrazek po prostu zniknie i odkryje tekst. Niestety sposób...
- Oprawa graficzna / "Duszki" CSS
...bfb url(obrazek.gif) no-repeat -16px -25px; color: #365; border-left: 1px solid #797;} ul a:hover { background-color: #797; background-position: -16px -49px; color: #eff; } Rezultat: Czcionki Tekst Tło Marginesy Obramowanie Na komentarz zasługują ujemne wartości położenia tła obrazkowego "background-position: -16px -25px". Jak wiadomo, pierwsza z wartości określa poziomą odległość obrazka tła od lewej krawędzi elementu, a druga - pionową odległość od górnej krawędzi...