меню навигации и нижний колонтитул не остаются неизменными - PullRequest
Новая
       40

меню навигации и нижний колонтитул не остаются неизменными

0 голосов
/ 20 апреля 2020

Я пытаюсь убедиться, что моя панель навигации и нижний колонтитул остаются фиксированными. Я установил обе позиции на фиксированные, а также попытался установить top: 0 для navbar и bottom: 0 для нижнего колонтитула, но я все еще не получил желаемый результат, я пытался манипулируйте и настраивайте элементы div, чтобы сделать код более понятным и заставить его работать, но при этом не получить желаемого результата. Пожалуйста, помогите мне.

HTML CODE 

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Archers</title>
  <link rel="stylesheet" href="arch.css">
</head>

<body>
<section id="main">
    <div class="parentDiv " >
      <div class="  contentDiv>
      <div id=" menu">
        <div id="navbar">
          <nav>
            <ul class="ul-style ">
              <li><a href="#portfolio">OUR PORTFOLIO</a></li>
              <li><a href="#process">OUR PROCESS</a></li>
              <li><a href="#about">ABOUT</a></li>
              <li><a href="#main">HOME</a></li>
            </ul>
          </nav>
        </div>
      </div>
      <div class="mainbg boxshadow"></div>
    </div>
</section>

  <section id="about" >
    <div class="parentDiv ">
<div class="  contentDiv>
        <a name=" #about"></a>
      </div>
      <div class="aboutbg boxshadow"></div>
    </div>
  </section>

  <section id=" process">
    <div class="parentDiv  ">
<div class="  contentDiv>
            <a name=" #process"></a>
      </div>
      <div class="processbg boxshadow"></div>
    </div>
  </section>
<section id=" portfolio">
    <div class="parentDiv ">
<div class="  contentDiv>
                  <a name=" #portfolio"></a>
      </div>
      <div class="portfoliobg boxshadow"></div>
    </div>
  </section>

  <footer>
    2020 DeborahPalmTree
  </footer>
  <script src="index.js" charset="utf-8"></script>
