Фоны навигационных ссылок CSS3

Я пытаюсь иметь активное состояние, чтобы показать пользователю, на какой странице он находится. Я создал класс div «nav-active» вокруг тега привязки, как показано ниже.

<li><div class="nav-active"><a href="index.html">Blog</a></div></li>

Я сделал это, чтобы сделать размер фона динамическим в зависимости от того, сколько символов было в навигационной ссылке.

.nav-active {
background: #ff4b33; /* Old browsers */
background: -moz-linear-gradient(top,  #ff4b33 0%, #ca2913 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff4b33), color-stop(100%,#ca2913)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ff4b33 0%,#ca2913 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ff4b33 0%,#ca2913 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ff4b33 0%,#ca2913 100%); /* IE10+ */
background: linear-gradient(top,  #ff4b33 0%,#ca2913 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4b33', endColorstr='#ca2913',GradientType=0 ); /* IE6-9 */

height:70px;
margin-top: -30px;
padding: 0 15px;

из-за заполнения, в зависимости от того, на какой странице я нахожусь, ссылки перемещаются.

Я уверен, что есть лучший способ сделать это, вопрос в том, как?

Любая помощь будет принята с благодарностью.


css background hyperlink nav
person DevNinja    schedule 04.12.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Примените фон непосредственно к стилю ссылки, например:

<li><a class="nav-active" href="index.html">Blog</a></li>

Чтобы ваши ссылки не менялись в размере в зависимости от того, на какой странице вы находитесь, настройте позиционирование для всех ваших ссылок и только фон для .navactive:

#nav li {
    position: float;
}

#nav li a {
    display: block;
    padding: 0 15px;
    ...
}
#nav li a.nav-active {
    -webkit-linear-gradient(top,  #ff4b33 0%,#ca2913 100%); 
    ...
}
person Kevin Harson    schedule 05.12.2011