padding - Kurs HTML i CSS
Galeria zdjęć HTML / Skrypt galerii zdjęć...100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }; var buttonStyle = { border: 0, padding: 0, lineHeight: 1, color: '#000', background: 'rgba(255, 255, 255, 0.5)', cursor: 'pointer' }; var navigationStyle = { fontSize: '50px', width: '75px', height: '75px', borderRadius: '50%', position: 'absolute', fontWeight: 'bold' }; var style = { container: { position: 'fixed', zIndex...
- Menu drzewiaste / Skrypt menu drzewiastego
...Aby uzyskać menu drzewiaste, utwórz plik tree.css w tym samym katalogu co strona i zapisz w nim: ul.tree { display: block; margin-left: 0; padding-left: 0; } ul.tree ul { display: block; margin-left: 0; padding-left: 0; margin-top: 0; 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...
Obramowanie CSS / Obramowanie obrazkowe {border-image-source}...<div class="ramka_zawartosc"> ... </div> </div> </div> ...oraz CSS: .ramka { background: url(obramowanie.gif) no-repeat top; padding-top: 12px; width: 200px; } .ramka_pojemnik { background: url(obramowanie2.gif) no-repeat bottom; padding-bottom: 12px; } .ramka_zawartosc { background: #92C892 url(obramowanie3.gif) repeat-y center; padding: 0 12px; color: #031; } Uzyskany efekt: To jest przykład tradycyjnie wykonanego "obramowania" obrazkowego. Wymaga...
- Tło CSS / Przycinanie tła {background-clip}
...border-box - tło wyświetli się pod obramowaniem, marginesem wewnętrznym i właściwą zawartością elementu (domyślnie) [Zobacz: Model pudełkowy] padding-box - tło wyświetli się pod marginesem wewnętrznych i właściwą zawartością elementu content-box - tło wyświetli się tylko pod właściwą zawartością elementu Możliwe jest również określenie kilku wartości przycinania - kiedy wstawiamy w tle więcej niż jeden obrazek: selektor { background-clip: przycinanie obrazka 1, przycinanie obrazka...
- Tło CSS / Pozycja początkowa tła obrazkowego {background-origin}
...Natomiast jako "początek" należy wpisać: border-box - pozycja tła będzie liczona względem krawędzi obramowania [Zobacz: Model pudełkowy] padding-box - pozycja tła będzie liczona względem krawędzi marginesu wewnętrznego (domyślnie) content-box - pozycja tła będzie liczona względem krawędzi właściwej zawartości elementu Zgodnie z komputerowym układem współrzędnych punkt zerowy znajduje się zawsze w lewym-górnym narożniku. W przypadku modelu pudełkowego możemy mieć jednak aż trzy...
- Marginesy CSS / Model pudełkowy CSS
...w kontekście Kaskadowych Arkuszy Stylów (CSS), w którym każdy element na stronie jest traktowany jako "pudełko" składające się z treści, marginesów, paddingu i obramowania. Właściwości CSS, takie jak width, height, margin, padding oraz border, wpływają na wymiary i układ tych pudełek, co pozwala na precyzyjne pozycjonowanie i stylizację elementów na stronie. Co to jest model blokowy? Model blokowy odnosi się do sposobu wyświetlania elementów w HTML i CSS, gdzie elementy blokowe (np...
- Szablon strony na DIV-ach / Responsywny szablon
...responsywny korzystający z niezmiennego kodu HTML przedstawionego na wstępie. html, body { background-color: #fff; color: #000; margin: 0; padding: 0; } #NAGLOWEK { background-color: #888; } #MENU { background-color: #ccc; } #TRESC { 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...
- Marginesy CSS / Wymiarowanie pudełka {box-sizing}
...czego służy "box-sizing"? Właściwość CSS box-sizing pozwala kontrolować sposób obliczania całkowitego rozmiaru elementu, uwzględniając marginesy, padding i obramowanie. Dzięki temu można precyzyjnie zarządzać wymiarami elementów w modelu pudełkowym. Domyślnie wartość box-sizing to content-box, gdzie szerokość i wysokość elementu obejmują tylko treść. Co to jest "box-sizing: border-box"? "box-sizing: border-box" to wartość właściwości CSS box-sizing, która definiuje, że szerokość i...
- Rozmiary CSS / Wysokość i marginesy automatyczne
...punkcie 7 podrozdziału: Szerokość i marginesy automatyczne, tzn. muszą spełniać następujące równanie: 'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = wysokość bloku obejmującego 5. Elementy pozycjonowane absolutnie, zastępowane Sytuacja jest podobna jak w poprzednim punkcie za wyjątkiem tego, że element posiada wewnętrzną wysokość (zobacz punkt 8 podrozdziału: Szerokość i marginesy automatyczne).
- Wykazy CSS / Odstęp wyróżnika wykazu {marker-offset}
...marker-offset przez zespół reguł CSS interpretowanych praktycznie wszędzie: ul, li { list-style-type: none; display: block; margin: 0; padding: 0; } ul li { background: url(marker.gif) no-repeat left top; padding-left: 20px; } Pierwsza z reguł stylów powyżej usuwa domyślne formatowanie wykazu oraz jego punktów. Trzeba tutaj nadmienić, że z uwagi na różnice w interpretacji nie wszystkie z wymienionych poleceń formatujących w tej deklaracji jest wymagana we wszystkich...