6 октября 2011 г.

Текст поверх картинки

Левитан
Унылая пора! Очей очарованье!
Приятна мне твоя прощальная краса —
Люблю я пышное природы увяданье,
В багрец и в золото одетые леса.
А.С.Пушкин
И.Левитан "Золотая осень"


Сейчас в Киеве настоящее бабье лето. В транспорте промелькнула песня "Что такое осень". Решила порадовать себя и поставить себе в блог. А к песне не помешает и картинка. Но так как картинки  и плеер  вставлять вроде бы умею, захотелось освоить новенькое. Код с наложением текста на картинку и образец находились в закладках. Думала освою быстренько, да не тут-то было. Текст съехал вниз и был явно велик для данной картинки. Решила подправить - все буковки разбежались и возвращаться не собирались. И как бы мне не хотелось, пришлось прощупать каждую циферку. Итак, все по-порядку. 

Код можно скопировать, только поставьте свою картинку. Моя для эксперимента слишком велика. Текст пока не трогайте.

border
<div style="position: relative;">
<img border="0" height="374" src="https://lh6.googleusercontent.com/-GQabqfB_vJk/ToyNAUGc_rI/AAAAAAAABCs/vEba5-MRJcw/s144/Levitan.jpg" width="558" alt="Левитан"/>
<div style="font-family: Courier; font-size: 80%; left: 320px; position: absolute; top: 15px; width: 280px; text-indent: 0px;">Текст</div>
<div style="font-family: Courier; font-size: 80%; left: 480px; position: absolute; top: 80px; width: 150px;">А.С.Пушкин</div>
<div style="font-family: Courier; font-size: 80%; left: 60px; position: absolute; top: 350px; width: 200px;">И.Левитан "Золотая осень"</div>
</div>

В первой части кода я прописала истинные размеры картинки, сохраненной на компьютере, но изображение было мутным. Нажала в редакторе "Исходный размер" - изображение приняло нормальный вид. Затем поставила его по центру с помощью иконки. Вот тут-то все ваши настройки текста и сбиваются. Поэтому я и сказала, что текст не трогать до поры. Теперь пишем текст,  смотрим и подправляем.

font-size: 80%.  - отвечает за размер текста
left: 350px         - расстояние от левого края
top: 8px             - расстояние от верха
width: 150px     - размер, зарезервированный под текст

Как вы понимаете, 2 пары нижних  строчек в коде можно убрать, если они не нужны.




Приглашаю Вас присоединиться ко мне в следующих сервисах:

Чтобы быть в курсе, подпишитесь на  RSS-канал



Понравилась статья? Поделитесь с друзьями.

10 коммент.:

Анонимный

хороший урок, спасибо)

Анонимный

Спасибо

Sly

вроде норм

Анонимный

Благодарю

андрей тукубаев

благодарю!

Анонимный

Спасибо! Очень пригодилось!

Alexander

Интересная статья!

niilit51

Спасибо! Пригодится!

Александр Красноярск

Я рад, что из сотни просмотренных сайтов, есть один, по-настоящему здравый урок!
Спасибо, Вера Борок!

Alex

Спасибо

Отправить комментарий

Related Posts Plugin for WordPress, Blogger...