Форум Сайтостроение Веб-строительство

Помогите с кодом линейки

12
Doggi
На сайте с 30.05.2010
Offline
55
Doggi
1116

Доброго дня всем!

Помогите пожалуйста с кодом, что-то всю голову сломала неожиданно.

Как наложить текст на картинку?

Допустим, есть линеечка размером 288х37 (картинка), надо, чтобы сверху на нее автоматически по середине накладывался текст (пара слов), ну и сама картинка была ссылкой. И чтобы эта вся конструкция корректно работала на любом сайте, если кто-то скопирует данный код себе.

Braindbrigada
На сайте с 10.01.2010
Offline
84
Braindbrigada
#1
Как наложить текст на картинку?

Текст на картинку?

CSS - position

Наверное вам нужно из текста сгенерировать картинку и наложить ее на другую картинку!?

IL
На сайте с 20.04.2007
Offline
435
ivan-lev
#2
Doggi:
Допустим, есть линеечка размером 288х37 (картинка), надо, чтобы сверху на нее автоматически по середине накладывался текст (пара слов),

Видимо, задумка в том, чтобы картинка, состоящая из "линеечки"-фона и текста размещалась на другом сайте.. Тогда картинку на сервере формировать:

Работа с GD в PHP

---------- Post added 05-07-2013 at 15:09 ----------

Braindbrigada:
Текст на картинку?

Braindbrigada, слово

Doggi:
линеечка
не смутило?
... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
Автоматическое продвижение постов публичных Adobe Media Optimizer представил Adobe Spark пакет приложений
Braindbrigada
На сайте с 10.01.2010
Offline
84
Braindbrigada
#3
линеечка

Как мило :p ТС вы девочка?

Doggi
На сайте с 30.05.2010
Offline
55
Doggi
#4

Braindbrigada, есть картинка, на нее нужно наложить текст, спасибо за желание помочь!

ivan-lev, т.е. силами html и css это не сделать?

Мне не надо там никаких отсчетов и т.п, нужен просто код, который можно разместить на любом сайте в независимости от его дизайна.

---------- Добавлено 05.07.2013 в 15:24 ----------

Braindbrigada, я девушка), вас это как-то смущает?

В аукционе дизайнов РСЯ Google Image Search не API Почта@Mail.Ru
Braindbrigada
На сайте с 10.01.2010
Offline
84
Braindbrigada
#5
Doggi:
Braindbrigada, я девушка), вас это как-то смущает?

Нет :)

CSS можно!

IL
На сайте с 20.04.2007
Offline
435
ivan-lev
#6
Doggi:
ivan-lev, т.е. силами html и css это не сделать?
Мне не надо там никаких отсчетов и т.п, нужен просто код, который можно разместить на любом сайте в независимости от его дизайна.

сделать.. код будет примерно такой:

<div style="width:288px;height:37px; margin:0;padding:0;text-align:center;
background:url(адрес_картинки) left top no-repeat"><a href="ссылка" style="color:black; 
text-decoration:none;font:normal 10px arial;">текст</a></div>

И то не факт, что остальные стили с сайта не "перебьют" какими-нибудь !important-ами.

Если сравнить с кодом картинкои, которая генерируется на сервере:

<a href="ссылка"><img src="картинка" alt="альт"/></a>
Doggi
На сайте с 30.05.2010
Offline
55
Doggi
#7

ivan-lev, спасибо огромное! Получилось! Ура!) Вы очень помогли!

А как сделать так, чтобы текст показывался по середине картинки (сверху сделать отступ)?

Braindbrigada, спасибо за ссылочку).

vlad00777
На сайте с 24.12.2009
Offline
119
vlad00777
#8
<div style="width:288px;height:37px; margin:0;padding:0;text-align:center;
background:url(адрес_картинки) left top no-repeat"><a href="ссылка" style="color:black; text-decoration:none;font:normal 10px arial; margin-top:10px;">текст</a></div>

margin и padding отвечают за отступы.

Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.
IL
На сайте с 20.04.2007
Offline
435
ivan-lev
#9 

<a href="ссылка" style="line-height:25px;...


vlad00777, не про тот отступ речь.

Там padding нужен.. с уменьшением высоты на соответствующую величину..

Или высоту строки увеличить..

vlad00777
На сайте с 24.12.2009
Offline
119
vlad00777
#10

ivan-lev, только если несколько строк текста то ппц будет...

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий