Recommended Posts

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

post-218-1239048113_thumb.png

Код:

<!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 by Great Rash

Share this post


Link to post
Share on other sites

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

post-218-1239049059_thumb.png

Код:

<!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 }

Причина

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

Share this post


Link to post
Share on other sites

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

post-218-1239220719_thumb.png

Код

<!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 }

Причина

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

Share this post


Link to post
Share on other sites

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

post-218-1239527809_thumb.png

Код:

<!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 by Justnewone

Share this post


Link to post
Share on other sites

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

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

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

Решение:

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

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

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

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

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

Решение:

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

Причина:

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

Share this post


Link to post
Share on other sites

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

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

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

Решение:

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

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

Share this post


Link to post
Share on other sites

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

Проблема:

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

Решение:

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

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

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

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

Share this post


Link to post
Share on other sites

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

Проблема:

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

float-broken.jpg

Решение:

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

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

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

Share this post


Link to post
Share on other sites

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

Проблема:

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

post-8922-0-89051900-1303889209_thumb.gi

Решение:

Использовать новый атрибут тега <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>

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

  • Member Statistics

    46,331
    Total Members
    3,128
    Most Online
    god
    Newest Member
    god
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.