1. Вы находитесь в архивной версии форума xaker.name. Здесь собраны темы с 2007 по 2012 год, большинство инструкций и мануалов уже неактуальны.
    Скрыть объявление

.:Урок №1:. - Наложение текста на картинку.

Тема в разделе "HTML-верстка", создана пользователем White-Power, 19 мар 2010.

  1. White-Power

    White-Power Продвинутый

    Регистрация:
    27 июн 2008
    Сообщения:
    161
    Симпатии:
    102
    Баллы:
    0
    Доброе время суток.
    Сегодня мы разберем не мало важный пример "наложения текста на картинку", может кому и пригодится...

    Его можно использовать во многих случаях, "в шапке, для загаловков блоков и тем и т.д. !

    Что это из себя представляет...

    У нас есть картинка


    [​IMG]

    Ее размер 210 х 210 px, красная зона это где должен располагаться наш текст...

    И так преступим:

    1. Создаем блочный элемент "DIV", в его стиле мы укажем следующие параметры: (его мы используем для изображения)


    Рассмотрим тщательно стиль
    блока изображения

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

    background-repeat -

    Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image, и по какой оси. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.

    width
    - Ширина.
    height - Высота.

    2. В блочном элементе создаем еще один блок "DIV", его мы будем использовать под текст.

    Так же в него вписываем стиль
    Рассмотрим тщательно стиль текста

    padding -
    Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).
    [​IMG]
    Рис. 1. Поле слева от текста

    О настройках padding'a
    padding: 0px 0px 0px 0px;

    Красный
    - отступ сверху
    Зеленый - отступ справа
    Синий - отступ снизу
    Оранжевый - отступ слева

    И так, как должно у нас все выглядеть !

    Код:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Новый документ</title>
    </head>
    
    <body>
    <div style="background-image: url(http://i050.radikal.ru/1003/f9/a36a00ceac79.png); background-repeat: no-repeat; width: 210px; height: 210px;">
    <div style="padding: 70px 10px 10px 46px;">
    <ul>
    <li>123456789</li>
    <li>987654321</li>
    </ul>
     </div></div>
    </body>
    </html>
    
    Результат

    [​IMG]

    P.s. Советую вам все стили поместить в таблицу стилей!

    Мой вариант решения...
    [​IMG]

    Создавайте, творите, усовершенствуйте !!!
    Спасибо за внимание!!!
     
    3 пользователям это понравилось.

Поделиться этой страницей