Навигационная панель не работает

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

Это то, с чем я столкнулся. Моя панель навигации не работает, и я не уверен, почему. Я выяснил, что это работает, когда я удаляю index.css и оставляю navbar.css.

Это мой index.css.

html { 
    width: 100%; 
    height: 100%; 
    background: url("/images/background.jpg") center center no-repeat; 
} 
.responsive-container { 
    width: 100%; 
    border: 1px solid black; 
} 
.img-container { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
.text { 
    font-family: Helvetica, Arial, sans-serif; 
    color: #e6e6e6 !important; 
}

И это мой navbar.css

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 
li { 
    float: left; 
} 
li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 
li a:hover { 
    background-color: #111; 
}

И, наконец, это мой index.html

<head> 
    <link rel="shortcut icon" href="/favicon.ico"> 
    <title>&lrm;</title> 
    <link rel="stylesheet" type="text/css" href="/stylesheets/index.css"> 
    <link rel="stylesheet" type="text/css" href="/stylesheets/navbar.css"> 
</head> 
<body> 
    <ul class="text"> 
    <li><a class="active" href="/pwgen">Password Generator</a> 
    </li> 
    <li><a href="http://thejaffaking.imgur.com">Imgur</a> 
    </li> 
    </ul> 
    <div class="responsive-container"> 
    <div class="container"></div> 
    <div class="img-container"> 
     <a href="https://www.overbuff.com/players/pc/TheKingJaffa-2542"> 
     <img src="/images/logo.png" alt="logo" /> 
     </a> 
    </div> 
    </div> 
</body>

Что я прошу немного помощи о том, почему это не работает должным образом. Я предполагаю, что это что-то в моем index.css, но я не уверен, что это такое.

Извините, если это достаточно очевидно, и я не думаю вещи через

источник

2017-01-08 TheKingJaffa

это происходит потому, что .img-контейнер - это DIV охватывает всю страницу (абсолютные и слева, справа, сверху, снизу равны нулю), поэтому ваши якоря не запускаются путем наведения. Что вы хотите сделать с логотипом png? Задний план? или логотип в левом верхнем углу? В любом случае, вы знаете, почему, но вам нужно решить, что делать с логотипом, чтобы оно могло быть организовано так, как вам нужно. – smozgur

@smozgur мой сайт iskingjaffa.github.io если это делает его очевидным – TheKingJaffa

да, @bulldozer ответ будет отлично работать. Но хорошо знать, почему это происходит - особенно для нового предмета. – smozgur

Вашего IMG-контейнер стилизован для наложения содержимого. Используйте z-index, чтобы исправить навигацию.

Изменить это в CSS:

ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #333; 
}

к этому:

ul { 
position: relative; 
z-index:1; 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #333; 
}

источник

2017-01-08 17:49:07 bulldozer

Большое вам спасибо за это. И спасибо за редактирование вашего комментария, чтобы я знал, что это было, что вы сделали. Еще раз спасибо чувак – TheKingJaffa

Навигационная панель не работает

ответ

Смежные вопросы