В настоящее время прием заказов временно приостановлен. Приносим извинения за возможные неудобства.
Разработка и создание сайтов в Ростове-на-Дону

Разработка сайтов

Главное направление деятельности студии ArtWebMaster, это разработка и создание сайтов в Ростове-на-Дону.

Далее...
Создание компонентов Joomla и модулей

Компоненты и модули

Мы также занимаемся созданием компонентов, модулей и плагинов для CMS Joomla.

Далее...
Перенос сайтов на CMS Joomla

Перенос сайтов на Joomla

Ваш сайт статичный? Мы можем перенести его на CMS Joomla и Вы получите быстрый динамичный сайт.

Далее...
Поддержка и сопровождение сайтов

Сопровождение сайтов

Не хватает времени заниматься сайтом? Мы берем на себя работу по поддержке и сопровождению сайтов.

Далее...

Точное позиционирование картинки на веб-странице

В ряде случаев веб-мастера при создании сайтов или верстке веб-страниц и шаблонов сталкиваются с ситуацией, когда необходимо точно поместить картинку в нужном месте страницы так, чтобы совместить ее с изображением заднего фона. К примеру, мы имеем рисунок дизайна главной страницы сайта и на этом рисунке есть такой фрагмент:


Картинка дизайна

Фрагмент рисунка дизайна страницы.

Нам нужно «разрезать» этот рисунок на отдельные картинки и сделать его точную копию на странице создаваемого сайта. Внимательно присмотревшись к фрагменту дизайна, мы видим, что:

  1. Задний фон состоит из повторяющегося фрагмента, поэтому его можно вырезать отдельно и сделать фоном тега div или td.
  2. Логотип имеет сзади полупозрачную, плавно исчезающую тень, поэтому его нельзя вырезать ровно по краю, а придется захватить часть заднего фона.

В результате мы получим две картинки:

Картинка заднего плана Картинка дизайна логотипа
Картинка 1.
Задний фон.
Картинка 2.
Логотип с частью заднего фона.


Теперь нам необходимо поместить их на страницу сайта и совместить с точностью до пикселя. Есть масса способов как это сделать:

  1. Сделать таблицу и порезав ее на ячейки, пытаться совместить края картинки 2 с фоном;
  2. С помощью однопиксельного прозрачного gif файла можно отодвинуть картинку 2 вниз и вправо;
  3. Вместо прозрачного gif файла можно использовать поля образованные с помощью тега div;
  4. И так далее...

Можно придумать довольно много вариантов реализации подобной задачи, но я хочу предложить вам самый, на мой взгляд, простой и эффективный способ точного позиционирования картинки внутри какого-либо тега. Он заключается в прописывании внутри тега img стиля, в котором мы задаем смещение картинки сверху и слева. Html код картинки будет выглядеть вот так:

<img style="padding-left: 30px; padding-top: 26px;" src="http://artwebmaster.ru/images/stories/content/logo.gif" border="0" height="67" width="83"/>

Фоновое изображение пустим, к примеру, по тегу div, хотя можно и по tr - это кому как нравиться. В результате получаем:

<div style="width: 200px; height: 150px; background: url(http://artwebmaster.ru/images/stories/content/bg.gif)" align="left"> <img src="http://artwebmaster.ru/images/stories/content/logo.gif" style="padding-left: 40px; padding-top: 26px;" border="0" height="67" width="83"/></div>

Вот как это все будет выглядеть:

Картинка дизайна
Совмещенные картинки фона и логотипа.

Все прекрасно и замечательно - картинка точно попадает туда, где ей и положено быть, что нам и требуется.

Используя этот способ, для точного позиционирования картинки нужно всего лишь изменить значения padding-left (отступ картинки слева) и padding-top (отступ картинки сверху).

Теперь несколько важных замечаний:
  1. Следует иметь ввиду, что тег, внутри которого будет помещена картинка, должен, либо иметь жестко заданную высоту и ширину (с помощью width и height), либо картинка должна быть «прилеплена» к верхней и левой стороне тега (в теге td это делается с помощью valign и align). В идеале лучше сделать и то и другое.
    Если этого не делать, то картинка может «съезжать» со своего места в зависимости от окружающих тегов, окружающего текста и картинок. Вы, возможно, видели такие сайты, у которых при переходе от страницы к странице графика начинает «разъезжаться».
  2. В примере, описанном выше, стили помещены внутри тегов. Это совсем не обязательно и сделано лишь для наглядности. В принципе, их можно вынести в отдельный CSS файл таблицы стилей.

Вот собственно и вся премудрость. Как вы сами видите, ничего сложного в этом способе нет, но поставленную задачу он выполняет прекрасно.

Желаю Вам удачи и успехов в веб-программировании!

===============================
© 2007 Соловьев И. В.

Форма быстрой связи

С помощью этой формы Вы можете быстро сделать заказ сайта или задать нам вопрос.









Ответьте пожалуйста

Как Вы нашли наш сайт?