Форум » Помощь по коду » [Дизайн] Статья: Методика наложения текстовых полей на картинку » Ответить
[Дизайн] Статья: Методика наложения текстовых полей на картинку
Zenitchik: Элементом дизайна многих форумов является таблица новостей или отдельные текстовые поля наложенные на картинку, которая одновременно является логотипом. В этой статье я предлагаю методику разработки и кодирования такой таблицы. С чего начать? 1. Подберите подходящую картинку и измените ее в соответствии с вашими потребностями. 2. По картинке определите ее выстоу и ширину в пикселях. 3. Полезно заранее по картинке определить размеры и расположение (расстояние от верха и от левого края в пикселах) каждого текстового поля. Как вставить картинку? Я рекомендую использовать элемент div. Основой будет элемет div, содержащий картинку и все поля, которые на нее наложены. Вот его приблизительный код: <div style="position:relative; width:ширина; height:высота; background-image:url(адрес_картинки); overflow:hidden;"></div> Ширину и высоту мы выяснили на этапе подготовки картинки, их следует указывать в пикселях. Как наложить поля? В подавляющем большинстве случаев полноценная таблица не требуется, а достаточно нескольких полей для текста. Их я также рекомендую реализовывать как элеметны div. Чтобы их можно было располагать так, как нам удобно и в то же время они были жестко связаны с базовым элементом, следует размещать их внутри базового элемента (содержащего картинку) и использовать свойство стиля position:absolute. Размещаем элементы: Если вы заметили, в основном элементе указан параметр position:relative. Благодаря этому, мы теперь можем использовать параметр position:absolute для позиционирования внутренних элементов относительно основного элемента, а не окна. Каждый элемент будет выглядеть так: <div style="position:absolute; width:ширина; height:высота; left:расстояние_от_левого_края; top:расстояние_от_верха; overflow:auto;"></div> Все расстояния я рекомендую выяснить зарание, "обмерив" свою картинку. Для улучшения вида я применил еще одно свойство: overflow. Оно определяет поведение элемента если содержимое в нем не умещается. Для базового элемента я установил overflow:hidden, что предписывает элементу скрывать все части содержимого, которые выходят за его границы. Для полей - overflow:auto, чтобы при необходимости в элементе появлялись полосы прокрутки. Здесь был применен тег DIV Свойства стилей: position height width background-image left top overflow
Ответов - 4
Джон : !!!!РЕСПЕКТ!!!! Зенитчик! Ты не представляешь как помог. Весь день копался((( Спасибо Виз твою статью кинул! Всё чётко! Спасибо огромное!
Rikku_me: Спасибо, сама пару дней назад с этим мучалась
конишуаа: Огромное спасибо! Очень помогло
Zenitchik: Обновлено. Новая методика проще и технически правильнее.
полная версия страницы