Блог

Главная - Вопросы по программированию - заголовок покрытия навигационной панели с фиксированным положением

заголовок покрытия навигационной панели с фиксированным положением

#html #css

Вопрос:

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

    /* poor css I budged to make things fall into place on a 16:9 full hd window, may be the root of the issue */

.navbar{
    position: fixed;
}

.figure{
    margin-top: 20px;
    margin-left: 15.5px;
}

.figure-caption{
    text-align: center;
    color: rgb(55, 55, 55);
}

.top-header{
    margin-top: 0px;
    text-align: center;
    color: rgb(46, 46, 46);
}

.mid-header{
    text-align: center;
}

footer{
    text-align: center;
    margin-top: 340px;
    background-color: gray;
    height: 25px;
}

#logo{
    margin-top: 10px;
    margin-left: 1300px;
} 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Front End Bootcamp</title>
</head>
<body style="background-color: #54b0cc;"    >
<!-- navbar in question -->
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
        <a href="#" class="navbar-brand" style="margin-left: 20px;">My Homepage</a>
        <div class = "collapse navbar-collapse">
            <ul class = "navbar-nav">
                <li class = "nav-item" style="margin-left: 50px;">
                    <a href  = "#about" class = "nav-link">About</a>
                </li>

                <li class = "nav-item">
                    <a href  = "#skills_and_experience" class = "nav-link">Skills amp; Experience</a>
                </li>

                <li class = "nav-item">
                    <a href  = "#contact_me" class = "nav-link">Contact Me</a>
                </li>
            </ul>
            <logo>
                <img id="logo" class="figure-img img-fluid rounded" height = "40px" width="40px" src="C:Usersmax25DesktopCS_MaterialWeb DevBootstrap Crash Course - 2021imglogo.jpg">
            </logo>
        </div>
    </nav>
    <div class="interests">
<!-- this h2 header should be bellow the navbar, not behind it -->
        <h2 class="top-header">My Interests</h2>
        <figure class="figure">
            <img src="C:Usersmax25DesktopCS_MaterialWeb DevBootstrap Crash Course - 2021imgprogramming.jpg" class="figure-img img-fluid rounded" alt="programming" height="640px" width="360px">
            <figcaption class="figure-caption">Programing</figcaption>
        </figure>

        <figure class="figure">
            <img src="C:Usersmax25DesktopCS_MaterialWeb DevBootstrap Crash Course - 2021imggaming.jpg" class="figure-img img-fluid rounded" alt="gaming" height="640px" width="360px">
            <figcaption class="figure-caption">Gaming</figcaption>
        </figure>

        <figure class="figure">
            <img src="C:Usersmax25DesktopCS_MaterialWeb DevBootstrap Crash Course - 2021imgfootball.jpg" class="figure-img img-fluid rounded" alt="football" height="620px" width="360px">
            <figcaption class="figure-caption">Football</figcaption>
        </figure>

        <figure class="figure">
            <img src="C:Usersmax25DesktopCS_MaterialWeb DevBootstrap Crash Course - 2021imgnetworks.jpg" class="figure-img img-fluid rounded" alt="networks" height="640px" width="360px">
            <figcaption class="figure-caption">Networks</figcaption>
        </figure>

        <figure class="figure">
            <img src="C:Usersmax25DesktopCS_MaterialWeb DevBootstrap Crash Course - 2021imgcomics.jpg" class="figure-img img-fluid rounded" alt="comics" height="640px" width="360px">
            <figcaption class="figure-caption">Comics</figcaption>
        </figure>
    </div>
    <div>
        <h3 class="mid-header">Cool video I found</h3>
        <center><iframe width="560" height="315" src="https://www.youtube.com/embed/TETmRSHHaNI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></center>
    </div>
    

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
<footer>Made by: Yonatan Goldin - yonatangoldin69@gmail.com</footer>
</html>

Комментарии:

1. Добавить margin-top в класс .interests . Это решит вашу проблему

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

3. Используйте padding-top вместо этого.

4. Кстати, ваши стили вообще не применяются, так как это начальная загрузка . Вместо этого вы должны использовать !important его вместе с ним . Как и ваш nav , не fixed слишком в приведенном выше фрагменте.

5. Idk кажется, что все меняется, когда я открываю HTML-файл локально.

Ответ №1:

