X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Как сделать текст внутри изображения
Mk_msk
Mk_msk
Topic Starter сообщение 16.6.2009, 12:25; Ответить: Mk_msk
Сообщение #1


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

[img]http://pic.ipicture.ru/uploads/090616/71aqXrpwer.jpg[/img]

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

[img]http://pic.ipicture.ru/uploads/090616/nA3GYBcewd.jpg[/img]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 16.6.2009, 12:40; Ответить: ZiTosS
Сообщение #2


Можно сделать так:
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, уменьшаем размеры блока.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Mk_msk
Mk_msk
Topic Starter сообщение 16.6.2009, 13:37; Ответить: Mk_msk
Сообщение #3


(ZiTosS @ 16.6.2009, 12:40) *
Можно сделать так:
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, уменьшаем размеры блока.


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

Но из-за того что верх и низ полупрозрачные, т.к. фон все время меняется, получается вот такая фигня, можно ли что-то с этим сделать?
[img]http://pic.ipicture.ru/uploads/090616/B1ESTKM0M9.jpg[/img]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
v1ex
v1ex
сообщение 16.6.2009, 13:58; Ответить: v1ex
Сообщение #4


<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 - с отрицательным.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Mk_msk
Mk_msk
Topic Starter сообщение 16.6.2009, 14:03; Ответить: Mk_msk
Сообщение #5


(v1ex @ 16.6.2009, 13: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 - с отрицательным.


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

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

[img]http://pic.ipicture.ru/uploads/090616/UCKkLFslW4.jpg[/img]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
v1ex
v1ex
сообщение 16.6.2009, 14:16; Ответить: v1ex
Сообщение #6


Незачто :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Mk_msk
Mk_msk
Topic Starter сообщение 16.6.2009, 14:25; Ответить: Mk_msk
Сообщение #7


(v1ex @ 16.6.2009, 14:16) *
Незачто :)


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


ЗЫ: И вообще, не посоветуете ли мне каких хороших книжек почитать, про CSS и вообще про вебдизайн для составления общей основы, а то практика это хорошо, но теория имеет огромное значение тоже.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
v1ex
v1ex
сообщение 16.6.2009, 15:38; Ответить: v1ex
Сообщение #8


(Mk_msk @ 16.6.2009, 16:25) *
А с низом не подскажешь что делать?


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

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

По поводу книжек, не знаю, что посоветовать, сам книг по HTML/CSS не читал никогда. Единственное, сайт - htmlbook.ru.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 16.6.2009, 16:48; Ответить: ZiTosS
Сообщение #9


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

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

Не получится, не понимает блок, что от него хотят. Ставим bottom: ...px, уползает вверх background. Ставим margin-bottom: -...px; Вроде блок уменьшается, но background так и остаётся на всю длину.
Прикрепленные файлы
Прикрепленный файл  position.zip ( 16,39 килобайт ) Кол-во скачиваний: 108
 
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
v1ex
v1ex
сообщение 16.6.2009, 20:54; Ответить: v1ex
Сообщение #10


Вот мое решение (картинки взял у 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 не проверял, но вроде должно работать.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) SEO-текст на главной странице сайта и в категориях
5 boltuk 1355 26.3.2024, 21:43
автор: c4p1t4l15t
Открытая тема (нет новых ответов) Большие ставки для кликов в Я.Директ. Как удешевить?
2 rownong27 1124 26.3.2024, 14:13
автор: knezevolk
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
12 uahomka 2298 25.3.2024, 6:52
автор: Skyworker
Открытая тема (нет новых ответов) Как отозвать банковский платеж фрилансеру?
28 metvekot 3921 25.3.2024, 6:34
автор: Skyworker
Открытая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
23 freeax 3648 24.3.2024, 20:55
автор: Liudmila


 



RSS Текстовая версия Сейчас: 29.3.2024, 15:12
Дизайн