Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Текст в картинке

Автор: April 17.6.2007, 17:51

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

Вот код:

Код


<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

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

Код


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

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

Автор: Siansor 22.6.2007, 23:53

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