Jump to content
  • 0

как выделить текущий элемент


mstdmstd
 Share

Question

Всем привет,

Есть сайт http://oherron.com/backend.php с меню в левой счасти

Это меню реализовано с помошью картинки http://oherron.com/i...ns-3-states.png

и следующих стилей :


#category-buttons {
padding:0;
margin:0;
list-style:none;
}
#category-buttons ul {
margin:0;
padding:0;
position:relative;
left:14px;
top:22px;
}
#category-buttons li {
margin:0;
padding:3px 0 3px 0;
list-style:none;
}
#category-buttons a {
display:block;
width:128px;
height:28px;
text-decoration:none;
/* background:url("backend-buttons-3-states.png") no-repeat; */
background:url('../images/backend-buttons-3-states.png') no-repeat;
}
#category-buttons li a span {
display:none !important;
}
a#menu-item1 {
background-position:0 0;
}
#menu-item1:hover {
background-position:0 -28px;
}
#currentpage1 a {
background-position:0 -56px;
}
a#menu-item2 {
background-position:-162px 0px;
}
#menu-item2:hover {
background-position:-162px -28px;
}
#currentpage2 a {
background-position:-162px -56px;
}

Вопрос в том как выделить болдом(ли как-то иначе) текущий элемент?

В зависимости от текущего урла записать класс active-left-sidebar-menu в ссылку несложно. Сейчас для примера верхний элемент имеет этот класс и этот класс описан как:

.active-left-sidebar-menu {
margin-left:20px;
background-position:0 -28px;
}

Поэтому этот элемент сдвинут слева на 20 пикселей Но цвет и вес фонта не срабатывают - так как в основе картинка. Надо в картинке выделить 3ю жирную надпись? А как ?

Я прописал как и для элемента #menu-item1:hover {

background-position:0 -28px;

Но это не помоголо. А как правильно?

Верстка эта не моя - не силен я в таких тонкостях...

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0
Это меню реализовано с помошью картинки http://oherron.com/i...ns-3-states.png

...

Верстка эта не моя - не силен я в таких тонкостях...

Пинать под зад того, кто делал вёрстку, чтобы текст был текстом. И тогда нормально навесить стиль font-weight на текст.

Либо уж, если текст не сделать текстом, делать вот так: http://s018.radikal.ru/i524/1308/58/4e53769eae0a.png (читайте про специфичность css-селекторов).

Edited by antonKar
Link to comment
Share on other sites

  • 0

"Пинать под зад " совет хороший ...

А что нужно читать про "специфичность css-селекторов" ?

Применив класс .active-left-sidebar-menu к текущей ссылке в firebug я все таки вижу что применяется свойство background-position родительского div-а

#category-buttons a { . А как сделать чтобы применялось свойство background-position свмого элемента?

http://s020.radikal....6c6aa8fb9e8.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy