wstawianie strony - Kurs HTML i CSS
Obramowanie CSS / Nawis obramowania obrazkowego {border-image-outset}...marginesu będzie niewystarczająca, grafika z nawisu obramowania może nawet wejść pod zawartość sąsiedniego elementu lub schować się poza granicami strony. Dlatego ustalając nawis obramowania obrazkowego zawsze warto jednocześnie zadbać o nadanie odpowiedniej wartości marginesu. Jeżeli "border-image-slice: 124", to wartość nawisu obramowania obrazkowego można zilustrować następująco: Źródło: CSS Backgrounds and Borders Module Level 3 Przykład {border-image-outset} border-image-source...
- Rozmiary CSS / Przepełnienie tekstu {text-overflow}
...taki tekst i tak wyjdzie poza obręb elementu. Oczywiście nie będzie to wyglądało zbyt estetycznie, a czasem może nawet zupełnie popsuć układ całej strony. Ponieważ często nie wiadomo z góry, jak długi może być tekst na stronie - bo powstanie on dopiero później - dlatego aby zabezpieczyć się na taką okoliczność, zwykle ukrywa się nadmiarową zawartość przy pomocy stylu "overflow: hidden" albo "overflow: auto". Kłopot w tym, że wtedy użytkownik może się w ogóle nie zorientować, że tekst został...
- Pozycjonowanie CSS / Pozycja ustalona {position: fixed}
...obliczana względem krawędzi okna przeglądarki (obszaru w którym znajduje się strona). Dodatkowo element taki jest nieruchomy podczas przewijania strony, przez co jest on przez cały czas widoczny na ekranie, dokładnie w tym samym miejscu. Daje to zbliżony efekt, jak nieruchome pojedyncze tło. Przykład {position: fixed} Przykład
- Pozycjonowanie CSS / Pozycja relatywna {position: relative}
...się wcześniej coś innego (tekst, grafika itp.), będzie to przykryte przez ten element. Należy przy tym pamiętać, że często ustawienie elementów strony zależy od rozdzielczości ekranu i rozmiarów okna przeglądarki! Przykład {position: relative} Szary prostokąt poniżej, który jest częściowo przykryty, przedstawia położenie spoczynkowe obrazka, poddanego pozycjonowaniu: position: relative; left: 50px; top: 45px. Dlatego obrazek ten jest oddalony od lewej krawędzi swojego położenia...
- Drukowanie CSS / Blokada przełamania strony {page-break-inside}
...że będzie zbyt duży, aby się na niej zmieścić). Jest to przydatne, jeśli nie chcemy, aby np. wykaz albo tabela zostały przedzielone pomiędzy dwie strony. W takim przypadku lepiej żeby drukarka przełamała stronę trochę wcześniej, a element zostanie przeniesiony na następną kartkę. Przykład {page-break-inside} Jeśli to możliwe, drukuj wszystkie tabele na jednej kartce papieru: table { page-break-inside: avoid; }
- Układ wielokolumnowy CSS / Szerokość kolumny {column-width}
...aby pomieścić całą zawartość elementu. Liczba kolumn nie będzie jednak większa niż zdoła się zmieścić w założonej szerokości elementu albo strony. Należy pamiętać, że faktyczna wyświetlona szerokość kolumny może być większa niż podana, ponieważ przeglądarka stara się wypełnić treścią całą szerokość wielokolumnowego bloku. Na przykład podając "column-width: 45px; width: 100px", aby kolumny zajęły całą poziomą przestrzeń elementu, zostaną dopasowane do szerokości 50px. W szczególnym...
AutoIFRAME / Skrypt AutoIFRAME...wysokość i tak się automatycznie dopasuje w drugim kroku. Jeśli chcemy zrezygnować z podawania marginesu, należy po prostu zupełnie pominąć wstawianie tej części kodu na podstronach. Ostatnim krokiem będzie stworzenie nowego pliku autoiframe.js (w tym samym katalogu co podstrony) i zapisanie w nim: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ // Domyślny identyfikator IFRAME...