block - Kurs HTML i CSS
Rozmiary CSS / Blok obejmujący CSSPozycja i rozmiar pudełka elementu są czasami obliczane względem pewnego prostokąta zwanego blokiem obejmującym (ang. "containing block"): Blok obejmujący w którym znajduje się element podstawowy (ang. "root") jest wyznaczany przez przeglądarkę (np. okno). Ten blok nazywany jest początkowym blokiem obejmującym. Dla innych elementów, które mają ustalone pozycjonowanie relatywne lub statyczne blok obejmujący jest tworzony przez najbliższy blok, komórkę tabeli lub inline-block będący przodkiem...
Tekst HTML / Indeks górny i dolny <sup, sub>...Aby ustawić indeks górny i dolny równo ponad sobą w jednej pionowej linii, można się posłużyć następującym kodem: A<span style="display: inline-block; line-height: 0.5"><sup style="display: block">1</sup><sub>2</sub></span>.
- Formularze HTML / Pole wyboru <input "checkbox">
...opcję wyboru: <input type="checkbox" name="nazwa" value="wartość" onclick="document.getElementById('identyfikator').style.display = this.checked ? 'block' : 'none'; this.form.elements['nazwa2'].disabled = this.form.elements['nazwa3'].disabled = !this.checked"> <div id="identyfikator" style="display: none"> <input type="text" name="nazwa2" disabled> <input type="text" name="nazwa3" disabled> </div> Przykład <input "checkbox" onclick> Po wybraniu tej opcji, zostaną wyświetlone dodatkowe...
- Ikony (symbole) / Akcje interfejsu użytkownika
...filtrów filter_list filter_list Usuń na zawsze delete_forever delete_forever Automatyczne odnowienie autorenew autorenew Klucz key key Zablokuj block block Synchronizuj sync sync Strzałka w dół arrow_downward arrow_downward Sortuj sort sort Dodaj pudełko add_box add_box Nowa strzałka wstecz iOS arrow_back_ios_new arrow_back_ios_new Alternatywny restart restart_alt restart_alt Realizacja zamówienia shopping_cart_checkout shopping_cart_checkout Otwórz menu menu_open menu_open...
- Oprawa graficzna / Zamiennik obrazkowy
...<div><span>Zamiennik obrazkowy</span></div> div { background-image: url(obrazek.gif); width: 200px; height: 50px; } div span { display: block; width: 0; height: 0; overflow: hidden; } Wady: Konieczny dodatkowy element (SPAN) Po wyłączeniu wyświetlania grafiki, w przeglądarce nie widać tekstu ani obrazka Przykład Zamiennik obrazkowy Phark Obie przedstawione wcześniej metody do poprawnego działania wymagają dodatkowego elementu. Nie zawsze jednak mamy możliwość modyfikacji...
Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego...i) { if (typeof i == 'undefined') { for (var i = 0; i < dt._dd.length; i++) { dt._dd[i].style.display = dt._displayed ? 'block' : 'none'; if (!dt._displayed) { for (var j = 0; j < dt._dd[i].getElementsByTagName('dt').length; j++) { dt._dd[i].getElementsByTagName('dt')[j]._displayed = false; display(dt._dd[i].getElementsByTagName('dt')[j]); } } } } else if (i < dt._dd.length) { var dir = wysun...
- Rozmiary CSS / Wysokość i marginesy automatyczne
Spis treści Wstęp Elementy inline, nie-zastępowane Elementy zastępowane: inline, blokowe, inline-block oraz z oblewaniem (float) Elementy nie-zastępowane: blokowe oraz z oblewaniem (float) Elementy pozycjonowane absolutnie, nie-zastępowane Elementy pozycjonowane absolutnie, zastępowane Wstęp Podrozdział ten opisuje analogiczne zagadnienie, jak Szerokość i marginesy automatyczne, tzn. specjalne zasady dopasowywania wysokości (height) oraz pionowych marginesów elementów (margin-top...
- Selektory pseudoelementów CSS / Pierwsza linia :first-line
selektor:first-line { cecha: wartość } Selektorem może być znacznik wyświetlany w bloku. CSS 2.1 dozwala zastosowanie dodatkowo do elementów inline-block, tytułów (podpisów) tabeli (<caption>...</caption>) oraz komórek tabeli (<td>...</td>). [Zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Polecenie raz zdefiniowane w arkuszu stylów, pozwala na nadanie określonych cech wszystkim...
- Komendy CSS 2 / display
WARTOŚĆ inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit OPIS Sposób wyświetlania elementu INICJALIZACJA inline ZASTOSOWANIE wszystkie elementy DZIEDZICZENIE nie PROCENTY nie MEDIA all
- Szablon strony na DIV-ach / Responsywny szablon
...and (min-width: 800px) { #MENU { width: 150px; float: left; overflow: hidden; position: relative; } #INFORMACJE { display: block; background-color: #ccc; width: 150px; float: right; overflow: hidden; position: relative; } #TRESC { margin-left: 150px; margin-right: 150px; } #STOPKA { clear: both; } } @media only all and (min-width: 1280px) { html, body { text-align: center; } #top { width: 1260px; margin-left...