All-For-Kompa.RU

Сегодня:
Карта сайта форум Главная
Скрыть рекламный блок
  • Страница 1 из 1
  • 1
Модератор форума: Vladislavik-36  
Форум » Движки » uCoz » Текст или картинка, поверх картинки!
Текст или картинка, поверх картинки!
leonP4Дата: Воскресенье, 25.10.2009, 15:40 | Сообщение # 1
.:хакер:.
Группа: Администратор
Сообщений: 1006
Награды: 11
Статус: Offline

Code
<img src="url images" />

Есть картинка, поверха которой нужно сделать текст. Мы сделаем это с помощью «position». Но для начала, что оно из себя представляет.

Position — Устанавливает способ позиционирования, относительно родителя.
position: absolute; — задает абсолютное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают абсолютные координаты элемента страницы относительно родителя.
position: relative; — задает относительное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают смещение координат элемента страницы от точки, в которой он был отображен, будь атрибут position установлен в static.
position: static; — (значение по умолчанию) задает статическое позиционирование, при котором элемент страницы отображается внутри общего «потока» текста, т.е. не свободно. Значения атрибутов bottom, left, right и top при этом не принимаются Web-обозревателем во внимание.
Хм... Если вы делаете только одно изображение на всю страницу, то выгодно будет пользоваться absolute, так как он позволит выбрать положение по всему экрану.
А если вам нужно будет сделать маленькую картинку в нутри тега <div> или в таблице, то лучше воспользоваться relative.

Мне нужно было сделать так как во втором примере. Делаем текст, который в дальнейшем будет находится на картинке. Вот пример:

Code
<div width="10%"><!-- Див, в ктором находится наш текст и картинка -->
<img src="logo.jpg">
<div>Текст поверх картинки</div>
</div>    

После этого кода получается текст ниже картинки. Чтобы он стал на картинке, задаем ему position:relative;

Code
<div width="100%">
<img src="logo.jpg">
<div style="position:relative;bottom:100px;">Текст поверх картинки</div>
</div>

bottom:100px; — показывает настройки расположения текста. Настраивайте под свой вкус ;).
источник: неизвестен
Прикрепления: 0743941.jpg(15.3 Kb)


Админ - Первый источник флуда на форуме =)
 
Форум » Движки » uCoz » Текст или картинка, поверх картинки!
  • Страница 1 из 1
  • 1
Поиск:
Реклама