Фоновое изображение удаляется от панели навигации, пока я добавляю текст, как мне это сделать?

ProgramBox

Фоновое изображение удаляется от панели навигации, пока я добавляю текст, как мне это сделать?

Post author:admin
Запись опубликована:18 марта, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я попытался добавить текст на свое фоновое изображение, но это приводит к удалению фонового изображения от панели навигации. вот HTML :

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Noto Serif:ital@1amp;display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <title>ElectroLand</title>
</head>
<body>
<!--Navbar Starts ====================================== -->
    <header>     
        <div class="container">
                <nav>
                    <div class="logo"><img src="/img/logo.png"></div>
                    <div class="nav-list">
                        <ul class="nav-item"><li><a href="#">Home</a></li></ul>
                        <ul class="nav-item"><li><a href="#">Products</a></li></ul>
                        <ul class="nav-item"><li><a href="#">About</a></li></ul>
                        <div class="hamburger" onclick="clk()" id="burger">
                            <div id="line1"></div>
                            <div id="line2"></div>
                            <div id="line3"></div>
                        </div>
                    </div>
                </nav>
           </div>
           <div class="sidemenu" id="sdmenu">
            <div class="side-items">
                <ul class="side-item"><li><a href="#">Home</a></li></ul>
                <ul class="side-item"><li><a href="#">Products</a></li></ul>
                <ul class="side-item"><li><a href="#">About</a></li></ul>
            </div>
        </div>
    </header>
    <script src="/func.js"></script>
<!--Navbar End===========================================-->
<div class="mid-section">
    <h1>Welcome to the Land of Electronics</h1>
</div>
</body>
</html>

а вот CSS:

 /* Navbar starts ===============================================================================*/
body{
    padding:0px;
    margin:0px;
    overflow-x: hidden;
}

.container{
    width: 100%;
    height:78px;
    position: relative;
    background-color: rgb(39, 44, 52);
    z-index: 1;
}
.logo{
    position: absolute;
    padding:0.6%;
    padding-top: 0.2%;
    
}
.nav-list{  
    font-family: 'Noto Serif', serif;
    position: absolute;
    right: 0px;
    top: 1%;
    display: flex;
    padding:1.0%;
    z-index: 1;
}
.nav-list a{
    margin: 15px;
    text-decoration: none;
    color: #80e560;
    transition: color 400ms ease-in-out;
}
.nav-list a:hover{
    color: #a8fbfc;
}
.nav-list ul{
    list-style-type: none;
}
.hamburger{
position: relative;
cursor: pointer;
display: none;
-moz-transform-origin: 20px;
-ms-transform-origin: 20px;
-o-transform-origin: 20px;
-webkit-transform-origin: 20px;
transform-origin: 20px;
transition: width 800ms ease-in-out;
transition: height 800ms ease-in-out;

}
.hamburger div{
    width: 20px;
    height: 2px;
    background-color: #80e560;
    margin: 3px;
    margin-left: 50%;
    transition: transform 210ms ease-in-out;
}
.sidemenu{
   position: absolute;
   right: 0px;
   width: 40%;
   height: 100%;
   width: 20%;
   background-color: rgb(39, 44, 52);
   transform:translateX(100%);
   transition:transform 500ms;
   z-index: 1;
   
}
.side-items{
    height:80%;
    justify-content:space-between;
    position: absolute;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Serif', serif;
    align-items : space-between;
}
.side-item{
    list-style-type: none;
}
.side-item a{
    color: white;
    text-decoration: none;
    transition: color 500ms ease-in-out;
}
.side-item a:hover{color:#80e560;}
@media screen and (max-width:1500px){
    .logo{padding-top: 0.3%;}
}
@media screen and (max-width:768px){
    .nav-item{
        display: none;
    }
    .hamburger{
        display:inline;
        bottom: 12px;
        right: 35px;
    }
    .side-items{
        right: 20%;
    }
    .nav-list{
        padding: 40px;
    }
    .container{
        height: 89px;
    }
    .logo{padding-top: 2%;}

}
@media screen and (max-width:568px){
    .hamburger{
        right: 50%;
    }
    .side-items{
        right: 20%;
        font-size: 12px;
    }
    .container{
        height: 89px;
    }
}
@media screen and (max-width:280px)
{     
     .side-items{
         right: 9%;
     }
     .hamburger{
         right: 6%;
     }
}

/* Navbar Ends ========================================================================*/
.mid-section{
background-image: url(/img/background.jpg);
background-position:center; 
background-size:cover;
width: 100vw; 
height: 100vh;
}
h1{text-align: center;}

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

1. Я не смог понять проблему, которую вы показываете нам на изображении, возможно ли включить код для mid-section ?

2. Это пространство выглядит как поле по умолчанию h1 для элемента. Трудно сказать без фрагмента.

3. Ах да. он не сбросил это.

Ответ №1:

Лучший вариант в вашем случае — сбросить поля и отступы, применяемые к элементу по умолчанию браузером. Вот отличный способ сбросить все. Обратите внимание, что вам придется добавить пользовательские отступы и поля, если вы используете это. (по сути, он выбирает все элементы и присваивает им поля и отступы 0)

Это лучшая практика:

 *,
*::before,
*::after {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Другой вариант — просто удалить поле из h1

 h1 {
margin: 0
}

Это решит вашу проблему, не разрушая ваш дизайн. Хотя я предпочитаю первый вариант, поскольку это распространенная проблема, с которой вы сталкиваетесь каждый раз, когда добавляете новый элемент.

Ответ №2:

Значение по умолчанию margin для вашего h1 элемента вызывает пробел. Сделайте свой .mid-section гибкий блок для простого исправления:

 .mid-section{
    background-image: url(/img/background.jpg);
    background-position:center; 
    background-size:cover;
    width: 100vw; 
    height: 100vh;
    display: flex;
    justify-content: center;
}

1. Это сработало, спасибо. хотелось бы отметить оба ответа как правильный ответ, но я видел перед вами другой ответ. прости меня

2. Я буду использовать оба метода. (отображение и сброс поля h1) Я выберу лучшее из них. 🌹