Jump to content
  • 0

Хитрый фон из нескольких картинок на DIV

Wormaster

Asked by Wormaster,

 Share

Question

Wormaster Explorer

Wormaster

Posted
Posted (edited)

Здравствуйте уважаемые. У меня такая проблема... есть очень хитрый фон состоящий аж из 6 картинок(для резиновости) если использовать по старинке таблички то никаких проблем нет, но фон слишком большой поэтому нужны дивы... а вот с дивами разобраться не могу.

Вот как это выглядит в табличках.

HTML

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td class="l_up"> </td>
	<td class="c_up"> </td>
	<td class="r_up"> </td>
  </tr>
   <tr>
	<td class="cc"> </td>
	<td class="cc"> </td>
	<td class="cc"> </td>
  </tr>
  <tr>
	<td class="l_dwn"> </td>
	<td class="c_dwn"> </td>
	<td class="r_dwn"> </td>
  </tr>
</table>

CSS

.l_up
{
	background: url(../images/l_up.png) no-repeat;
	height: 104px;
	width: 94px;
}

.c_up
{
	background: url(../images/c_up.png) repeat-x;
	height: 104px;
}

.r_up
{
	background: url(../images/r_up.png) no-repeat;
	height: 104px;
	width: 174px;
}
.cc {
	background:url(../images/c_up.png);
	}
.l_dwn
{
	background: url(../images/l_dwn.png) no-repeat;
	height: 522px;
	width: 94px;
}

.c_dwn
{
	background: url(../images/c_dwn.png) repeat-x;
	height: 522px;
}

.r_dwn
{
	background: url(../images/r_dwn.png) repeat-x;
	height: 522px;
	width: 174px;
}

.f_left
{
	background: url(../images/footer_l.png) no-repeat;
	height: 68px;
	width: 324px;
}

.f_center
{
	background: url(../images/footer_c.png) repeat-x;
	height: 68px;
}

.f_right
{
	background: url(../images/footer_r.png) no-repeat;
	height: 68px;
	width: 180px;
}

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

А сверху всего этого безобразия должен быть текст.... пытался убрать в разные дивы и эту конструкцию и текст... но самое лучшее что у меня получилось это при абсолютном позиционировании текст по ширине втиснулся в табличку а по высоте вылез...

А требуется чтобы он растягивал фон под себя... убил почти целый день, если у кого нибудь есть идею буду очень благодарен...

Edited by Wormaster
Link to comment
Share on other sites

31 answers to this question

Recommended Posts

  • 0
Wormaster Explorer

Wormaster

Posted
  • Author
Posted

если вы внимательно посмотрите в код то увидите что размер некоторых картинок довольно большой ибо там находятся не повторяющиеся элементы и они должны быть фоном.... а если прсто воткнуть как обычно в центр таблички, то будут очень широкие поля.....

Link to comment
Share on other sites
  • 0
VJiK Explorer

VJiK

Posted
Posted
если вы внимательно посмотрите в код то увидите что размер некоторых картинок довольно большой ибо там находятся не повторяющиеся элементы и они должны быть фоном.... а если прсто воткнуть как обычно в центр таблички, то будут очень широкие поля.....

Понял ^_^ Я просто подумал про размер файла)

Выложите сюда просто фон - попытаюсь сделать...

Link to comment
Share on other sites
  • 0
kolynia Explorer

kolynia

Posted
Posted (edited)

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

Аааа, посмотрел только что картинку выложенную вами... да действительно нужны только дивы. Есть несколько хороших работ от студии Артемия Лебедева для реализации скругленных уголков, если немного переделать то вполне сойдет и для вашего случая.

Edited by kolynia
Link to comment
Share on other sites
  • 0
Wormaster Explorer

Wormaster

Posted
  • Author
Posted
Вот этот момент я не учел..... как с полупрозрачными картинками сделать не знаю ^_^

Сделал с дивами распиханными по углам? )) я так тоже пробовал ) если б не прозрачность то всё нормально ) кстате выкиньте вариант получившийся ) в дискусии рождается истна )

Link to comment
Share on other sites
  • 0
Wormaster Explorer

Wormaster

Posted
  • Author
Posted (edited)

а чем тут поможет JS? задать размер таблички равный размеру дива с текстом? но в таком случае с позиционирование проблем просто необерёшься помоему...

Edited by Wormaster
Link to comment
Share on other sites
  • 0
VJiK Explorer

VJiK

Posted
Posted
а чем тут поможет JS? задать размер таблички равный размеру дива с текстом? но в таком случае с позиционирование проблем просто необерёшься помоему...

да.. с JS заморочно конечно, но реально ^_^

Мне уже самому оч. интересно как это сделать нормально... Ждем ответа от Justnewone.

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
да.. с JS заморочно конечно, но реально ^_^

Мне уже самому оч. интересно как это сделать нормально... Ждем ответа от Justnewone.

Я не буду делать и давать готовый вариант. Говорю же, просто надо грамотно в Photoshop-e вычленить оптимальное количество слоев, потом применять релейтив и абсолют. Такая задача решается при совершенно произвольном количестве фрагментов.

Link to comment
Share on other sites
  • 0
VJiK Explorer

VJiK

Posted
Posted (edited)

так дело в том, что здесь резина и по вертикали и по горизонтали и всё это в фоне, а сверху текст...

Друг на друга фоны накладываться не должны, тк они полупрозрачные.

Edited by VJiK
Link to comment
Share on other sites
  • 0
VJiK Explorer

VJiK

Posted
Posted

ну это не дело...

Покажите какой-н. пример.

Вывод я сделал, что пока не вижу КАК это сделать, но узнать-то хочется ))

А вот так сказать позиционированием делайте - это легко....

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
ну это не дело...

Покажите какой-н. пример.

Вывод я сделал, что пока не вижу КАК это сделать, но узнать-то хочется ))

А вот так сказать позиционированием делайте - это легко....

ну, пример.... например футер внизу экрана, знаете как делается? все остальное уже очень близко, на грани "ох, как же я не догадался, вот ведь, на поверхности". А репетиторство отложим.

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
Кстати о прозрачности.... у меня родилась мысль ) а почему бы всё это дело не склеить дивами непрозрачными и потом задать {opacity:0.7;} хм.... над попробовать .....

Господа, да вы че!

есть ведь PNG-24

Link to comment
Share on other sites
  • 0
Wormaster Explorer

Wormaster

Posted
  • Author
Posted

Фотошоп... блин как же я не догадался.... надо изначально не так это рубить ..... делаем почти обычные круглоуголки а всю ботву сверху вешаем прозрачными пнг отдельно.... так *убёг тестить*

Господа, да вы че!

есть ведь PNG-24

При наложении друг на друга они дают естественно другой цвет..

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept