Перейти к содержимому


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 273 3 темы, 17 сообщений, 7 баллов репутации

  • Фотография WGN
    #2

    WGN (worldgamenews.com)
    Очков активности: 64.5 Вне конкурса за определение пользователя месяца

  • Фотография ShowPrint
    #3

    ShowPrint (ShowPrint.ru)
    Очков активности: 52.5 0 тем, 7 сообщений, 5 баллов репутации

  • Фотография BlackLion
    #4

    BlackLion
    Очков активности: 40.5 1 тема, 24 сообщения, 1 балл репутации

  • Фотография Vmir
    #5

    Vmir
    Очков активности: 25.5 Вне конкурса за определение пользователя месяца

  • Фотография Napoleon-007
    #6

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

  • Фотография Ixman
    #7

    Ixman (o5cat.ru)
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Фотография alekswebart
    #8

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

  • Фотография r0mZet
    #9

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

  • Фотография profi
    #10

    profi (1informer.com)
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 17.08.2018
Топ 5 участников по репутации


Как сделать текст внутри изображения

#1 Mk_msk

Mk_msk
  • Неактивные
  • 5 сообщений
  • Репутация: 0
0

Отправлено 16 June 2009 - 11:25

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

Изображение

Делаю тремя дивами: Верхний, Средний (динамический с бэкграундом растягиваемым по вертикали), Нижний. Но т.к. текст должен начинаться прямо сверху, а по бокам сверху и снизу "рюшечки", то получается такая вот фигня:

Изображение

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Картинка и текст
  2. Зглаживание текста в фотошопе
  3. Поворот текста на угол
  4. Html верстка на конкретном примере
  5. Обтекание текстом картинки в анонсах Вордпресс-блога

#2 ZiTosS

ZiTosS
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

Отправлено 16 June 2009 - 11:40

Можно сделать так:
1) Есть главный div с бекграундом боковых полосок, повоторяется по оси y то есть repeat-y.

background: url(...) repeat-y;

2) Внутри него есть div как раз с текстом у которого background прижат к верху и без повторения.

background: url(...) top no-repeat;

3) а Так же внутри есть ещё блок по высоте равный footer. background так же без повторений.

Если хочешь чтобы текст заканчивался в самом низу, надо сделать тройную вложенность
footer(c bottom и no-repeat) вложен в header(с top и no-repeat), который вложен в global(c repeat-y)
Если нужны будут отступы, поколдуете с размерами. Прибавляем padding, уменьшаем размеры блока.
  • 0

#3 Mk_msk

Mk_msk
    Topic Starter
  • Неактивные
  • 5 сообщений
  • Репутация: 0

Отправлено 16 June 2009 - 12:37

Можно сделать так:
1) Есть главный div с бекграундом боковых полосок, повоторяется по оси y то есть repeat-y.

2) Внутри него есть div как раз с текстом у которого background прижат к верху и без повторения.

3) а Так же внутри есть ещё блок по высоте равный footer. background так же без повторений.

Если хочешь чтобы текст заканчивался в самом низу, надо сделать тройную вложенность
footer(c bottom и no-repeat) вложен в header(с top и no-repeat), который вложен в global(c repeat-y)
Если нужны будут отступы, поколдуете с размерами. Прибавляем padding, уменьшаем размеры блока.


Гениально! :)

Но из-за того что верх и низ полупрозрачные, т.к. фон все время меняется, получается вот такая фигня, можно ли что-то с этим сделать?
Изображение
  • 0

#4 v1ex

v1ex
  • Неактивные
  • 225 сообщений
  • Репутация: 0

Отправлено 16 June 2009 - 12:58

<div class="topBg"></div>
<div class="middle"><div class="content"></div></div>
<div class="footerBg"></div>

Где topBg - верхний background, middle - блок в котором по бокам border, content - контент, footerBg - нижний background. В CSS у класса content делаем margin-top с отрицательным значением, или - position: relative; и top - с отрицательным.
  • 0

#5 Mk_msk

