Jump to content
  • 0

2 картинки в div


okunev2
 Share

Question

подскажите код css, как можно в одну ячейку таблицы вставить две картинки, чтобы одна выравнивалась по верхнему краю, а другая по нижнему и в этой же ячейке применялся градиент, так как эта ячейка будет тянутся по высоте?

Link to comment
Share on other sites

Recommended Posts

  • 0

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

Link to comment
Share on other sites

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

Есть этот пример?!

Link to comment
Share on other sites

  • 0

Перестань множить бессмысленные темы!

"Матрешка" делается так:

Содержимое

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

Link to comment
Share on other sites

  • 0

я знаю!

Но эту матрешку нужно ещ? засунуть в td.class, тобишь в ячейку таблицы, без таблиц не обойтись, нужно вот и скрестить верстку дивами и табличную!

Делаю такую матрешку, засовываю е? в таблицу и ничего не работает, стили не приминяются, хотя картинки выводятся! Что делать?

Link to comment
Share on other sites

  • 0

присвой ячейке класс. определи для нее стили (фон + градиент)

Далее вложы туда два тега верхний для верхней картинки , нижний для нижней.

А по центру используй параграф или див и пиши туда :).

Link to comment
Share on other sites

  • 0
присвой ячейке класс. определи для нее стили (фон + градиент)

Далее вложы туда два тега верхний для верхней картинки , нижний для нижней.

А по центру используй параграф или див и пиши туда :).

Я не понял, можно примерчик?!

Link to comment
Share on other sites

  • 0
хмык )))

ну давай :)

....

Супер ячейка

...

#верх {background: url(картинка) 100% 0 (или наоборот не помню :))) ) no-repeat}

#низ {background: url(картинка) 0% 0 no-repeat}

#градиент {background:фон url(картинка) repeat-x или repeat-y}

вот:

td.content9 {
width: 70px;
background: url(images/bg4.jpg) repeat-y;
}

#content9_1 {
background: url(images/bg5.jpg) 100% 0 no-repeat;
width: 70px;
}

#content9_2 {
background: url(images/bg6.jpg) 0% 0 no-repeat;
width: 70px;
}

вот:

<td class="content9" rowspan="3"><div id="content9_1"><div id="content9_2"> </div></div></td>

Градиент выводится в ячейке, а вот рисунок снизу и сверху в ячейке нет :)

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

aba52a5eab08.jpg

1 - верхняя картинка (ширина такая же как у ячейки)

2 - нижняя картинка (ширина такая же как у ячейки)

3 - градиент который тянется по центру

см. выше код, все эти дивы в 3 объединенных ячейках применяются и сам класс градиента к ячейке

Т.е. нужно, чтобы когда таблица будет растягиваться по высоте, то картинка 1 и 2 оставались на месте (одна вверху, а другая внизу), а тянулся бы только градиент!

Link to comment
Share on other sites

  • 0

td.content9 {

width: 70px;

background:#3C4646 url(images/bg4.jpg) repeat-y;

}

#content9_1 {

background: url(images/bg5.jpg) 100% 0 no-repeat;

width: 70px;

height: 50px;

position: relative;

}

#content9_2 {

background: url(images/bg6.jpg) 0% 0 no-repeat;

width: 70px;

height: 50px;

position: relative;

}

попробуй так

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

×
×
  • 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