align text - Kurs HTML i CSS
Aktualizacja / System newsów...poniższy kod i zapisać go w pliku z rozszerzeniem *.css - np. news.css: /* Tytuł: */ .news dt { font-size: 14px; /* rozmiar czcionki */ text-align: left; /* wyrównanie tekstu: left, right, center, justify */ padding: 5px; /* margines wewnątrz */ border-width: 1px; /* grubość obramowania */ border-style: solid; /* styl obramowania: solid, dashed, dotted, double, groove, ridge, inset, outset */ border-color: gray; /* kolor obramowania */ font-weight: bold; } .news dt, .news...
Menu w CSS / Poziome menu...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 { display: block...
Komendy HTML 4.01 / Wykaz atrybutów...A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA Znak klawisza dostępu action FORM (wymagany) Obsługa formularza po stronie serwera align APPLET, IFRAME, IMG, INPUT, OBJECT Pionowe lub poziome ustawienie align CAPTION Ustawienie nagłówka tabeli align COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR Ustawienie tekstu w grupach komórek w tabeli align DIV, H1, H2, H3, H4, H5, H6, P Ustawienie (wyrównanie) tekstu align HR Ustawienie poziomej linii align...
- Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego
...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: 0; padding: 1px 5px; } #menu0 dd.active { font-weight: bold; } W wyróżnionych miejscach wpisano zdefiniowany uprzednio...
- Menu w CSS / Menu z nagłówkami
...0; } dl { width: 200px; } dt { background-color: #ccc; color: #000; padding: 7px; font-weight: bold; font-size: larger; text-align: center; } dl a:link, dl a:visited { display: block; width: 186px; text-decoration: none; background-color: #ccc; color: #000; padding: 5px; border: 2px outset #ccc; } dl a:hover { border-style: inset; padding: 7px 3px 3px 7px; } CSS Czcionki Tekst Tło Marginesy Obramowanie dl, dt, dd { display: block...
- Rozmiary CSS / Szerokość i marginesy automatyczne
...Quirks interpretacja będzie zupełnie inna. Dla uzyskania analogicznego efektu również w trybie Quirks należy wpisać: <div style="width: 600px; text-align: center"> <div style="text-align: left; margin-left: auto; width: 400px; margin-right: auto">...</div> </div> Sposób ten jest przydatny np. do centrowania tabeli (względem elementu BODY stanowiącego blok obejmujący) zgodnie z zaleceniami CSS. <html> <head>...</head> <body style="text-align: center"> <table style="margin-left: auto...
- Szablon strony na DIV-ach / Responsywny szablon
...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 { width: 960px; float: left; overflow: hidden; margin-left: 0; } #STOPKA { width: 100%; } } Wyjaśnienie: Na początku powyższego arkusza stylów znajdują się...
- HTML dla zielonych / Wyśrodkowanie obrazka HTML <div "center", img src alt>
<div style="text-align: center"><img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny"></div> gdzie zamiast: "Tu podaj względną ścieżkę dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek, a w miejsce "Tu podaj tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony. Polecenie pozwala wyśrodkować obrazek, czyli ustawić go na środku ekranu. Dla...
- Formularze HTML / Ramy formularza HTML <form>
...HTML? Aby ustawić na środku ekranu całą zawartość formularza, można przypisać mu odpowiedni atrybut: <form action="..." method="post" style="text-align: center">...</form>.
- HTML5 / Napisy do filmów <track>
...sposobem jego wyświetlania. Ustawienia umieszcza się na końcu linijki podającej przedział czasu - np.: WEBVTT 00:00:01.000 --> 00:00:05.000 align:start vertical:rl Ten napis zostanie wyrównany do początku i ustawiony w pionie przy lewej krawędzi. Obsługiwane ustawienia: align - ustawienie w poziomie start - wyrównanie tekstu do lewej strony end - wyrównanie tekstu do prawej strony vertical - ustawienie w pionie (interpretuje: Chrome) rl - napis przy lewej krawędzi lr - napis...