Mk_msk
    Topic Starter
  • Неактивные
  • 5 сообщений
  • Репутация: 0

Отправлено 16 June 2009 - 13:03

<div class="topBg"></div>
<div class="middle"><div class="content"></div></div>
<div class="footerBg"></div>

Где topBg - верхний background, middle - блок в котором по бокам border, content - контент, footerBg - нижний background. В CSS у класса content делаем margin-top с отрицательным значением, или - position: relative; и top - с отрицательным.


Почти все отлично!!! :) Надо только position:relative обязательно делать у миддл, иначе при margin-top текст поднимается вместе с бэкграундом. СПАСИБО!

Только с низом фигня. Текст поднялся вверх, а бэкграунд у низ остался :) Вот:

Изображение
  • 0

#6 v1ex

v1ex
  • Неактивные
  • 225 сообщений
  • Репутация: 0

Отправлено 16 June 2009 - 13:16

Незачто :)
  • 0

#7 Mk_msk

Mk_msk
    Topic Starter
  • Неактивные
  • 5 сообщений
  • Репутация: 0

Отправлено 16 June 2009 - 13:25

Незачто :)


А с низом не подскажешь что делать?


ЗЫ: И вообще, не посоветуете ли мне каких хороших книжек почитать, про CSS и вообще про вебдизайн для составления общей основы, а то практика это хорошо, но теория имеет огромное значение тоже.
  • 0

#8 v1ex

v1ex
  • Неактивные
  • 225 сообщений
  • Репутация: 0

Отправлено 16 June 2009 - 14:38

А с низом не подскажешь что делать?


ЗЫ: И вообще, не посоветуете ли мне каких хороших книжек почитать, про CSS и вообще про вебдизайн для составления общей основы, а то практика это хорошо, но теория имеет огромное значение тоже.

Подними background на такую-же высоту как и текст, не знаю, сработает ли. Вобщем поколдуй с этим.

По поводу книжек, не знаю, что посоветовать, сам книг по HTML/CSS не читал никогда. Единственное, сайт - htmlbook.ru.
  • 0

#9 ZiTosS

ZiTosS
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

Отправлено 16 June 2009 - 15:48

Mk_msk, тогда могу предложить только такой вариант.
Смотри в attach. Работает в IE6, IE7, FF3 в остальных не проверял. Но я думаю должен работать и в опере. Если нет, то надо раскомментить одну строку.
Вообще подобные элементы, это дурь, надо продумывать так, чтобы всё было красиво и эстетично, а не делало из маленькой проблемы большую. Советую больше не использовать подобные блоки.

v1ex,

Подними background на такую-же высоту как и текст, не знаю, сработает ли. Вобщем поколдуй с этим.

Не получится, не понимает блок, что от него хотят. Ставим bottom: ...px, уползает вверх background. Ставим margin-bottom: -...px; Вроде блок уменьшается, но background так и остаётся на всю длину.

Прикрепленные файлы

  • Прикрепленный файл  position.zip   16.39К   Количество загрузок: 105

  • 0

#10 v1ex

v1ex
  • Неактивные
  • 225 сообщений
  • Репутация: 0

Отправлено 16 June 2009 - 19:54

Вот мое решение (картинки взял у ZiToSs'а):
HTML:
<div class="box">
<div class="top">

</div>
<div class="middle">
<div class="content">
content
</div>
</div>
<div class="bottom">
</div>
</div>

CSS:
.box {
	width: 402px;
}
.top {
	background-image: url(images/top.gif);
	background-position: left top;
	background-repeat: no-repeat;
	height: 223px;
}
.middle {
	border-left: 5px solid #000000;
	border-right: 5px solid #000000;
	margin: 0px 16px 0px 19px;
	padding: 1px;
}
.content {
	padding: 20px;
	margin-top: -210px;
}
.bottom {
	background-image: url(images/bottom.gif);
	background-position: left bottom;
	background-repeat: no-repeat;
	height: 99px;
	margin-top: -75px;
}
Работает в firefox, opera, IE7. В IE6 не проверял, но вроде должно работать.
  • 0

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru