kolumna - Kurs HTML i CSS
Dobre praktyki / Przykazania webmastera...aby użytkownik szukał ich gdzieś w treści obszernego artykułu. Dobre miejsce na nawigację to nagłówek serwisu (poziome menu) oraz lewa lub prawa kolumna (pionowe menu lub menu z nagłówkami). Czasami w nagłówku umieszcza się powtórzoną nawigację, która zbiera najważniejsze odnośniki z całego serwisu. Podobnie coraz częściej powtórzona nawigacja pojawia się w stopce serwisu, ale w odróżnieniu od linków nagłówkowych, może zawierać znacznie więcej odnośników. Oprócz tego stopka jest dobrym...
- Komendy CSS3 / Układ siatki CSS
Źródło: CSS Grid Layout Module Level 1 Spis treści grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-start grid-row grid-row-end grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows grid Atrybuty mieszane układu siatki Wartość <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>...
Komendy HTML 4.01 / Wykaz atrybutów...archiwów codetype OBJECT Typ zawartości dla kodu color BASEFONT, FONT Kolor tekstu cols FRAMESET Lista długości, domyślnie: 100% (1 kolumna) cols TEXTAREA (wymagany) Liczba kolumn w polu komentarza colspan TD, TH Liczba połączonych komórek w kolumnie compact DIR, DL, MENU, OL, UL Redukuje odstępy pomiędzy pozycjami content META (wymagany) Związana informacja coords A Do użytku z mapą odnośników klienta coords AREA Lista długości oddzielona...
- Szablon strony na DIV-ach / Responsywny szablon
...zwykle znajdują się tam tylko poboczne treści, które w takiej sytuacji mogłyby zaciemniać odbiór głównej treści. Oczywiście jeśli na Twojej stronie kolumna z dodatkowymi informacjami zawiera istotne treści, które nawet na smartfornach nie powinny zostać pominięte, nie stosuj deklaracji "display: none".
- Komendy HTML 4.01 / Wykaz elementów
Element Znacznik otwierający/ zamykający Wyświetlanie Opis A wymag/wymag w linii Kotwica ABBR wymag/wymag w linii Forma skrócona ACRONYM wymag/wymag w linii Akronim ADDRESS wymag/wymag w bloku Informacje o autorze APPLET wymag/wymag w linii Aplet AREA wymag/zabr Obszar w mapie odnośników klienta B wymag/wymag w linii Tekst pogrubiony BASE wymag/zabr Adres bazowy BASEFONT wymag/zabr w linii Czcionka bazowa BDO wymag/wymag...
- Rozmiary CSS / Przeciąganie {resize}
...elementu Zdarza się, że treść elementu nie mieści się w ustalonych dla niego wymiarach. Może to spowodować zaburzenie estetyki strony - 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...
- Układ wielokolumnowy CSS / Multi-column layout
...czasopisma przyzwyczaiły czytelników do układu wielokolumnowego. Tekst artykułów jest w nich ułożony w wielu wąskich, sąsiadujących ze sobą kolumnach. Dzięki temu zwykle staje się on łatwiejszy w czytaniu, gdyż przenosząc wzrok z końca jednej linijki na początek kolejnej, oko nie musi pokonywać długiej drogi. Wiele nowoczesnych serwisów internetowych również składa się z kilku kolumn, ale najczęściej inaczej niż w gazecie właściwa treść artykułu znajduje się w pojedynczej kolumnie, a...
- Układ wielokolumnowy CSS / Szerokość kolumny {column-width}
...45px; width: 100px", aby kolumny zajęły całą poziomą przestrzeń elementu, zostaną dopasowane do szerokości 50px. W szczególnym przypadku kolumna może być również węższa niż podano - jeżeli cały blok jest węższy, aby mógł pomieścić przynajmniej jedną kolumnę. W obecnej wersji specyfikacja CSS nie pozwala ustalać różnej szerokości kolumn tego samego elementu. Przykład {column-width} column-width: 100px; To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest...
- Pozycjonowanie CSS / Wyświetlanie {display}
...<tfoot>...</tfoot> table-row - wiersz tabeli: <tr>...</tr> table-column-group - grupa kolumn tabeli: <colgroup>...</colgroup> table-column - kolumna tabeli: <col> table-cell - komórka tabeli: <td>...</td>, <th>...</th> table-caption - tytuł (podpis) tabeli: <caption>...</caption> compact - analogicznie jak run-in (CSS 2, ale nie CSS 2.1) marker - wyróżnik wykazu (CSS 2, ale nie CSS 2.1) Polecenie to pozwala określić sposób, w jaki będzie wyświetlony na ekranie dany element. Jest...
- Pozycjonowanie CSS / Widzialność {visibility}
...na różnice pomiędzy działaniem "visibility: collapse" a "display: none". W pierwszym przypadku, mimo iż wiersz z szerszą komórką został ukryty, kolumna w której się znajdowała nie zmniejszyła swojej szerokości. W drugim przypadku rozplanowanie tabeli zostało wyznaczone na nowo, dlatego stała się ona węższa, gdyż dopasowała się do zawartości tylko widzialnych komórek. Podkreślenia wymaga również fakt, że przykładowa tabela z "visibility: collapse" nie powinna wyglądać tak samo jak...