wysokość - Kurs HTML i CSS
AutoIFRAME / Kilka ramek AutoIFRAMECzasami zachodzi potrzeba umieszczenia na jednej stronie kilku ramek <iframe>...</iframe>, których wysokość powinna się automatycznie dopasowywać do zawartości. Oczywiście dla każdej takiej ramki proces dostosowywania wysokości musi zachodzić niezależnie. Aby to zrobić, należy dla każdej takiej ramki należy ustawić odrębny identyfikator id="...". Na przykład tak mógłby wyglądać fragment strony głównej serwisu: <iframe src="..." name="..." id="autoiframe" width="100%" height="560">...</iframe>...
- Ochrona strony
...ikon, który w niektórych przeglądarkach mógł pojawiać się ponad dużymi zdjęciami po "najechaniu" myszką (zwykle oba wymiary grafiki - szerokość i wysokość - muszą wynosić co najmniej 200 pikseli), co umożliwiało m.in. wydruk lub zapisanie grafiki na dysku. Dla wszystkich zdjęć na stronie (wstaw w nagłówku dokumentu - <head>...</head> - poniższy kod): <meta http-equiv="Imagetoolbar" content="no"> Tylko dla wybranych zdjęć: <img src="zdjecie.jpg" alt="Tekst alternatywny" galleryimg="no">...
- Wykaz skryptów / Pozostałe skrypty
...zdjęć oraz blokada klawisza Print Screen (prosty zrzut ekranu). Migotanie tekstu Migający tekst, który działa nie tylko w Netscapie. Automatyczna wysokość ramki IFRAME Automatyczne dopasowanie wysokości ramki IFRAME do długości treści strony wczytanej do niej. Wyszukiwarka Wstawienie na własną stronę wyszukiwarki, która pozwala przeszukiwać cały Internet lub/i tylko Twój serwis. Indeks (skorowidz)/wyszukiwarka Automatyczny skorowidz tematyczny, pozwalający użytkownikowi błyskawicznie...
Rozmiary CSS / Przeciąganie {resize}...może to skutecznie uprzykrzyć życie użytkownikom. O ile czasami zmiana szerokości pola może zaburzyć układ strony, to wpływanie przez użytkownika na wysokość raczej nie powinno spowodować żadnych błędów. Zatem najczęściej lepszym rozwiązaniem będzie: textarea { resize: vertical } Przykład {resize} "resize: both; overflow: hidden"... "resize: both; overflow: hidden"... "resize: both; overflow: hidden"... "resize: both; overflow: hidden"... "resize: both; overflow: hidden"... "resize: both...
- Tło CSS / Rozmiary tła obrazkowego {background-size}
...przeskalowany względem obszaru pozycjonowania tła Podanie dwóch z powyższych wartości (np. "150px 100px") pozwala określić osobno szerokość i wysokość obrazka (skalowanie bez zachowania proporcji - rozciąganie grafiki). Aby przeskalować do wysokości, zachowując jego proporcje, jako szerokość należy podać wartość "auto" (np. "auto 100px"). Często zależy nam na wstawieniu w tle strony tylko jednego egzemplarza obrazka (bez jego powielania), ale w taki sposób aby idealnie dopasował się do...
- Układ wielokolumnowy CSS / Multi-column layout
...po jej prawej stronie. Po zmianie wielkości lub rodzaju czcionki, tekst w kolumnie tabeli ułoży się w zupełnie inny sposób - najprawdopodobniej wysokość przestrzeni zajmowanej przez tekst w kolumnach nie będzie identyczna. Na niewielkich ekranach - np. telefonów komórkowych - ustalona zbyt duża liczba kolumn w tabeli może sprawić, że będą one zdecydowanie zbyt wąskie. W arkuszu CSS dla urządzeń mobilnych nie można zmniejszyć liczby kolumn w wierszu tabeli. Na wydruku kolumna tabeli może...
- Układ elastyczny CSS / Przepływ elastyczny {flex-direction, flex-wrap, flex-flow}
...uwagę, że wszystkie elementy są identycznej wysokości: To jest blok nr 1 blok 2 blok 3 blok 4 blok 5 "flex-flow: row wrap" - zwróć uwagę, że wysokość bloków dopasowuje się automatycznie w każdym osobnym wierszu układu: To jest blok nr 1 blok 2 blok 3 blok 4 blok 5 flex-flow: row-reverse nowrap To jest blok nr 1 blok 2 blok 3 blok 4 blok 5 flex-flow: row-reverse wrap-reverse blok 1 blok 2 blok 3 blok 4 blok 5
- Układ elastyczny CSS / Wyrównanie wiersza {align-items, align-self}
...do obu krawędzi jednocześnie (domyślnie) Polecenie steruje wyrównaniem jednego wiersza wewnątrz kontenera elastycznego, kiedy mają one różną wysokość. Przykład {align-items} align-items: flex-start To jest blok nr 1 blok 2 blok 3 align-items: flex-end To jest blok nr 1 blok 2 blok 3 "align-items: center" - ten sposób pozwala wyśrodkować w pionie element, nawet jeżeli z góry nie wiemy, ile treści będzie się w nim znajdować: To jest blok nr 1 blok 2 blok 3...
- Układ elastyczny CSS / Kolejność {order}
...się w kodzie źródłowym przed kolumną menu. Mimo tego szerokość automatycznie dopasowuje się do okna przeglądarki. Dodatkowo warto zwrócić uwagę, że wysokość obu kolumn jest identyczna. Uzyskanie takiego efektu w tradycyjny sposób byłoby bardzo trudne i najczęściej wymagało pójścia na pewne kompromisy. <div id="top"> <div id="TRESC">Treść strony...</div> <div id="MENU">Menu nawigacyjne</div> </div> #top { display: flex; } #MENU { width: 150px; min-width: 150px; order: -1; }...
- Układ elastyczny CSS / Wyrównanie wierszy {align-content}
...do obu krawędzi jednocześnie (domyślnie) Polecenie steruje wyrównaniem wielu wierszy wewnątrz kontenera elastycznego, kiedy ich sumaryczna wysokość jest za mała, aby wypełnić całą dostępną przestrzeń. Przykład {align-content} align-content: flex-start blok 1 blok 2 blok 3 blok 4 blok 5 align-content: flex-end blok 1 blok 2 blok 3 blok 4 blok 5 align-content: center blok 1 blok 2 blok 3 blok 4 blok 5 align-content: space-between blok 1 blok 2 blok 3 blok...