Сен

Думай о тех, кто заходит на твой сайт

Я вот не подумал и эх, целые сутки одна из картинок на одном моём сайте «прыгала» в зависимости от разрешения экрана монитора посетителей. А всё дело в маленькой ошибке при позиционировании, которую исправить — пара пустяков. Для того, чтобы вы не попадали в подобные ситуации и легко могли управлять мелкими элементами дизайна сайта, я расскажу обо всём подробно.

Позиционирование (свойство position) для блоков div задаётся в файлах CSS и может принимать следующие значения:

absolute — указание позиции (top, bottom, left, right) идёт относительно левого верхнего угла окна браузера или родительского элемента;
fixed — аналогично, однако блок не меняет своего положения при прокрутки страницы;
relative — блок остаётся на своём месте, но может быть сдвинут указанием дополнительных параметров (top, bottom, left, right);
inherit — блок наследует родительские настройки.

Пару слов о relative. Если вы указали данный параметр для родительского элемента, то позиционирование вложенного div можете указать как absolute. Тогда в случае изменения разрешения экрана или использовании разных браузеров блок не должен «съезжать». Именно это я и забыл сделать. Таким образом, ваш код в HTML и CSS-файлах будет иметь примерно такой вид:

#roditelskiblok {
position: relative;}

#prostoblok {
position: absolute;
top: px;
left: px;
}

<div id="roditelskiblok"><div id="prostoblok"></div></div>

Как видите, всё просто и понятно. Однако такая маленькая ошибка может серьёзно повлиять на восприятие сайта посетителями. Ну, и конечно, нельзя, НИ В КОЕМ СЛУЧАЕ НЕЛЬЗЯ забывать просматривать все изменения в разных браузерах и расширениях экрана, даже если очень не хочется!

Удачи, пока.

А вам нравится мой блог?

Всего 8 коммент.

Artemida 10.09.2010 в 12:41
Вы очень важную тему подняли. Спасибо вам. Но вот у меня вопрос: вы не подскажете, как сделать так, чтобы картинки в посте становились, так как я в визуальном редакторе их ставлю. А то попалась мне тема, всем хороша, но картинки только по левому краю становятся. Очень не красиво порой. Буду рада совету
Matt 10.09.2010 в 17:34
Попробуйте средствами HTML или в файлах стилей исправьте выравнивание для того блока, в который помещаете картинку.
Aektann 11.09.2010 в 20:52
Я как раз изучать всё это тоже начал
bad 11.09.2010 в 23:05
«НИ В КОЕМ СЛУЧАЕ НЕЛЬЗЯ забывать просматривать все изменения в разных браузерах и расширениях экрана» .. в принципе верно
я например забил болт на IE6.. но тем не менее проверяю и в нем, другое дело что если что-то поехало на страницах, исправляю очень редко
ольга 12.09.2010 в 16:05
Может цикл статей на эту тему напишите? Уж очень интересно лично для меня, думаю для многих тоже!
Working 13.09.2010 в 14:51
Спасибо за полезную статью, а то таже проблема с картинками. Что только не пробовал.
Оксана 14.09.2010 в 17:08
Кроссбраузерность — это вообще беда для всех верстальщиков, поэтому вы правильно акцентировали внимание на том, что прежде, чем выдавать что то людям, сайт как минимум нужно прогнать по всем браузерам и поправить где нужно с помощью хаков.
TerNovosti 22.09.2010 в 00:59
Интересно, но для не-программистов проще задавать эти свойства используя WYSIWYG редактор, нп Live Writer. Как Вы считаете?