How to put text below text in HTML? - Kurs HTML i CSS
Tryb Quirks / Co zmienia przejście z trybu Quirks do trybu zgodności ze standardami?... ... */. W trybie zgodności jeżeli deklaracja zawiera nierozpoznawaną wartość, zostaje pominięta w całości. Na przykład po podaniu: span { text-decoration: underline cross-out overline } tekst nie zostanie nawet podkreślony ani nadkreślony, ponieważ wartość cross-out jest nieprawidłowa. Natomiast starsze wersje Internet Explorera interpretowały deklarację do pierwszego nierozpoznanego składnika, tzn. w tym przypadku tekst zostałby pokreślony, ale nie nadkreślony. Miało to wpływ na...
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...
- HTML dla zielonych / Gotowiec HTML
...(zobacz: Ramy dokumentu). Brak podobnej linijki w nagłówku strony albo istniejące wpisy typu: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> są poważnym błędem, który spowoduje niepoprawne wyświetlanie polskich znaków w przeglądarce!
- Menu w CSS / Poziome menu
...Obramowanie ul, ul li { display: block; list-style: 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...
- Szablon strony na DIV-ach / Stały szablon
...Nagłówek szablonu Menu nawigacyjne Treść strony Stopka serwisu html, body { background-color: #fff; color: #000; margin: 0; padding: 0; text-align: center; } #top { width: 780px; margin-left: 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...
- 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ę...
- Oprawa graficzna / "Duszki" CSS
...200px; border-width: 1px; border-style: solid; border-color: #dfe #365 #365 #dfe; } ul a:link, ul a:visited { display: block; width: 169px; text-decoration: none; padding: 5px 10px 5px 20px; font-weight: bold; background: #bfb url(obrazek.gif) no-repeat -16px -25px; color: #365; border-left: 1px solid #797;} ul a:hover { background-color: #797; background-position: -16px -49px; color: #eff; } Rezultat: Czcionki Tekst Tło Marginesy Obramowanie Na komentarz zasługują...
- Oprawa graficzna / Zamiennik obrazkowy
...jest najrozsądniejszym rozwiązaniem. <div>Zamiennik obrazkowy</div> div { background-image: url(obrazek.gif); width: 200px; height: 50px; text-indent: -9999px; } Sztuczka polega na ustawienia ujemnego wcięcia - na tyle dużego, że tekst zostanie przesunięty w lewo całkiem poza krawędź ekranu. Wartość bezwzględna wcięcia nie może być zbyt mała, ponieważ inaczej posiadacze monitorów o dużej przekątnej ekranu mogliby zobaczyć część tekstu. Z uwagi na dużą wygodę, uniwersalność i...
- Dobre praktyki / CSS Zorientowane Obiektowo
...{ display: block; list-style: none; margin: 0; padding: 0; } .Menu li { float: left; margin-right: 1em; } .Menu a { color: blue; text-decoration: none; } Kompozycja Zwróćmy uwagę, że typowy artykuł może zawierać informacje o: autorze - np. z jego imieniem, nazwiskiem i zdjęciem źródle - nazwa, logo i odnośnik Każdy z tych elementów można traktować jako osobny obiekt (zmiana wyglądu informacji o autorze nie powinna wpływać na wygląd samej treści artykułu), z których...
- Dobre praktyki / Przykazania webmastera
...pomiędzy wyrazami Jeśli to zrobisz, nie będzie możliwości sterowania szerokością takich wcięć czy odstępów. Do ustalania wcięć używaj własności CSS text-indent, a do odstępów - margin albo padding. Nie nadużywaj znacznika div ani span Do stylizacji możesz przecież wykorzystać znaczniki semantyczne, które już znajdują się w kodzie źródłowym - wstaw jeden element div, będący pojemnikiem całego obiektu, a potem korzystaj z selektora potomka w celu wystylizowania elementów, które zawiera...