Проблемы с ссылками в шапке сайта

Question

Начал учить html+css и по заданию надо сделать сайт. Проблема состоит в том, что из двух верхних ссылок, которые находятся на шапке работает только вторая. В чём моя ошибка?

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;

    src: local("Roboto"),
         url("/fonts/roboto.woff2") format("woff2"),
         url("/fonts/roboto.woff2") format("woff"),;
}
.cap {
    height: 84px;
    width: 2011px;
    background: #007765;
    position: fixed;
}
.logo {
    height: 45px;
    width: 184px;
    position: fixed;
    padding-left: 501px;
    padding-top: 20px;
}
.TP_cap {
    color: white;
    font-size: 24px;
    font-family: "Roboto", "Arial", sans-serif;
    text-decoration: none;
    position: fixed;
    padding-left: 1187px;
    padding-top: 28px;
    width: 2011px;
}
.PiperNetIsHere {
    padding-top: 84px;
    max-width: 2011px;
    height: 403px;
}
.TP_text {
    background-color: #EEEEEE;
    width: 2011px;
    height: 719px
}
.TP_text > h1 {
    color: #007765;
    font-size: 64px;
    font-family: "Roboto", "Arial", sans-serif;
    text-decoration: none;
    width: 1219px;
    padding-right: 55px;
    padding-left: 55px;
    padding-top: 36px;
    margin: auto;
    text-align: center;
}
body {
    margin: auto;
}

<!DOCTYPE html>
<head>
    <meta charset ="utf-8">
    <title> Homework_6.10 </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class = "cap"> 
        <a href = #Logo_Teleportation><img class = "logo" src = "picture/logo.png" title = "Company Logo" alt = "Company Logo" ></a>
        <div class = "TextOnCap" link = #ffffff alink = #ffffff vlink = #ffffff>
            <a href = "#The_Problem" class = "TP_cap">The Problem</a>
        </div>
    </header>
    <div id = "Logo_Teleportation"></div>
    <img class = "PiperNetIsHere" src = "picture/Jumbotron.png" title = "Jumbotron.jpg" alt = "Jumbotron.jpg">
    <div class = "TP_text">
        <h1 id = "The_Problem">The Problem</h1>
    </div>
</body>

Кстати. Изображение, того, как это выглядит с картинками

Answer 1

Видно ,что вы новичок в этом деле. Я бы посоветовал посмотреть может быть видеоролики с полным разбором вёрстки. А header я поправил ваш.

Я ВЫЛОЖИЛ ТОЛЬКО body ,head не трогал

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;

    src: local("Roboto"),
         url("/fonts/roboto.woff2") format("woff2"),
         url("/fonts/roboto.woff2") format("woff"),;
}
.cap {
    height: 84px;
    width: 100%; /*Заменил потому ,что это если у вас экран в 2000px ,то у обычных пользователей нет(а у мобильных пользователей тем более)*/
    background: #007765;
    position: fixed;
}
.logo {
    height: 45px;
    width: 184px;
    /* Зачем тут fixed если он и так залип у родителя,а padding уж тем более не нужен*/
}
.TP_cap {
    
    font-size: 24px;
    font-family: "Roboto", "Arial", sans-serif;
   /*text-decoration переместил в общие ссылки*/
    /* тут такая же история ,что и с logo*/
}
.PiperNetIsHere {
    padding-top: 84px;
    max-width: 2011px;
    height: 403px;
}
.TP_text {
    background-color: #EEEEEE;
    width: 2011px;
    height: 719px
}
.TP_text > h1 {
    color: #007765;
    font-size: 64px;
    font-family: "Roboto", "Arial", sans-serif;
    text-decoration: none;
    width: 1219px;
    padding-right: 55px;
    padding-left: 55px;
    padding-top: 36px;
    margin: auto;
    text-align: center;
}
body {
    margin: auto;
}
/*Вот мой дополнительный код*/
.TextOnCap{
  display:flex;
  justify-content:space-around;
  height:inherit;
}
.TextOnCap a{
  /*У ссылок display:inline , но в данном случае мы кладём в них display:block(картинка) , а в css это неправильно поэтому ссылку сделаем display:flex (flex я сделал для центрирования текста а так можно и block)*/
  display:flex;
  align-items:center;
  text-decoration: none;
   color: white;
}

<body>
    <header class = "cap"> 
        
        <div class = "TextOnCap">
            <a href = "#The_Problem" class = "TP_cap">
              <span>The Problem</span></a>
          <a href = #Logo_Teleportation><img class = "logo" src = "picture/logo.png" title="CompanyLogo" alt = "" ><span>CompanyLogo</span></a>
        </div>
    </header>
    <div id = "Logo_Teleportation"></div>
    <img class = "PiperNetIsHere" src = "picture/Jumbotron.png" title = "Jumbotron.jpg" alt = "Jumbotron.jpg">
    <div class = "TP_text">
        <h1 id = "The_Problem">The Problem</h1>
    </div>
</body>

БЛОГ НА HUSL

Проблемы с ссылками в шапке сайта

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