Нестандартная задача :huh:

[bravada j]

Всем привет!

По сути дела:

Есть "шапка", сразу под шапкой располагается меню. Рисунок в шапке задан через background, и имеет высоту "с запасом", так что его нижняя часть прячется под дивом #menu. Вот, собственно говоря, сам макет:

К пунктам меню (li) применяется псевдокласс hover с белым бэкраундом. Каким образом можно сделать так, что бы при наведении курсора на пункт меню, вместо белого бэкграунда просматривалась бы скрытая часть хэдэра (облака). Пытался решить это задачу через opacity, но зашёл в тупик - к чему её применять? Вот соответствующие фрагменты CSS:

#header { 
	background: url(images/layer1.gif) #455A79;
	height: 116px;
	padding: 15px 0px 0px 0px;
		 }
........

#menu {
	font-family: verdana, "Microsoft Sans Serif", Times, serif;
	font-size: 8pt;
	background-color: #D10000;
	margin-top: 1px;
	width:900px; 
	height:23px;
		border-bottom: 1px solid #fff;
		font-weight: bold;
}


#menu ul {
	margin: 0px;
	padding: 5px;
	list-style: none;
	text-align: center;
}

#menu li {
	display: inline;
}

#menu a {
	padding: 5px 15px;
	text-decoration: none;
	color: #FFFFFF;
}

#menu a:hover {
	background-color: #fff;
	color:#D10000;
}

Возможно ли решить эту задачу без применения JavaScript (которого я не знаю )?

[Searcher]

У #menu надо убрать фон.

Фон задавать для #menu a, а для #menu a:hover задать background-color: transparent;

А левый утступ у меню можно сделать добавив в #menu что-то вроде border-left: 300px #D10000 solid;

[bravada j]

  Searcher said:

У #menu надо убрать фон.

Фон задавать для #menu a, а для #menu a:hover задать background-color: transparent;

А левый утступ у меню можно сделать добавив в #menu что-то вроде border-left: 300px #D10000 solid;

Спасибо Searcher. Должен признаться, что сходу прочитав Ваш совет - я очень обрадовался, но к несчастью, это не решило проблему.

Вот листинг согласно Вашей директиве:

#menu {

font-family: verdana, "Microsoft Sans Serif", Times, serif;

font-size: 8pt;

margin-top: 1px;

/* здесь было: background-color: #D10000; */

width:900px;

height:23px;

border-bottom: 1px solid #fff;

font-weight: bold;

}

...

#menu a {

padding: 5px 15px;

text-decoration: none;

color: #fff;

background-color: #D10000; /* пробовал также краткий синтаксис - background: #D10000; */

}

#menu a:hover {

background-color: transparent; /* было: #fff; */

color:#D10000;

Вот что у меня получается согласно этому листингу:

Может я что-то напутал?

Edited March 11, 2009 by bravada j

[rus]

Есть интересная статейка, возможно поможет...

[bravada j]

  rus said:

Есть интересная статейка, возможно поможет...

Спасибо RUS, сложновато (английский хромает), попробую разобратся

[rus]

  bravada j said:

Спасибо RUS, сложновато (английский хромает), попробую разобратся

Ну, для таких целей можно использовать переводчик от гугл.

Коряво, но более-менее понятно.

[Nekromancer]

  Searcher said:

У #menu надо убрать фон.

Фон задавать для #menu a, а для #menu a:hover задать background-color: transparent;

А левый утступ у меню можно сделать добавив в #menu что-то вроде border-left: 300px #D10000 solid;

может не убирать фон у меню а просто сделать #menu li:hover {background-color: transparent;}

[Searcher]

  Nekromancer said:

может не убирать фон у меню а просто сделать #menu li:hover {background-color: transparent;}

ну как не убирать фон? у #menu свой фон и он перекрывает то, что под этим блоком. А li:hover во-первых, не понимает ie6 и фон li:hover не влияет на фон #menu

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

Edited March 12, 2009 by Searcher

[bravada j]

  Searcher said:

ну как не убирать фон? у #menu свой фон и он перекрывает то, что под этим блоком. А li:hover во-первых, не понимает ie6 и фон li:hover не влияет на фон #menu

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

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

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

Спасибо

[Searcher]

Удачи ))