Добавьте margin-top к .top-header , т. е. значение, большее, чем ваше текущее, которое равно нулю…

    /* poor css I budged to make things fall into place on a 16:9 full hd window, may be the root of the issue */

.navbar{
    position: fixed;
}

.figure{
    margin-top: 20px;
    margin-left: 15.5px;
}

.figure-caption{
    text-align: center;
    color: rgb(55, 55, 55);
}

.top-header{
    margin-top: 40px;
    text-align: center;
    color: rgb(46, 46, 46);
}

.mid-header{
    text-align: center;
}

footer{
    text-align: center;
    margin-top: 340px;
    background-color: gray;
    height: 25px;
}

#logo{
    margin-top: 10px;
    margin-left: 1300px;
} 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Front End Bootcamp</title>
</head>
<body style="background-color: #54b0cc;"    >
<!-- navbar in question -->
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
        <a href="#" class="navbar-brand" style="margin-left: 20px;">My Homepage</a>
        <div class = "collapse navbar-collapse">
            <ul class = "navbar-nav">
                <li class = "nav-item" style="margin-left: 50px;">
                    <a href  = "#about" class = "nav-link">About</a>
                </li>

                <li class = "nav-item">
                    <a href  = "#skills_and_experience" class = "nav-link">Skills amp; Experience</a>
                </li>

                <li class = "nav-item">
                    <a href  = "#contact_me" class = "nav-link">Contact Me</a>
                </li>
            </ul>
            <logo>
                <img id="logo" class="figure-img img-fluid rounded" height = "40px" width="40px" src="C:Usersmax25DesktopCS_MaterialWeb DevBootstrap Crash Course - 2021imglogo.jpg">
            </logo>
        </div>
    </nav>
    <div class="interests">
<!-- this h2 header should be bellow the navbar, not behind it -->
        <h2 class="top-header">My Interests</h2>
        <figure class="figure">
            <img src="C:Usersmax25DesktopCS_MaterialWeb DevBootstrap Crash Course - 2021imgprogramming.jpg" class="figure-img img-fluid rounded" alt="programming" height="640px" width="360px">
            <figcaption class="figure-caption">Programing</figcaption>
        </figure>

        <figure class="figure">
            <img src="C:Usersmax25DesktopCS_MaterialWeb DevBootstrap Crash Course - 2021imggaming.jpg" class="figure-img img-fluid rounded" alt="gaming" height="640px" width="360px">
            <figcaption class="figure-caption">Gaming</figcaption>
        </figure>

        <figure class="figure">
            <img src="C:Usersmax25DesktopCS_MaterialWeb DevBootstrap Crash Course - 2021imgfootball.jpg" class="figure-img img-fluid rounded" alt="football" height="620px" width="360px">
            <figcaption class="figure-caption">Football</figcaption>
        </figure>

        <figure class="figure">
            <img src="C:Usersmax25DesktopCS_MaterialWeb DevBootstrap Crash Course - 2021imgnetworks.jpg" class="figure-img img-fluid rounded" alt="networks" height="640px" width="360px">
            <figcaption class="figure-caption">Networks</figcaption>
        </figure>

        <figure class="figure">
            <img src="C:Usersmax25DesktopCS_MaterialWeb DevBootstrap Crash Course - 2021imgcomics.jpg" class="figure-img img-fluid rounded" alt="comics" height="640px" width="360px">
            <figcaption class="figure-caption">Comics</figcaption>
        </figure>
    </div>
    <div>
        <h3 class="mid-header">Cool video I found</h3>
        <center><iframe width="560" height="315" src="https://www.youtube.com/embed/TETmRSHHaNI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></center>
    </div>
    

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
<footer>Made by: Yonatan Goldin - yonatangoldin69@gmail.com</footer>
</html>

Ответ №2:

Как указал коннексо в комментариях, добавление padding , а не margin s действительно дало мне желаемый результат.

 .navbar{
    position: fixed;
}

.figure{
    margin-top: 20px;
    margin-left: 15.5px;
}

.figure-caption{
    text-align: center;
    color: rgb(55, 55, 55);
}

.top-header{
    padding-top: 65px; /* puts the header BELOW the navbar while the navbar is fixed */
    text-align: center;
    color: rgb(46, 46, 46);
}

.mid-header{
    text-align: center;
}

footer{
    text-align: center;
    margin-top: 340px;
    background-color: gray;
    height: 25px;
}

#logo{
    margin-top: 10px;
    margin-left: 1300px;
}
Метки: