hidden - Kurs HTML i CSS
HTML5 / Element ukryty <... hidden>(interpretuje: Internet Explorer 11, Firefox 4, Opera 11.5, Chrome 6) Wersja podstawowa: <element hidden>...</element> Wersja rozszerzona: <element hidden="stan">...</element> element Dowolny znacznik HTML 4.01 lub HTML5 stan Można podać jedną z poniższych wartości: hidden - element nie zostanie wyświetlony na stronie (to samo co użycie hidden jako atrybut logiczny - tzn. bez podania wartości). until-found - element nie zostanie wyświetlony na stronie, chyba że użytkownik wyszuka...
- Formularze HTML / Ukryte dane <input "hidden">
<form action="..."> <input type="hidden" name="nazwa" value="wartość"> </form> Polecenie takie tworzy ukryte pole w formularzu. Nie jest ono widoczne ani dostępne dla użytkownika, ale jego wartość (value="wartość") jest przesyłana wraz z formularzem. Może ono służyć np. dla podania informacji o numerze wersji ankiety, dacie jej ostatniej aktualizacji, adresu strony, z której została wysłana, opisu całego formularza lub też poszczególnych jego pól. Dla zaawansowanych Ukryte dane są często...
Szablon strony na DIV-ach / Stały szablon...auto; margin-right: auto; text-align: left; } #NAGLOWEK { background-color: #888; } #MENU { width: 150px; float: left; overflow: hidden; background-color: #ccc; } #TRESC { width: 630px; float: left; overflow: hidden; background-color: #fff; } #STOPKA { clear: both; width: 100%; background-color: #888; } Wyjaśnienie: Pierwszą regułą stylów w arkuszu CSS jest ustalenie domyślnego koloru tła oraz kolor tekstu w całym dokumencie. Zawsze trzeba o tym pamiętać...
- Rozmiary CSS / Przeciąganie {resize}
...np. kolumna menu może w takiej sytuacji opaść na dół (pod treść). Można się przed tym zabezpieczyć blokując przepełnienie elementu ("overflow: hidden"). Co jednak, jeśli czytelnik mimo wszystko będzie chciał zobaczyć przyciętą treść? Można mu to umożliwić, poprzez udostępnienie specjalnego uchwytu do przeciągania narożnika elementu (zwykle prawego-dolnego), aby mógł go swobodnie powiększyć i odczytać ukrytą treść. Taki przeciągany narożnik jest domyślnie dostępny w przeglądarce Safari i...
- Szablon strony na DIV-ach / Płynny szablon
...fff; color: #000; margin: 0; padding: 0; } #NAGLOWEK { background-color: #888; } #MENU { width: 150px; float: left; overflow: hidden; position: relative; background-color: #ccc; } #TRESC { margin-left: 150px; background-color: #fff; } #STOPKA { clear: both; background-color: #888; } Wyjaśnienie: Ustalamy kolor tła oraz tekstu dla całej strony oraz usuwamy marginesy, aby mieć większy obszar dostępny na nasz szablon. Ustalamy stałą szerokość kolumny menu...
Wyszukiwarka / Możliwość wyboru...Światowy/Polski Internet Lista rozwijalna <form action="https://www.google.pl/search" method="get"> <input type="text" name="q"> <input type="hidden" name="ie" value="utf-8"> <select name="lr"> <option value="">Na świecie</option> <option value="lang_pl">W Polsce</option> </select> <input type="submit" value="Szukaj"> </form> Przykład Na świecie W Polsce Pole opcji <form action="https://www.google.pl/search" method="get"> <input type="text" name="q"> <input type="hidden...
- Pozycjonowanie CSS / Widzialność {visibility}
...dowolny znacznik [zobacz: Wstawianie stylów]. Natomiast jako "typ" należy podać: visible - element będzie widoczny na ekranie (domyślnie) hidden - element zostanie ukryty, a w jego miejsce pojawi się pusta przestrzeń o takich samych rozmiarach jak element (gdyby był widoczny) collapse - jeżeli użyte dla wierszy (<tr>...</tr>), grup wierszy (<tbody>...</tbody>), kolumn (<col>) lub grup kolumn (<colgroup>...</colgroup>) tabeli, ukrywa całą zawartość wiersza (wierszy) bądź kolumny...
- Rozmiary CSS / Przepełnienie {overflow}
...albo zastępowany [zobacz: Wstawianie stylów]. Jako "sposób" należy podać: visible - pokazanie całej zawartości bez względu na rozmiary (domyślnie) hidden - ukrycie nadmiaru scroll - suwaki do przewijania auto - pokazanie suwaków jeśli to konieczne Według CSS 2.1 polecenie można również zastosować do komórek tabeli. Określa co zrobić, gdy zawartość elementu nie mieści się w rozmiarach podanych przez width oraz height. Możliwe jest ukrycie nadmiarowej zawartość, pokazanie wszystkiego...
- Szablon strony na DIV-ach / Responsywny szablon
...STOPKA { background-color: #888; } @media only all and (min-width: 800px) { #MENU { width: 150px; float: left; overflow: hidden; position: relative; } #TRESC { margin-left: 150px; } #STOPKA { clear: both; } } @media only all and (min-width: 1280px) { html, body { text-align: center; } #top { width: 1260px; margin-left: auto; margin-right: auto; text-align: left; } #MENU { width: 300px; } #TRESC...
- Rozmiary CSS / Przepełnienie tekstu {text-overflow}
...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ł przycięty - zwłaszcza jeśli litery ułożą się w taki sposób, że żaden wyraz nie zostanie ucięty w środku. W takiej sytuacji znacznie lepiej by było wstawić na końcu wiersza wielokropek, który pozwoli czytelnikowi uniknąć nieporozumień...