Как лучше сделать такой див ?

[topos]

Есть div

.ja-front_page_menu_tab{
float:left;
margin-right:13px;
margin-bottom: 20px;
position:relative;}
.active-cat{
height:139px;
position:absolute;
top:0;
width:155px;
z-index:99999;}
.active-cat a{
height:139px;
display:block;

width:155px;
}
.active-cat:hover, .active-cat:active, .active-cat:focus{
background: url(../images/active-cat.png) bottom right no-repeat;}
.cat-hd a:hover,.cat-hd a:active,.cat-hd a:focus {
color: #FFFFFF;
background: #9c95df;
text-decoration: none; 
padding: 3px;}
.cat-hd{
text-align: center;
font-size:10px;
letter-spacing:0.8px;
margin-top: 5px;
}

Что делает сейчас:

1) При наведение на текст, текст меняет стиль

2) При наведении на картинку сверху становиться видимым div с полупрозрачным фоном.

3) Все ссылки одинаковые, т.е. при щелчке по картинке(а в данном случае div-у с абсолютным позиционированием) и щелчке по ссылке с текстом, попадаем в одно и тоже место.

Что нужно:

1) Сделать чтобы при наведении на тест\картинку менялся стиль текста и на картинку сверху накладывалась еще одна с рисунком

2) Ну и при щелчке на картинке\тексте попадали в раздел куда нужно.

Таких блоков много. Как такое организовать? Можно ли обойтись без java?

[allplayer]

Ну чтоб менялся стиль текста:

#div a:hover {font-style:oblique;}

А с картинкой попробуй сделать что-то с бекграундом ссылки.

Тоесть впихни её в див и создай соответствующюю запись в ксс.

[topos]

#div a:hover {font-style:oblique;}

Это уже есть

.cat-hd a:hover,.cat-hd a:active,.cat-hd a:focus {
color: #FFFFFF;
background: #9c95df;
text-decoration: none;
padding: 3px;}

Сделать по отдельности с помощью css и :active нетрудно. А можно ли без java сделать чтоб при наведении на картинку выделялся и текст тоже и наоборот(при наведении на текст чтото происходило с картинкой)? Блок можно переделать. Если глянуть сюда http://www.bellefille.ru/ там на главной как раз такие блоки, если поводить мышкой над ними то текст и картинка меняются отдельно друг от друга, а нужно чтоб они были связаны. И еще трюк с div-ом с абсолютным позиционированием в котором в фоне нужная картинка в ие не работает

[topos]

Сделал Посидел подумал и сделал.

<div class="cat_show_id" >

      <a class="category" title="" href=""> 
			<div class="act-cat2"></div>
      <img src="" />

			<div> имя категории</div>

		 </a>
	</div>

#a.category {
  position:relative;
	z-index:7
}

#a.category:hover,
#a.category:focus,
#a.category:active {
	color: #FFFFFF;
	outline: none;
	text-decoration: none;
}
#a.category:hover div,
#a.category:focus div,
#a.category:active div{
  background: #9c95df;}
# a.category .act-cat2{
  position:absolute;
  width: 153px;
  height:139px;
  z-index:6;
}
#a.category:hover .act-cat2,
#a.category:focus .act-cat2,
#a.category:active .act-cat2{
background: url(../images/active-cat.png) bottom right no-repeat;
}
#a.category img{
position: relative;
z-index: 5;}

[allplayer]

Да, Да! Я это и имел ввиду!

[psywalker]

Вот эта запись аукнется тебе в будущем друг.

<a class="category" title="" href="">
<div class="act-cat2"></div>
<img src="" />

<div> имя категории</div>

</a>

[topos]

Чем?

[rash]

Блочных элементов в ссылке быть не должно.

Во всяком случае пока еще.

[topos]

Тогда как по другому с помощью html+css это можно сделать?

[allplayer]

Ставь спан <span>

и в ксс #div (если ты это писал) поменяй на #span.

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

Вот сейчас сам сижу делаю сайт "Правильным"

Edited November 1, 2010 by allplayer