Меню

[Mr.Black]

Задача - зделать меню http://img832.imageshack.us/img832/9496/67702019.png

У меня получилось зделать почти все, кроме иконки снизу при a:hover , у меня исчезает. http://s2.itrash.ru/idb/b09595d403dad40b1b...Bezymyannyj.png

<div id="speedbar" >
		<div class="speedbarL" ></div>
		<div class="speedbarR" ></div>
		<div class="speedbarC" >
			<ul class="speedbar_menu" >
			<li><a href="" >Главная</a></li>
			<li><a href="" >О компании</a></li>
			<li><a href="" >Наши тарифы</a></li>
			<li><a href="" >Наши услуги</a></li>
			<li><a href="" >Контакты</a></li>
			</ul>
		</div>
	</div>

#speedbar { margin-top: -44px; position: relative; z-index: 1; }
.speedbarL { background: url('../images/speedbarL.png') no-repeat; width: 67px; height: 88px; float: left; }
	* html .speedbarL {
		margin-right: -3px;
	}
.speedbarC { background: url('../images/speedbarC.png') repeat-x; height: 88px; overflow: hidden; zoom: 1; }
.speedbar_menu { 
	list-style: none; 
	background: url('../images/speedbar_hr.png') left center no-repeat;
}
	.speedbar_menu li { 
		display: inline-block;
		background: url('../images/speedbar_hr.png') right center no-repeat;	
		padding: 36px 2px;
		margin-right: -4px;
	}
		.speedbar_menu a:hover { background: url('../images/speedbar_hover.png') center 40px no-repeat #dfe2e7; border-bottom: 1px solid #d4d7db; }
		.speedbar_menu a { font-weight: bold; text-transform: uppercase; color: #000; padding: 14px 48px; }


.speedbarR { background: url('../images/speedbarR.png') no-repeat; width: 44px; height: 88px; float: right; }
	* html .speedbarR {
		margin-left: -3px;
	}

Также в IE 6 .7 исчезли почти все меню http://s2.itrash.ru/idb/b09595d403dad40b1b...zymyannyj_1.png

Edited February 6, 2011 by Mr.Black

[deadrash]

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

[Mr.Black]

Галочка появляэться при наведении курсора.Как отдельным????

[sigma77]

Естественно будет исчезать

.speedbarC { background: url('../images/speedbarC.png') repeat-x; height: 88px; overflow: hidden; zoom: 1; }

[Mr.Black]

Картинка фона с теню http://s2.itrash.ru/idb/9315819c43dd38fbd7.../ospeedbarC.png

Edited February 6, 2011 by Mr.Black

[deadrash]

Галочка появляэться при наведении курсора.Как отдельным????

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

А если быть ещё точней, то картинка одна, просто показывается одновременно только одна её часть, при наведении мыши с треугольничком, без наведения без треугольничка.

[Mr.Black]

Ну а как зделать чтоб она не обрезалась????

[deadrash]

Ну а как зделать чтоб она не обрезалась????

Не совсем понял, чем она обрезается? Может ты имеешь ввиду что блок по высоте не расчитан на этот треугольник? Тогда просто высоту прибавь. Или я вопрос не правильно понял?

[Mr.Black]

Если б я знал чем обрезается темы б не создавал.

[deadrash]

Если б я знал чем обрезается темы б не создавал.

Вот на этом скриншоте http://s2.itrash.ru/idb/b09595d403dad40b1b...Bezymyannyj.png у тебя ничего не обрезается, кнопка показывается полностью, сверху зачем-то накладывается ещё один блок с маленькой картинкой треугольничка, для чего ты треугольничек делаешь отдельным блоком объяснить вменяемо можешь?

Насколько я понял у тебя кнопка это вот эта картинка http://s2.itrash.ru/idb/9315819c43dd38fbd7.../ospeedbarC.png да? Вот при наведении мышкой вместо неё показываешь вот эту картинку http://fiestakids.jino.ru/ospeedbarC.png

Мне казалось это самое простое что есть в вёрстке.

[Mr.Black]

Как то ты не так понял.

у меня есть меню (#speedbar) -http://s2.itrash.ru/idb/b6ed2dcd5049a64a926de8dcc97b86ec/oBezymyannyj_1.png

Вот как должно бить на макете при навадении курсора мишы - http://s2.itrash.ru/idb/b6ed2dcd5049a64a92...annyj_2.png.htm

У меня трикутник обрезаеться , не знаю по чему - http://s2.itrash.ru/idb/b6ed2dcd5049a64a92...zymyannyj_3.png

.speedbar_menu a:hover { background: url('../images/speedbar_hover.png') center 40px no-repeat #dfe2e7; border-bottom: 1px solid #d4d7db; } - как раз и отвечает за фон и угольние при наводке

[deadrash]

Этот треугольничек у тебя идёт отдельным блоком от кнопки?

Покажи что это за картинка speedbar_hover.png

А ещё лучше страничку скинь с картинками.

[Mr.Black]

Сайт только на компе. - держи

Edited February 6, 2011 by Mr.Black

[deadrash]

Да скинь просто страничку с компа, через файлообменник, проще будет.

[Mr.Black]

Закрыто!

Edited February 7, 2011 by Mr.Black

[deadrash]

Закрыто!

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