</body>
</html>```


***CSS CODE***

* {
  padding: 0;
  margin: 0;
}


body {
  width: 100%;
  height: 100%;
}

#navbar {
  width: 100%;
  height: calc (100% - 58px);
  background-color: rgba(219, 219, 219, 1.0);
  position: fixed;
}

ul li {
  list-style: none;
  float: right;
  margin: 20px;
}

li a {
  text-decoration: none;
  color: #ffffff;
}

.bg1 {
  background-color: rgba(219, 219, 219, 1.0);
}

.boxshadow {
  box-shadow: inset 0px 0px 0px 30px rgba(0,0,0,0.5);
}

.parentDiv {
  max-width: 100%;
  perspective: 500px;
  height: 100%;
}

.mainbg {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(rgba(245, 242, 242, 0.44), rgba(255,
        255, 255, 0.5)), url('structural-images/img_house_trees.jpg');
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
}

.aboutbg {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
        255, 255, 0.5)),url('structural-images/img_construction_site.jpg');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}

.processbg {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
        255, 255, 0.5)),url('structural-images/img_arc_plan.jpg');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}

.portfoliobg {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
        255, 255, 0.5)),url('structural-images/img-structure-garden-car-park.jpg');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}

#footer {
  position: fixed;
  height: 50px;
  width: 100%;
  background-color: rgba(219, 219, 219, 1.0);
}

Ответы [ 2 ]

1 голос
/ 20 апреля 2020

вам нужно подать заявление ниже css, так как вы не присвоили ни одного идентификатора своему нижнему колонтитулу 

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 10px;
    background-color: #ddd;
}

Я бы предложил структуру ниже html, если вы можете изменить ее следующим образом иметь лучший контроль и стиль лучше 

<html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Archers</title>
  <style>
  
  * {
  padding: 0;
  margin: 0;
}


body {
  width: 100%;
  height: 100%;
}

#navbar {
  width: 100%;
  height: calc (100% - 58px);
  background-color: rgba(219, 219, 219, 1.0);
  position: fixed;
}

ul li {
  list-style: none;
  float: right;
  margin: 20px;
}

li a {
  text-decoration: none;
  color: #ffffff;
}

.bg1 {
  background-color: rgba(219, 219, 219, 1.0);
}

.boxshadow {
  box-shadow: inset 0px 0px 0px 30px rgba(0,0,0,0.5);
}

.parentDiv {
  max-width: 100%;
  perspective: 500px;
  height: 100%;
}

.mainbg {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(rgba(245, 242, 242, 0.44), rgba(255,
        255, 255, 0.5)), url('structural-images/img_house_trees.jpg');
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
}

.aboutbg {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
        255, 255, 0.5)),url('structural-images/img_construction_site.jpg');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}

.processbg {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
        255, 255, 0.5)),url('structural-images/img_arc_plan.jpg');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}

.portfoliobg {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
        255, 255, 0.5)),url('structural-images/img-structure-garden-car-park.jpg');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}

#footer {
  position: fixed;
  height: 50px;
  width: 100%;
  background-color: rgba(219, 219, 219, 1.0);
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 10px;
    background-color: #ddd;
}


.main-body {
    margin: 58px 0 38px 0;
}
  
#navbar {
    width: 100%;
    background-color: rgb(221, 221, 221);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}  
  </style>
</head>

<body contenteditable="false">
   <div id="navbar">
      <nav>
         <ul class="ul-style ">
            <li><a href="#portfolio">OUR PORTFOLIO</a></li>
            <li><a href="#process">OUR PROCESS</a></li>
            <li><a href="#about">ABOUT</a></li>
            <li><a href="#main">HOME</a></li>
         </ul>
      </nav>
   </div>
   <div class="main-body">
      <section id="main">
         <div class="parentDiv ">
            <div class="  contentDiv>
               <div id=" menu"="">
            </div>
            <div class="mainbg boxshadow"></div>
         </div>
      </section>
      <section id="about">
         <div class="parentDiv ">
            <div class="  contentDiv>
               <a name=" #about"="">
            </div>
            <div class="aboutbg boxshadow"></div>
         </div>
      </section>
      <section id=" process">
         <div class="parentDiv  ">
            <div class="  contentDiv>
               <a name=" #process"="">
            </div>
            <div class="processbg boxshadow"></div>
         </div>
      </section>
      <section id="portfolio">
         <div class="parentDiv ">
            <div class="  contentDiv>
               <a name=" #portfolio"="">
            </div>
            <div class="portfoliobg boxshadow"></div>
         </div>
      </section>
   </div>
   <footer>
      2020 DeborahPalmTree
   </footer>
   <script src="index.js" charset="utf-8"></script>

</body></html>
0 голосов
/ 20 апреля 2020

Пожалуйста, используйте z-index и свойство переполнения для вашего фиксированного элемента.

Обновлено CSS


  * {
      padding: 0;
      margin: 0;
    }


    body {
      width: 100%;
      height: 100%;
    }

    #navbar {
      width: 100%;
      height: calc (100% - 58px);
      background-color: rgba(219, 219, 219, 1.0);
      position: fixed;
      top:0px;
      left:0px;
      z-index:10;
      overflow:hidden;
    }

    ul li {
      list-style: none;
      float: right;
      margin: 20px;
    }

    li a {
      text-decoration: none;
      color: #ffffff;
    }

    .bg1 {
      background-color: rgba(219, 219, 219, 1.0);
    }

    .boxshadow {
      box-shadow: inset 0px 0px 0px 30px rgba(0,0,0,0.5);
    }

    .parentDiv {
      max-width: 100%;
      perspective: 500px;
      height: 100%;
    }

    .mainbg {
      width: 100%;
      height: 100vh;
      background-image: linear-gradient(rgba(245, 242, 242, 0.44), rgba(255,
            255, 255, 0.5)), url('structural-images/img_house_trees.jpg');
      background-position: bottom;
      background-size: cover;
      background-repeat: no-repeat;
    }

    .aboutbg {
      width: 100%;
      height: 100vh;
      background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
            255, 255, 0.5)),url('structural-images/img_construction_site.jpg');
      background-size: cover;
      background-position: bottom;
      background-repeat: no-repeat;
    }

    .processbg {
      width: 100%;
      height: 100vh;
      background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
            255, 255, 0.5)),url('structural-images/img_arc_plan.jpg');
      background-size: cover;
      background-position: bottom;
      background-repeat: no-repeat;
    }

    .portfoliobg {
      width: 100%;
      height: 100vh;
      background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
            255, 255, 0.5)),url('structural-images/img-structure-garden-car-park.jpg');
      background-size: cover;
      background-position: bottom;
      background-repeat: no-repeat;
    }

    #footer {
      position: fixed;
      height: 50px;
      width: 100%;
      background-color: rgba(219, 219, 219, 1.0);
bottom:0px;
left:0px;
z-index:10;
overflow:hidden;
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...