Все те же скругленные углы, но...

[splean]

Как делается css-обвязка я в курсе, начитался. Отлично, работает. А тут вдруг верстаю себе, верстаю, и вижу что НУЖНО сделать эти самые скругленные уголки с прозрачной частью, а не белой. Попробуйте, если все делать как в этой статье, но например верхний левый угол сделать прозрачным гифом - на месте прозрачности увидим соответствующую серый фон от левой\верхней стороны обвязки.

Как быть? Наверняка есть адекватное валидное решение! Помогите пожалуйста)

[ZoNT]

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

[splean]

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

[Searcher]

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

[ZoNT]

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

А нет, они там действительно непрозрачные, это у меня монитор фиговый

Ну так не пользуйся таким фиговым методом создания скруглённых углов...

[splean]

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

Searcher, огромное спасибо, что-то в эту сторону я не думал совсем, помогло, работает.

Эммм, правда не в IE6, как обычно. Сейчас скину свою страничку

вот тут

простите что не почистил. В ИЕ6 криво, в ФФ отлично. Как быть?

[Searcher]

я делал самым тупым способом с абсолютным позиционированием так:

.topleft {
	background: url("ltkon.gif") no-repeat;
	position:absolute;
	left:-16px;
	top:-16px;
	width:16px;
	height:16px;
	}

.topcenter {
	background: url("tlne.gif") repeat-x;
	position: absolute;
	top:-16px;
	left:0;
	height:16px;
	width:100%;
	}

.topright	{
	background: url("rtkon.gif") no-repeat;
	position:absolute;
	left:100%;
	top:-16px;
	width:16px;
	height:16px;
	}

.midleft	{
	background: url("llne.gif") repeat-y;
	position:absolute;
	left:-16px;
	top:0;
	width:16px;
	height:100%;
	}

.midcenter	{
	background: url("nf.gif");
	position:absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	}

.midright	{
	background: url("rlne.gif") repeat-y;
	position:absolute;
	left:100%;
	top:0;
	width:16px;
	height:100%;
	}

.botleft {
	background: url("lbkon.gif") no-repeat;
	position:absolute;
	left:-16px;
	bottom:-16px;
	width:16px;
	height:16px;
	}

.botcenter {
	background: url("blne.gif") repeat-x;
	position: absolute;
	bottom:-16px;
	left:0;
	height:16px;
	width:100%;
	}

.botright	{
	background: url("rbkon.gif") no-repeat;
	position:absolute;
	left:100%;
	bottom:-16px;
	width:16px;
	height:16px;
	}

и все это таким макаром в коде:

<div class="container">
  <div class="topleft"></div>
  <div class="topcenter"></div>
  <div class="topright"></div>
  <div class="midleft"></div>
  <div class="midcenter"></div>
  <div class="midright"></div>
  <div class="botleft"></div>
  <div class="botcenter"></div>
  <div class="botright"></div>
</div>

.container естественно с position:relative;

.midcenter вам наверно не понадобится...

это работает везде

Edited January 13, 2009 by Searcher

[splean]

Да, вполне хорошее решение, спасибо, действительно работает везде.

Все по той же ссылке я залил легкую версию только с этим блоком.

HTML

<div class="menuitemcur">
<div class="menuitemcur_l"></div>
<div class="menuitemcur_r"></div>
Выгодыfsdfsdagsdf!!!!!!!!
</div>

CSS

.menuitemcur {
	position: relative;
	width: 110px;
	height: 18px;
	margin-left: 56px;
	padding-left: 5px;
	padding-top: 2px;
	color: white;
	font-size: 11px;
	font-family: Tahoma;
	font-weight: bold;
	background: url("submenu_bck.gif") 0px 0px repeat-x;
}

.menuitemcur_l {
	position: absolute;
	background: url("submenu_left.gif") no-repeat;
	left: -10px;
	top: 0px;
	width: 10px;
	height: 18px;
}

.menuitemcur_r {
	position: absolute;
	background: url("submenu_right.gif") no-repeat;
	left: 100%;
	top: 0px;
	width: 10px;
	height: 18px;
}

Теперь вопрос заключается в следующем. IE6 сейчас косячит как раз так, как мне надо, а именно растягивает блок с центральным фоном по длине текста - восклицательные знаки лежат в этом блоке, а в ФФ\опере они вылазят за границу блока. Как победить? Т.е. сейчас у меня ширина ограничена, но я не знаю сколько букв будет в этом пункте меню потом, а делать заведомо большой блок как то не хочется, не по фэншую это вроде)

[Searcher]

сделайте блок .menuitemcur растягивающийся по содержимому: уберите width и поставьте float:left; и clear:right; допустим...

[splean]

Все идеально. Нижайший поклон.

[Searcher]

Рад помочь