Как впихнуть картинку в див с закругленными углами? @ DeForum.ru

0 Сообщения: 3 Зарегистрирован: 04.08.06

Всем привет.

Я сделал страницу с закругленными углами на DIV-ах (не таблицу).
Таким макаром:

Код:

<style>
img.corner {
   width: 11px;
   height: 11px;
   border: none;
   display: block !important;
}
.roundcont {
   width: 100%;
   background-color: #fff;
   color: #333;
}
.roundcont p {
   margin: 0 10px;
}
.roundtop {
   background: url(/pic/corners/rt.gif) no-repeat top right;
}
.roundbottom {
   background: url(/pic/corners/rb.gif) no-repeat top right;
}
</style>
…
<div class="roundcont"><div class="roundtop">
   <img src="/pic/corners/lt.gif" alt="" width="11" height="11" class="corner" style="display: none">
</div>
Контент
<div class="roundbottom"><img src="/pic/corners/lb.gif" alt="" width="11" height="11" class="corner" style="display: none"></div></div>

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

Возможно ли такое сделать? Если да, то как?
Выручайте. Всем спасибо заранее.

А зачем нужны картинки?

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Нафик картинки</title>
<style type="text/css">
   .curvy {position:relative; width:400px; height:150px; background:green; color:#000; margin:5em auto;}
   #ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:green; background:#fff;overflow:hidden;}
   #ctl {top:0px; left:0px;}
   #cbl {top:130px; left:0px;}
   #ctr {top:0px; left:380px;}
   #cbr {top:130px; left:380px;}
   #quadtl, #quadtr, #quadbl, #quadbr {position:absolute; font-size:150px; font-family:arial; color:green;line-height:40px;}
   #quadtl {left:-8px;}
   #quadtr {left:-25px;}
   #quadbl {left:-8px; top:-17px;}
   #quadbr {left:-25px; top:-17px;}
   #txt {position:absolute; top:5px; left:5px; width:390px; height:140px; color:#ffffff;}
</style>
</head>
<body>
<div class="curvy">
<div id="ctl"><div id="quadtl">&bull;</div></div>
<div id="cbl"><div id="quadbl">&bull;</div></div>
<div id="ctr"><div id="quadtr">&bull;</div></div>
<div id="cbr"><div id="quadbr">&bull;</div></div>
<div id="txt">Вот такая фишка</div> 
</div>
</body>
</html>

Developer®, изящно. ТОлько вы забы(и)ли, что неИЕ кладут на фиксированный размер шрифта.

0 Сообщения: 230 Зарегистрирован: 14.09.03

Developer®,
а если нужна резина?

jettero, это как раз просто: лефты меняются на нулевые райты, топы на нулевые боттомы и ко всему добавляются соотв. маргины.
Только вопрос с размером шрифта открыт. И с картинками кста кол-во доп.блоков можно свести к двум )) и не парится с размерами нишрифтов, ни блоков. Кстати, потодобная тема уже обсуждалась.

По сути вопроса: внешний контейнер позишн:рилейтив, картинка — абсолют с нулевым боттомом, закругления — абсолют, если они пнг — то добавить необходимых трюков. И нужно следить за высотой и шириной контейнера.

ПС. А цсс 3 обещают скругленные углы и так, «даром» :rolleyes:

0 Сообщения: 230 Зарегистрирован: 14.09.03

Цитата:

это как раз просто: лефты меняются на нулевые райты, топы на нулевые боттомы

о чем и речь, что не красиво фикс. значения ставить )))

0 Сообщения: 3 Зарегистрирован: 04.08.06

Менять картинки под трюк со шрифтом не хочу.
Ищу выход именно из такой ситуации.

Может, картинку наложить как слой сверху? Но возможно ли тогда точно ее отпозиционировать?

см. мой последний комент. Для правильного "сверху/снизу" о z-index-ах не забудьте

0 Сообщения: 3 Зарегистрирован: 04.08.06

Эксериментировал...

Получается ужас. Результата нужного нет.

nqwish, значит плохо знаете теорию или невнимательно читали коменты. Developer® дал вам вполне рабочий пример. Уже на его основе можно получить то, что вам нужно.
Вам осталось правильно применить слова "position", "absolute", "relative", "width", "height", "z-idex", "left", "right", "top", "bottom", "margin" и немного здравого смысла.
Или вы рассчитываете на работающий кусок кода для копи-пейст?

Цитата:

Developer®, изящно. ТОлько вы забы(и)ли, что неИЕ кладут на фиксированный размер шрифта.

Это какие-то неправильные "неИЕ". С такими не дружим и не водимся

Developer®, это все остальные. И их слишком много, чтобы можно было считать безкартиночный рецепт универсальным.

DeДверь
Логин:
Пароль:
	Автологин