Помощник
|
Как сделать текст внутри изображения |
Mk_msk
|
Сообщение
#1
|
||
|
|
||
|
|||
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
|
Сообщение
#3
|
|
Можно сделать так: 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 |
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
|
Сообщение
#5
|
|
<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 |
16.6.2009, 14:16;
Ответить: v1ex
Сообщение
#6
|
|
Незачто
|
|
|
Mk_msk
|
Сообщение
#7
|
|
|
|
|
v1ex |
16.6.2009, 15:38;
Ответить: v1ex
Сообщение
#8
|
|
А с низом не подскажешь что делать? ЗЫ: И вообще, не посоветуете ли мне каких хороших книжек почитать, про CSS и вообще про вебдизайн для составления общей основы, а то практика это хорошо, но теория имеет огромное значение тоже. Подними background на такую-же высоту как и текст, не знаю, сработает ли. Вобщем поколдуй с этим. По поводу книжек, не знаю, что посоветовать, сам книг по HTML/CSS не читал никогда. Единственное, сайт - htmlbook.ru. |
|
|
ZiTosS |
16.6.2009, 16:48;
Ответить: ZiTosS
Сообщение
#9
|
|
Mk_msk, тогда могу предложить только такой вариант.
Смотри в attach. Работает в IE6, IE7, FF3 в остальных не проверял. Но я думаю должен работать и в опере. Если нет, то надо раскомментить одну строку. Вообще подобные элементы, это дурь, надо продумывать так, чтобы всё было красиво и эстетично, а не делало из маленькой проблемы большую. Советую больше не использовать подобные блоки. v1ex, Подними background на такую-же высоту как и текст, не знаю, сработает ли. Вобщем поколдуй с этим. Не получится, не понимает блок, что от него хотят. Ставим bottom: ...px, уползает вверх background. Ставим margin-bottom: -...px; Вроде блок уменьшается, но background так и остаётся на всю длину.
Прикрепленные файлы
|
|
|
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 не проверял, но вроде должно работать. |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Арбитражники, как ведете учет расходов и доходов? | 11 | Boymaster | 1797 | 17.4.2024, 23:35 автор: Boymaster |
|
Как вывести деньги в Украине с заблокированного Юмани ? | 29 | freeax | 4806 | 17.4.2024, 1:19 автор: sergio11 |
|
Как вы отдыхаете от работы за компом | 148 | adw-kupon.ru | 19705 | 8.4.2024, 10:37 автор: Skyworker |
|
Как вы бросили работу и перешли на заработок с сайтов? | 18 | uahomka | 3095 | 5.4.2024, 5:53 автор: Skyworker |
|
Как бездомные хранят деньги? | 81 | metvekot | 13652 | 31.3.2024, 12:44 автор: Boymaster |
Текстовая версия | Сейчас: 19.4.2024, 6:59 |