width - Kurs HTML i CSS
Galeria zdjęć HTML / Skrypt galerii zdjęć...break; } }; GalleryView.prototype._createStyle = function() { var margin = '10px'; var overlayStyle = { left: 0, top: 0, width: '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...
- Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego
...nie odpowiada nam podstawowy wygląd menu, można go zmienić wykorzystując polecenia CSS. W tym celu w pliku menu.css należy wkleić np.: #menu0 { width: 200px; margin: 10px; padding: 0; } #menu0 dt { background-color: #888; color: #fff; font-weight: bold; text-align: center; cursor: pointer; margin: 10px 0 0 0; padding: 2px; } #menu0 dd { background-color: #eee; color: #000; border-width: 0 1px 1px 1px; border-style: solid; border-color: #888; margin...
Oprawa graficzna / Zamiennik obrazkowy...pomysł i stąd wzięła się nazwa metody, którą zaproponował. <div><span>Zamiennik obrazkowy</span></div> div { background-image: url(obrazek.gif); width: 200px; height: 50px; } div span { display: none; } Wyjaśnienie: Najpierw pod zewnętrzny element podstawiamy obrazek tła Musimy ustalić rozmiary bloku na identycznie jak wymiary grafiki - inaczej otrzymalibyśmy element w szerokości całej strony i wysokości zależnej od zawartego w nim tekstu Na koniec po prostu ukrywamy tekst wpisany...
- Komendy CSS3 / Układ wielokolumnowy CSS
...CSS Multi-column Layout Module Level 1 Spis treści column-count column-fill column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns column-count Liczba kolumn Wartość auto | <integer [1,∞]> Inicjalizacja auto Zastosowanie elementy blokowe z wyjątkiem tabel Dziedziczenie nie Procenty nie column-fill Wypełnienie kolumn Wartość auto | balance | balance-all Inicjalizacja balance Zastosowanie kontenery układu...
- Tabele CSS / Rozplanowanie tabeli {table-layout}
...auto komórka1 Szerokość komórek zależy od zawartości komórka3 komórka4 komórka5 komórka6 komórka7 komórka8 komórka9 table-layout: auto; width: 100% komórka1 Szerokość komórek zależy od zawartości komórka3 komórka4 komórka5 komórka6 komórka7 komórka8 komórka9 table-layout: fixed; width: 100% komórka1 Wszystkie kolumny tej tabeli mają jednakową szerokość komórka3 komórka4 komórka5 komórka6 komórka7 komórka8 komórka9 table-layout: fixed; width: 100...
Multimedia HTML / Obrazek HTML <img>Spis treści <img> Obrazek <img> Obrazek o określonych rozmiarach <img width height> Formaty graficzne Animowany banner Obrazek <img> <img src="ścieżka dostępu" alt="Tekst alternatywny"> gdzie jako "ścieżka dostępu" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek. Natomiast w miejsce "Tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony (np. jeśli użytkownik wyłączy wyświetlanie grafiki w swojej...
- Widżety HTML / Ramki lokalne <iframe>
pływające (ang. inline) Spis treści <iframe> Ramki lokalne <iframe> Rozmiar ramki <iframe width height> Nazwa ramki <iframe name> Ramki lokalne <iframe> <iframe src="lokalizacja"> <a href="lokalizacja">Tekst alternatywny</a> </iframe> gdzie jako "lokalizacja" należy podać adres strony albo lokalizację na dysku, gdzie znajduje się strona, która na ma zostać wczytana do ramki. Natomiast "Tekst alternatywny" wyświetli się tylko w przeglądarkach, które nie obsługują ramek lokalnych...
- Obramowanie CSS / Atrybuty mieszane obramowania obrazkowego {border-image}
...się składać z trzech części: źródła obcięcia / szerokości / nawisu - możliwe są kombinacje: border-image-slice border-image-slice / border-image-width border-image-slice / border-image-width / border-image-outset powtarzania Jedna lub więcej z tych części musi się pojawić na liście wartości atrybutów. Na przykład: div { border-image: url(punkt.gif) 10 } /* border-image-source: url(punkt.gif); border-image-slice: 10 */ div { border-image: url(punkt.gif) 10 / 10px }...
- Menu w CSS / Poziome menu
...block; list-style: none; margin: 0; padding: 0; } ul li { float: left; } ul a:link, ul a:visited { text-decoration: none; display: block; width: 80px; text-align: center; background-color: #ccc; color: #000; border: 2px outset #ccc; padding: 5px; } ul a:hover { border-style: inset; padding: 7px 3px 3px 7px; } Odnośniki zostały wyświetlone blokowo, aby można było ustalić jednakową szerokość wszystkich przycisków. Czcionki Tekst Tło Marginesy Obramowanie ul, ul li...
- Nagłówek i treść HTML / Skalowanie strony <meta "viewport">
...gdzie jako "parametr1=wartość1, parametr2=wartość2..." należy podać rozdzieloną przecinkami listę parametrów wraz z przypisanymi im wartościami: width Określa początkową szerokość obszaru wyświetlania przeglądarki. Może być określona bezpośrednio w pikselach albo za pomocą specjalnego słowa kluczowego device-width, które oznacza pełną szerokość obszaru wyświetlania. height Określa początkową wysokość obszaru wyświetlania przeglądarki. Może być określona bezpośrednio w pikselach albo za...