Мягкая тень вокруг li

[Вадим]

Возник реальный вопрос.

Png-прозрачность и все-такое уже умею.

Не могу понять как сделать растягивающиеся кнопки с тенью через li.

Вот пример:

[Justnewone]

3 картинки, левой (L) правое(R ) и 1px верт. серединки (M), 3 контейнера, на LI повторяющийся M в бекграунд, еще 2 контейнера внутри с соответствующими бекграундами и отрицательными маргинами. недостаток - не масштабируется по высоте. Если по высоте, то все жуть как усложняется, лень писать, но тоже реально, на основе этого же способа наложения, полагаю, Вы догадаетесь. =)

Edited July 23, 2009 by Justnewone

[Вадим]

3 картинки, левой (L) правое(R ) и 1px верт. серединки (M), 3 контейнера, на LI повторяющийся M в бекграунд, еще 2 контейнера внутри с соответствующими бекграундами и отрицательными маргинами. недостаток - не масштабируется по высоте. Если по высоте, то все жуть как усложняется, лень писать, но тоже реально, на основе этого же способа наложения, полагаю, Вы догадаетесь. =)

А можно обойтись без 3 блоков? Возможно li здать сразу 3 картинки? Или это фантастика?

[Great Rash]

В CSS3 возможно, но

[Justnewone]

А можно обойтись без 3 блоков? Возможно li здать сразу 3 картинки? Или это фантастика?

Можно, предположу, но это ваще фейк, поместить две картинки прям как имадж, с соотвествующими отриц-ми маргинами, а M также у LI, между картинок надпись, но это гавно.

Можно двумя тегами... хотя мне в голову этот способ первым никогда не приходит, не смотря на то что спрайт. http://chikuyonok.ru/2009/04/buttons-reloaded

[Вадим]

В CSS3 возможно, но

А когда css3 выйдет?

Можно, предположу, но это ваще фейк, поместить две картинки прям как имадж, с соотвествующими отриц-ми маргинами, а M также у LI, между картинок надпись, но это гавно.

Можно двумя тегами... хотя мне в голову этот способ первым никогда не приходит, не смотря на то что спрайт. http://chikuyonok.ru/2009/04/buttons-reloaded

изучаю..

как-то не получается ничего применить к li..

[Great Rash]

А когда css3 выйдет?

Неправильно вопрос задаете. Надо спрашивать так: а когда браузеры начнут поддерживать CSS3? А когда ИЕ начнет поддерживать?

Отвечаю, у цсс3 пока нет официального статуса, поэтому пока браузерами новые стили поддерживаются частично (на сколько я знаю тут впереди планеты всей Сафари идет). А вот ИЕ, видимо никогда не будет поддерживать CSS3 (думаю, из-за того, что они готовят подлянку в виде Газели и ИЕ9, судя по всему, уже не будет).

[Вадим]

Неправильно вопрос задаете. Надо спрашивать так: а когда браузеры начнут поддерживать CSS3? А когда ИЕ начнет поддерживать?

Отвечаю, у цсс3 пока нет официального статуса, поэтому пока браузерами новые стили поддерживаются частично (на сколько я знаю тут впереди планеты всей Сафари идет). А вот ИЕ, видимо никогда не будет поддерживать CSS3 (думаю, из-за того, что они готовят подлянку в виде Газели и ИЕ9, судя по всему, уже не будет).

жесть.. что же делать?! это неправильно!!!

[LunatiK]

насколько я понимаю если у вас это кнопка, то полюбому в <li> будет ещё и <a> это уже минус один, если усть придел длины то правую<li> картинку можно в бэкграунд кинуть длинную(до максимально придельного текста), а слева<a> короткую.

Не супер унпиверсально , но в кретической ситуации это выход.

[Вадим]

насколько я понимаю если у вас это кнопка, то полюбому в <li> будет ещё и <a> это уже минус один, если усть придел длины то правую<li> картинку можно в бэкграунд кинуть длинную(до максимально придельного текста), а слева<a> короткую.

Не супер унпиверсально , но в кретической ситуации это выход.

 <div id="header">
  <img src="img/logo.png" alt="" />
  <ul>
   <li><a href="#" id="self"><span>Главная</span></a></li>
   <li><a href="#"><span>Программа</span></a></li>
   <li><a href="#"><span>Услуги</span></a></li>
   <li><a href="#"><span>Клиенты</span></a></li>
   <li><a href="#"><span>Контакты</span></a></li>
  </ul>
 </div>

#header {
	position: relative;
	height: 622px;
	background:url(../img/mainimage.jpg) no-repeat 0 0;
	}
#header img {
	width: 322px;
	height: 55px;
	margin: 67px 40px;
	}
#header ul {
	list-style-type: none;
	padding: 0;
	margin: 0 auto -9px auto;
	text-align: center;
	float: left;
	color: #787878;
	position: absolute;
	bottom: 0%;
	left: 0%;
	}
#header ul li {
	float: left;
	margin: 0;
	padding: 0;
	background:url(../img/li1.png) no-repeat 0 0;
	}
#header ul li a {
	padding: 0px 10px 9px 10px;
	display: block;
	font-size: 12px;
	background:url(../img/li2.png) no-repeat 100% 0;
	}
#header ul li a span {
	padding: 14px 10px 9px 10px;
	display: block;
	background:url(../img/li.png) repeat-x 0 0;
	}

А так нормально? Можно ли это сделать лучше и без использования span?

[Justnewone]

id="self" я бы сменил на class="self"

[s0rr0w]

Два контейнера, одна картинка. Больше не надо.

[Вадим]

сейчас столкнулся с очередной проблеммой в ie6. ведь для png я не могу указать размер, т.к. он плавающий. поэтому эказывая png как background он слетает куда-то в ie6. Об этом все пишут, что нужно указаывать размер. А что делать, если я его не знаю?

Или тупо забить на IE6? но по версии Яндекса таких дебилов с ie6 56%...

[Justnewone]

сейчас столкнулся с очередной проблеммой в ie6. ведь для png я не могу указать размер, т.к. он плавающий. поэтому эказывая png как background он слетает куда-то в ie6. Об этом все пишут, что нужно указаывать размер. А что делать, если я его не знаю?

Че Вы имели ввиду? Может ресь о том, что PNG-24 не поддерживается (прозрачность)?

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

Или тупо забить на IE6? но по версии Яндекса таких дебилов с ie6 56%...

Полагаю, что их около 20%, судя по другим статистикам (не одной).

[Вадим]

Полагаю, что их около 20%, судя по другим статистикам (не одной).

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

[Justnewone]

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

Есть еще конторы, где не положено обновлять, и все тут. Капец. Условия аккредитации.

[Вадим]

Че Вы имели ввиду? Может ресь о том, что PNG-24 не поддерживается (прозрачность)?

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

Полагаю, что их около 20%, судя по другим статистикам (не одной).

Чтобы небыло такой фегни, нужно задавать width и height для li. А я этого сделать не могу, так как размер плавающий. Что тут можно посоветовать?

[Justnewone]

Чтобы небыло такой фегни, нужно задавать width и height для li. А я этого сделать не могу, так как размер плавающий. Что тут можно посоветовать?

Я понимаю смутно. Задайте последнему блочному в дереве паддинги.