Сообщений в теме: 4

[TAD-jik]

вот сылка на мой сайт http://shop-44954.storeland.ru/ там сразу поймете что я хочу изменить а выглядить должно вот так вот


исходники

Прикрепленные изображения

• 
• 
• 

[Vaccina]

Если вы взялись верстать дизайн - это предполагает что у вас есть необходимые навыки. В классе стилей

#mainNav table td div {
	background: url("http://files.storeland.ru/web/upload/sitefiles/1/76/75127/nav_item_bg.png") repeat-x scroll left bottom #FFFFFF;
	float: left;
	font-size: 1.25em;
	height: 37px;
	line-height: 1.3333em;
} 

Достаточно его заменить на

#mainNav table td div {
	background: url("http://files.storeland.ru/web/upload/sitefiles/1/76/75127/nav_item_bg.png") no-repeat scroll left bottom #FFFFFF;
	float: left;
	font-size: 1.25em;
	height: 37px;
	line-height: 1.3333em;
	margin-top: -5px;
}

а в классе

#mainNav table td div a:link, #mainNav table td div a:visited {
	background: url("http://files.storeland.ru/web/upload/sitefiles/1/76/75127/nav_item_bg.png") repeat-x scroll left bottom transparent;
	color: #666666;
	display: block;
	height: 37px;
	padding: 4px 10px 0;
}

убрать background

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

1) Использовать прямоугольное изображение + css свойство border-radius для закругления углов.
2) Использовать 2 изображения (левое закругление и удлинение полосы до макс. пункта + правое закругление для закрытия блока) все это полностью на css
3) Использовать библиотеку JavaScript(jQuery) и 2 или 3 изображения (закругления и полосу). Данные библиотеки можно найти в интернете.

[TAD-jik]

тоесть получаеться примерно левая сторона с закругление и продолжение линии так что ле

[TAD-jik]

нарисуйте примерно в паинте как мне правильно в фотошопе нарисовать

Сообщение отредактировал TAD-jik: 20 Январь 2012 - 16:03

[TAD-jik]

TAD-jik (20 Январь 2012 - 16:03) писал:

нарисуйте примерно в паинте как мне правильно в фотошопе нарисовать

Все сделал спасибо помогли   кому надо вот посмотри те пример http://shop-44954.storeland.ru/ пишите помогу

/* main navigation ---------------------------------------------------------------- */
#mainNav {position: absolute;left: 5px;bottom: 0;height: 39px;width: 950px; background: url("http://files.storeland.ru/web/upload/sitefiles/1/76/75123/nav_bg.jpg") no-repeat;}
#mainNav table {float:left;border-collapse: collapse;border-spacing: 0;background: url("http://files.storeland.ru/web/upload/sitefiles/1/76/75124/nav_bg_right.gif") no-repeat bottom right;padding: 5px 5px 0 0;height: 30px;margin:auto;}
#mainNav table td {padding:5px 0 0 2px;}
#mainNav table td.first {padding-left: 5px;}
#mainNav table td.last {padding-right: 5px;}
#mainNav table td div {background: url("http://files.storeland.ru/web/upload/sitefiles/1/77/76180/nav_item_bg.gif") no-repeat scroll left bottom;
	float: left;
	font-size: 1.25em;
	height: 37px;
	line-height: 1.3333em;
	margin-top: -2px;
	}
#mainNav table td div a:link,
#mainNav table td div a:visited {background: url("http://files.storeland.ru/web/upload/sitefiles/1/77/76180/nav_item_bg.gif") repeat-x scroll left bottom transparent;
	color: #666666;
	display: block;
	height: 30.5px;
	padding: 4px 10px 0;
	border-radius: 10px 10px 0 0;
	border-color: #63B2D3;
	border-width: 1px;
	border-style: solid;
	}
#mainNav table td div a.selected,
#mainNav table td div a:hover,
#mainNav table td div a:active {color: #D0431D;text-decoration: none;background-position: bottom right;}

Сообщение отредактировал TAD-jik: 20 Январь 2012 - 18:35