Не работает ссылка, помогите разобратся

Question

знатоки... Появилась проблема, которая очень банальная, но сам не могу разобраться. Есть у меня значит вверху HEADER, а в нем есть несколько кнопок, которые должны вести на нужную мне страницу... Но вот беда, ссылки эти не реагируют на нажатие.. что же делать, и куда копать? Запуск проходит на Live Server в VS Code, поэтому ссылки в таком виде должны работать адекватно.

HTML

    <header>
    <div class="header-button">
        <div><a href="/Index.html"><img src="img/ico/home.png"></a></div>
        <div><a href="/Search.html"><img src="img/ico/search.png"></a></div>
        <div><a href="/Mail.html"><img src="img/ico/email.png"></a></div>
        <div><a href="/Notification.html"><img src="img/ico/notification.png"></a></div>
        <div><a href="/Apps.html"><img src="img/ico/apps.png"></a></div>
    </div>
    </header>

CSS

    header {
    position: fixed;
    display: flex;
    width: 100%;
    height: 46;
    justify-content: space-around;
    align-items: center;
    background-color: white;
    box-shadow: 0px 1px 4px gainsboro;
    }
    .header-button {
    display: flex;
    width: 100%;
    height: 24;
    justify-content: space-around;
    }
    .header-button > div > img {
    width: 24;
    height: 24;
    cursor: pointer;
    filter: opacity(40%);
    }

Answer 1

Согласно написаному вами, файлы Index.html, Search.html ..., что бы браузер по ним переходил должны находиться на уровень выше текущего исполняемого файла (только надо "../Search.html").(если же они в той же дериктории то уберите /) Желательно название файлов писать с маленьких букв.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
       <header>
    <div class="header-button">
        <div><a href="Index.html"><img src="img/ico/home.png"></a></div>
        <div><a href="../Search.html">Search</a></div>
        <div><a href="Mail.html">MAIL</a></div>
    </div>
    </header>
</body>
</html>

БЛОГ НА HUSL

Не работает ссылка, помогите разобратся

Ответы (1 шт):