position - Kurs HTML i CSS
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...
Menu drzewiaste / Skrypt menu drzewiastego...margin-bottom: 0; } ul.tree li { display: block; list-style-type: none; padding-left: 20px; background-image: url("document.gif"); background-position: left top; background-repeat: no-repeat; } ul.tree li.closed { background-image: url("closed.gif"); background-position: left top; background-repeat: no-repeat; } ul.tree li.opened { background-image: url("opened.gif"); background-position: left top; background-repeat: no-repeat; } ul.tree li a { font-size: 13px...
- 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...
- Menu rozwijane, otwierane, wysuwane / Łączenie opcji
...powyżej opcji można ze sobą łączyć, uzyskując w ten sposób dodatkowy efekt, np. następujące wywołanie skryptu: <script> new Menu('menu0', 'position: absolute', true, true, 0, 100, 0, 250); </script> spowoduje osadzenie wypozycjonowanego absolutnie menu otwieranego w wersji wysuwanej ze zmodyfikowanymi czasami rozwijania/zwijania oraz opóźnieniem przy otwieraniu i zamykaniu. Aby pominąć określenie pozycji, należy po prostu wpisać '' (dwa apostrofy). Aby pominąć ustalenie wersji...
- 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...
HTML5 / Okienko popover <... popover, button "button" popovertarget popovertargetaction, input "button" popovertarget popovertargetaction>...Domyślnie popover pojawia się nad zawartością strony, ale jego pozycję można dostosować za pomocą CSS. Używając właściwości CSS, takich jak position, top, left, bottom, right czy margin, możesz precyzyjnie określić, gdzie popover ma się pojawić względem elementu wyzwalającego. Na przykład jeśli znacznik z popoverem ma przypisany atrybut id="identyfikator", to w zewnętrznym arkuszu stylów możesz wstawić następujący kod: #identyfikator { position: fixed; top: auto; left: auto; bottom...
- 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
- 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...