VPF::Текст в картинке - Форум программистов

April

Дата 17.6.2007, 17:51 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 1.2.2007

Репутация: нет
Всего: нет

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

Вот код:

Код


<div style="background-color:white; 
                             width: 200px;
                             height:130px;
                             border-style: solid;
                             border-width:1px;
                             border-color:black;
                             float:left;">   
</div>

<div style="background-color:white; 
                             width: 800px;
                             height:130px;
                             border-style: solid;
                             border-width:1px;
                             border-color:black;
                             float:left;">
<img src="24.jpg">
<h2>Заголовок</h2>                                                       
</div>

<div style="background-color:white; 
                             width: 1000px;
                             height:30px;
                             border-style: solid;
                             border-width:1px;
                             border-color:black;">
</div>

webster

Дата 17.6.2007, 19:15 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

А если все-таки не очень сильно усложнять себе жизнь и просто воспользоваться бэкгроундом, пусть даже не с обычным выравниванием картинки, а с попиксельным ее расположением:

Код


style="background: transparent url(24.jpg) no-repeat center center;" или style="background: transparent url(24.jpg) no-repeat 10px 20px;"

http://www.w3schools.com/css/pr_background.asp
И никогда не старайтесь привязывать текст к картинкам или картинки к тексту, дизайн надо всегда отграничивать от контента.
Можно конечно воспользоваться и тегом <img />, но в таком случае вам придется его абсолютнопозиционировать относительно контейнера, чтобы он не вносил свое влияние на другие элементы (например текстовые блоки) этого контейнера.

April

Дата 18.6.2007, 13:39 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 1.2.2007

Репутация: нет
Всего: нет

Большое спасибо.

Siansor

Дата 22.6.2007, 23:53 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 61
Регистрация: 22.9.2005
Где: Украина

Репутация: нет
Всего: 0

April аккуратно пишешь код ... респект )

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »