Горизонтальное меню

[okunev2]

Сделал горизонтальное меню с помощью списка li, но не пойму как его растянуть под 100% родительского блока и между каждым меню сделать границы в виде рисунка:

#menu_header1 {
   height: 32px;
   display: block;  
   background: url(images/bg2.jpg) top left repeat-x;
}

#menu_header2 {
   width: 991px;
	text-align: center;
	cursor: pointer;
}

#menu_header2 li {
	float: left;
	padding: 0 0;
}

#menu_header2 li a {
	float: left;
	padding: 8px 50px;
	text-decoration: none;
	color: #695737;
	font-family: Tahoma;
	font-size: 0.8em;
	font-weight: lighter;
}


#menu_header2 li a:hover {
	background: url(images/bg3.jpg) top center repeat-x;
	color: #695737;
	/*font-weight: bold;*/
}

[okunev2]

искал в сети решения, не нашел

[klierik]

ширины родительского блока = 100%

а то есть, ширина одной кнопки равняется 100%/Х, где Х - количество кнопок.

[okunev2]

ширины родительского блока = 100%

а то есть, ширина одной кнопки равняется 100%/Х, где Х - количество кнопок.

спасибо, вроде получилось:

#menu_header1 {
	 width: 100%;
	 height: 32px;
	 display: block;
	 background: url(images/bg2.jpg) top left repeat-x;
}

#menu_header2 {
	 text-align: center;
	 cursor: pointer;
}

#menu_header2 li {
	 width: 10%;
	 float: left;
	 padding: 0 0;
}

#menu_header2 li a {
	 text-decoration: none;
	 color: #695737;
	 font-family: Tahoma;
	 font-size: 0.8em;
	 font-weight: lighter;
}


#menu_header2 li a:hover {
	 background: url(images/bg3.jpg) top center repeat-x;
	 color: #695737;
	 /*font-weight: bold;*/
}

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

[klierik]

li a {display: block; text-align: center; padding: 8px 0;}
   li a:hover { ... }

значения полей выставляем соответствующие

[okunev2]

li a {display: block; text-align: center; padding: 8px 0;}
   li a:hover { ... }

значения полей выставляем соответствующие

делал, так,но чот не то выходит:

Все гуд, забыл в li a это:

display: block;

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

И в ИЕ один косячек, в конце всего списка, когда активно последнее меню, то спрва просвет в один пиксель.

[okunev2]

не пойму как сделать это:

1) как при hover по бокам блока справа и слева по высоте растянуть градиент в 2 пикселя?

2) как между списками поставить разделитель между блоками в виде такой картинки и выравнить по вертикали по центру?

#menu_header1 {
	 width: 100%;
	 height: 32px;
	 background: url(images/bg2.jpg) top left repeat-x;
	 text-align: center;
}

#menu_header2 {
	 text-align: center;
	 cursor: pointer;
	 padding:0;
}

#menu_header2 li {
	 width: 10%;
	 float: left;
}

#menu_header2 li a {
	 display: block;
	 padding: 8px 0;
	 text-decoration: none;
	 color: #695737;
	 font-family: Tahoma;
	 font-size: 0.8em;
	 font-weight: lighter;
}


#menu_header2, li a:hover {
	 display: block;
	 background: url(images/bg3.jpg) top center repeat-x;
	 color: #695737;
	 /*font-weight: bold;*/
}

[klierik]

Вот Вам пример.

думаю все понятно...

develope.zip

[okunev2]

Вот Вам пример.

думаю все понятно...

спасибо, за хороший пример, но не знаю как делать другое, гляньте плиз 7 сообщение

[okunev2]

не пойму как сделать это:

1) как при hover по бокам блока справа и слева по высоте растянуть градиент в 2 пикселя?

2) как между списками поставить разделитель между блоками в виде такой картинки и выравнить по вертикали по центру?

#menu_header1 {
	 width: 100%;
	 height: 32px;
	 background: url(images/bg2.jpg) top left repeat-x;
	 text-align: center;
}

#menu_header2 {
	 text-align: center;
	 cursor: pointer;
	 padding:0;
}

#menu_header2 li {
	 width: 10%;
	 float: left;
}

#menu_header2 li a {
	 display: block;
	 padding: 8px 0;
	 text-decoration: none;
	 color: #695737;
	 font-family: Tahoma;
	 font-size: 0.8em;
	 font-weight: lighter;
}


#menu_header2, li a:hover {
	 display: block;
	 background: url(images/bg3.jpg) top center repeat-x;
	 color: #695737;
	 /*font-weight: bold;*/
}

чот я не соображу как это сделать

[klierik]

я б это сделал изначально если б понял что именно имеется ввиду.

что такое

растянуть градиент в 2 пикселя?

и

как между списками поставить разделитель между блоками в виде такой картинки и выравнить по вертикали по центру?

какими списками? тут только один список, вроде.

опишите более понятно проблему, пожалуйста.

[okunev2]

у меня есть картинка в два пикселя шириной и 7 пикселей высотой, её нужно поставить между блоками меню вертикали по центру - это показано на рисунке стрелочкой с цифрой 2 (но когда hover, нужно чтобы эта картинка исчезали)

и есть ещё одна картинка в два пикселя шириной и 32 высотой, вот её нужно встаить справа и слева от блока при hover внутри.

а если точней вот рисунок:

[klierik]

возможно как-то так?

только тут границы а не градиент.

я знаю как сделать для гардиента, но под IE6 надо подключать hover специально.

develope.zip

[okunev2]

возможно как-то так?

только тут границы а не градиент.

я знаю как сделать для гардиента, но под IE6 надо подключать hover специально.

				ul.menu a:hover {
					background: url(images/bg3.jpg) 0 0 repeat-x;
					margin: 0 -1px;
	 				color: #695737;
	 				font-weight: bold;
					border-left: 2px solid #333;
					border-right: 2px solid #333;
					z-index: 2;

как бы здесь вместо правого и левого border прижать две картинки к этим двум краям? а то эти картинки в градиенте и шириной 2 пикселя

[klierik]

для этого надо заменить фоновый рисунок, который висит на <li>

то есть li:hover { ... }

указываем линк на рисунок новый...

тогда не нужны правила:

margin: 0 -1px;
border-left: 2px solid #333;
border-right: 2px solid #333;
z-index: 2;

но li:hover не работает по-нормальному в ИЕ6

[andrums]

как бы здесь вместо правого и левого border прижать две картинки к этим двум краям? а то эти картинки в градиенте и шириной 2 пикселя

А что если с помощью java-script решить эту проблему.

Вставить между кнопками rollover-объекты и функцией менять их.

Грузновато, конечно, но будет как в условии...

[klierik]

под ИЕ6 есть expression

но кажется лучше это сделать через jQuery

меньше нагрузки