ЧаВО

s0rr0w · April 6, 2009

Отступ у картинки

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <title>Отступ у картинки</title>
</head>
<body>

    <div style="background: #ccc"><img src="http://forum.htmlbook.ru/style_images/elegance/logo4.gif" alt=""></div>

</body>
</html>

Решения:

1. img { display: block }

2. img { vertical-align: bottom }

3. div { line-height: 0; }

Причина:

Картинка выравнивается по базовой линии текста. Это "струна", на которую одеваются буквы. Хвостик буквы "р" опущен ниже буквы "о", а картинка равняется наравне с буквами о, и, а, и т.д.

Кусочек фона под картинкой - место для букв по типу р, у, ф, некоторые части которых опущены ниже базовой линии.

Edited March 29, 2011 by Great Rash

s0rr0w · April 6, 2009

Параграфы в ячейках таблицы

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <title>Параграфы в ячейках таблицы</title>
</head>
<body>

    <table style="border: 1px solid red;">
        <tr>
            <td>
                <p style="background: #ccc;">Text</p>
            </td>
        </tr>
    </table>

</body>
</html>

Решения

1. Если отступы нужны, то указываем p { margin: 1em 0px }

2. Если не нужны, то указываем p { margin: 0px }

Причина

Так исторически сложилось. Тяжелое детство.

s0rr0w · April 8, 2009

Картинка в ссылке

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Картинка в ссылке</title>
</head>
<body>
	<a href="#"><img src="http://forum.htmlbook.ru/style_images/elegance/logo4.gif" alt=""></a>
</body>
</html>

Решения

1. img { border: none }

Причина

Наследие былых времен. Исторически сложилось.

s0rr0w · April 12, 2009

Плавающая картинка в блоке

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Плавающая картинка в блоке</title>
</head>
<body>
	<div style="border: 1px solid red;">
		<img src="http://forum.htmlbook.ru/style_images/elegance/logo4.gif" alt="" style="float: left">
		Test
	</div>
</body>
</html>

Нужно получить:

Картинка должна расширять бордюр.

Решение:

div { overflow: hidden }

Для IE6 - zoom:1, в Conditional comments

Причина:

Плавающий блок не принадлежит общему потоку элементов в странице. Overflow: hidden дает указание браузеру не выпускать плавающий блок за свои пределы.

Edited April 13, 2009 by Justnewone

s0rr0w · May 14, 2009

Защита картинки от копирования

Нужно получить:

Картинку нельзя скопировать с сайта и сохранить на носитель пользователя

Решение:

1. Нет. Все что видим на экране, можно скопировать через "Print Screen" в буфер обмена.

2. Не выкладывать картинку в интернет

Стили для SELECT, CHECKBOX, RADIO, кнопки BROWSE у FILE

Нужно получить:

Стилизировать через CSS все эти элементы.

Решение:

Создать эмуляцию всех этих элементов средствами HTML.

Причина:

Стили этих элементов берутся из операционной системы пользователя, и стилизация этих элементов через CSS очень сильно ограничена.

s0rr0w · September 22, 2009

Базовый путь для картинок, файлов и прочего

Нужно получить:

Для картинок, файлов и прочего, указать один раз путь, где они лежат, и потом использовать просто название картинки

Решение:

1. Использовать тег <BASE>

2. Использовать серверные скрипты.

s0rr0w · July 8, 2010

CSS селекторы с *

Проблема:

IE может существенно тормозить и "залипать" при больших объемах кода.

Решение:

1. Не использовать такие селекторы вообще

2. Использовать классы или перечисление тегов.

Почему так происходит:

IE пытается актуализировать отображение страницы при пролистывании, применяя стили к элементам. Звездочка означает, что применять нужно ко всем элементам, соответственно вся страница будет попадать под действие этого селектора, а значит, что чем больше тегов, тем существеннее будут задержки.

Great Rash · November 30, 2010

Плавающие блоки разной высоты

Проблема:

При построении галерей или списка товаров в интернет-магазине (или чего-то подобного) если у плавающих элементов разная высота или высота высчитывается по контенту, то, при уменьшении окна браузера, блоки выстраиваются неравномерно. Лучше всего это видно из иллюстрации:

Решение:

1. Задать всем блокам одинаковую минимальную высоту равную самому высокому блоку.

2. Не использовать float-блоки, а использовать inline-блоки. Подробнее об этом в этой статье.

Или её перевод inline-block

Great Rash · April 27, 2011

Дефолтный текст в инпуте

Проблема:

Необходимо сделать так чтоб по дефолту в <input> показывался некий текст, а когда элемент получает фокус нужно чтоб текст пропадал.

Решение:

Использовать новый атрибут тега <input> - placeholder, который был добавлен в HTML5.


<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>placeholder</title>
</head>
<body>

    <form action="" method="post">
        <fieldset>
            <input type="text" placeholder="Default value" />
        </fieldset>
    </form>

</body>
</html>

Это решение будет работать только в последних версиях браузеров!

Кроссбраузерное решение с поддержкой старых браузеров:

Если нужна поддержка старых браузеров, то наилучшим выходом будет задействовать JavaScript, используя DOM-свойство элемента <input> defaultValue.


<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>placeholder</title>

    <script type="text/javascript">
        function setClear(elem) {
            if (elem.value == elem.defaultValue) {
                elem.value = '';
            } 
        }

        function setDefault(elem) {
            if (!elem.value) {
                elem.value = elem.defaultValue;
            } 
        }
    </script>
</head>
<body>

    <form action="" method="post">
        <fieldset>
            <input type="text" value="Default value" onfocus="setClear(this);" onblur="setDefault(this);" />
        </fieldset>
    </form>

</body>
</html>

Sign In

ЧаВО

Question

s0rr0w

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

s0rr0w

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Обсуждения

Forums

Important Information