Активная навигация

Question

Активная навигация

0

Я пытаюсь справиться с гибкими макетами.

Активная ссылка на панели навигации не работает, и я не вижу, что я сделал неправильно.

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

Было бы очень признательно, если бы кто-нибудь мог взглянуть на код.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Responsive Layout</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <meta charset ="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

<body class="body">
    <header class="main-header">
        <img src="Images/logo.gif" alt="Logo">
        <nav><ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul></nav>
    </header>


</body>

</html>

CSS:

body{
    background-image: url('Image/bg.png');
    color: #000305;
    font-size: 87.5%;
    font-family: Arial;
    line-height: 1.5;
    text-align: left; 
        margin: 0;
    padding: 0;
    }

a {
    outline: 0;
    }

a img {
    border: 0px; 
    text-decoration: none;
}

a:link, a:visited{
    color: #CF5C3F;
    padding: 0 1px;
    text-decoration: none;

}

a:hover, a:active{
    background-color: #CF5C3F;
    color: #fff;
    text-decoration: none;
}

.body{
    margin: 0 auto; 
    width: 70%;
    clear: both; 
}

.main-header img{
    width: 30%;
    height: auto; 
    margin: 2% 0;
}

.main-header nav{
    background: #666;
    font-size: 1.143em;
    height: 40px;
    line-height: 30px;
    margin: 0 auto 30px auto;
    text-align: center;
    border-radius: 5px; 
}

.main-header nav ul{
    list-style: none; 
    margin: 0 auto;
}

.main-header nav ul li{
    float: left; 
    display: inline; 
}

.main-header nav a:link, .main-header nav a:visited{
    color: #fff;
    display: inline-block;
    height: 30px;
    padding: 5px 23px;
    text-decoration: none;
}

.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
    background: #CF5C3F;
    color: #fff;
    text-shadow: none !important;
}
.main-header nav li a {
    border-radius: 5px;
}

.main-header img {
    width: 30%;
    height: auto;
    margin: 3% 0;
}

user3043645 11 дек. 2013, в 00:08

Источник

0

Какая ссылка не работает? Как это не работает? Что это должно делать? Я думаю, что вам нужно урезать свой код только до соответствующих разделов.
Dryden Long 10 дек. 2013, в 22:41
1

Спасибо за ответ. Я урезал это. Я хотел бы, чтобы панель навигации выделяла текущую активную страницу. В этом случае активной страницей является домашняя страница. На данный момент он отображает серый фон, однако мне бы хотелось, чтобы он был оранжевым.
user3043645 10 дек. 2013, в 22:44
0

.active { background: #CF5C3F; } или .active a { background: #CF5C3F; }
mdesdev 10 дек. 2013, в 23:11

Показать ещё 1 комментарий

Теги:

html

css

html5

css3

responsive-design

2 ответа

-2

Добавьте класс к вашему nav, скажем, "навигация"

затем в css add,

.nav ul li a:current {
   //code here
}

Дайте мне знать, как вы поживаете.

DommT 10 дек. 2013, в 20:50

1

Ему не нужно добавлять класс к элементу nav и :current псевдокласс не существует.
mdesdev 10 дек. 2013, в 23:08

Ещё вопросы

Какая ссылка не работает? Как это не работает? Что это должно делать? Я думаю, что вам нужно урезать свой код только до соответствующих разделов.
Спасибо за ответ. Я урезал это. Я хотел бы, чтобы панель навигации выделяла текущую активную страницу. В этом случае активной страницей является домашняя страница. На данный момент он отображает серый фон, однако мне бы хотелось, чтобы он был оранжевым.
.active { background: #CF5C3F; } или .active a { background: #CF5C3F; }
Ему не нужно добавлять класс к элементу nav и :current псевдокласс не существует.

Nic Wortel · Accepted Answer · 2013-12-10T21-04-00.000Z

Кажется, это часть CSS, где вы пытаетесь настроить таргетинг на кнопку "active":

.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
    background: #CF5C3F;
    color: #fff;
    text-shadow: none !important;
}

Вы нацеливаете элементы с классом mainHeader, но ваш элемент <header> имеет класс main-header.

В вашем CSS замените все вхождения .mainHeader на .main-header и все должно работать.

Большое вам спасибо за вашу помощь. Он отлично работал после редактирования. Иногда хочется найти иголку в стоге сена. Тем не менее, я уверен, что как только я лучше пойму CSS, я смогу обнаружить эти ошибки.
Ну, иногда это просто помогает, если кто-то еще смотрит на это по-новому. Но вы можете попытаться уменьшить эти ошибки, следуя последовательному стилю кодирования - например, всегда используя подчеркивание.