Цвет фона Div не совпадает с цветом элементов Div - PullRequest
Новая
       15

Цвет фона Div не совпадает с цветом элементов Div

0 голосов
/ 05 сентября 2018

У меня есть нижний колонтитул в конце каждой веб-страницы. В index.html фон нижнего колонтитула правильно расположен за элементами / ссылками нижнего колонтитула. Однако в моем team.html цвет фона плавает в верхней части страницы, в то время как элементы div все еще находятся внизу.

Как заставить фоновый цвет двигаться вниз?

Вот темно-серый прямоугольный фон вверху страницы, за фотографиями команды: enter image description here

Вот раздел, где должен быть цвет фона, со ссылками внизу страницы: enter image description here

Вот jsfiddle , чтобы показать, что фон для раздела ссылок не в правильном месте для страницы команды: Index.html: 

    <!DOCTYPE html>
    <html>
       <head>
          <title>Snap</title>
          <meta charset="utf-8" />
          <link rel="stylesheet" type="text/css" href="main.css">
       </head>
       <body>
          <header>
             <nav>
                <h1 class="page-title">
                   <a href="index.html">
                   <img src="leafsnap_logo.png" style="width:197px;height:71px;border:0;">
                   </a>
                </h1>
                <ul>
                   <li><a class="active" href="species.html">Species</a></li>
                   <li><a class="active" href="support.html">Support</a></li>
                </ul>
             </nav>
          </header>
          <section class="content-wrapper intro">
             <div id="text" style="margin-top:11%;">
                <a href="https://itunes.apple.com/us/app/leafsnap/id430649829?mt=8">
                    <img src="App Badge.png" width="185" height="62" style="margin-top:20%; float:left;"></img>
                 </a>
             </div>
             <div id="img-box">
                <img src="Simulator Screen Shot - iPhone 8 Plus.png" height="472" width="234">              
             </div>
             <div class="clearfix"></div>
          </section>
          <section class="content-wrapper about">
             <div style="padding-top:4%; padding-bottom:4%">
             </div>
          </section>
          <section class="content-wrapper how-to">
             <div id="text">

             </div>
             <div id="img-box">
                <img src="Simulator Screen Shot iPhone 6.png" width="251" height="610">
             </div>
             <div class="clearfix"></div>
          </section>
          <section class="content-wrapper results">
             <div id="text" style="padding-bottom:10%;">
                <br>
                <div id="statistics">
                   <ul>
                      <li>250 <span style="color:#BEE872; font-size:30px;">Queo</span></li>
                      <li>130K <span style="color:#BEE872; font-size:30px;">Paratus</span></li>
                      <li>2M <span style="color:#BEE872; font-size:30px;">Ceritores</span></li>
                   </ul>
                </div>
             </div>
             <div class="clearfix"></div>
          </section>
          <section class="content-wrapper features">
             <div style="background:#FFFFFF; width:100%; height:105px; text-align: center;" >
                <h1 style="color:#000000; font-size:30px; padding-top:40px;">The <span style="color:#58A22F;">features</span></h1>
             </div>
             <div class="slideshow-container" style="display:inline-block;">

                <!-- Next and previous buttons -->
                <a class="prev" onclick="plusSlides(-1)" style="margin-top:25%; float:left; margin-left:2%;"><img src="arrow.png" width="15px" height="24px" style="transform: rotate(180deg)"> </a>
                <a class="next" onclick="plusSlides(1)" style="float: right; margin-top:25%; margin-right:2%;"><img src="arrow.png" width="15px" height="24px" border="0"> </a>


                <!-- Full-width images with number and caption text -->
                <div class="mySlides">
                   <div id ="img-box">
                      <img src="slideshow Screen 1.png" width="212" height = "430">
                   </div>
                   <div class="caption">A complete library of northeast tree species amassed by the Smithsonian Institution</div>

                   <div class="clearfix"></div>
                </div>
                <div class="mySlides">
                   <div id="img-box">
                      <img src="slideshow Screen 2.png" width="212px" height = "430px">
                   </div>
                   <div class="caption">Matching games for learning the flowers, fruit, seeds and bark of 220  tree species</div>
                   <div class="clearfix"></div>
                </div>
                <div class="mySlides">
                   <div id="img-box">
                      <img src="slideshow Screen 3.png" width="212px" height = "430px">
                   </div>
                   <div class="caption">Visual recognition software originally developed by Columbia University Engineers as a high tech aid for scientists to discover new species in unknown habitats. </div>
                   <div class="clearfix"></div>
                </div>
                </div>
             <!-- The dots/circles -->
             <div style="text-align:center">
                <span class="dot" onclick="currentSlide(1)"></span>
                <span class="dot" onclick="currentSlide(2)"></span>
                <span class="dot" onclick="currentSlide(3)"></span>
             </div>
             <div id="icon">
                     <img class = "slide-icon" src="leaves-green.png" width="60px" height="60px">
                     <img class = "slide-icon" src="brain-green.png" width="60px" height="60px">
                     <img class = "slide-icon" src="camera-green.png" width="60px" height="60px">
             </div>
                   <div class="clearfix"></div>
             <br>
          </section>
          <section class="content-wrapper logos">

               <div id="logo">
                     <img class = "slide-icon" src="NMNH.png" width="261px" height="42px">
                     <img class = "slide-icon" src="FuFoundation.png" width="341px" height="42px">
                     <img class = "slide-icon" src="UMaryland.png" width="213px" height="42px" style="padding-bottom:3px;">
               </div>

          </section>
          <section class="content-wrapper links">
              <div style="width:100px; padding-top:20px; margin:auto; display:flex;">
                  <img src="github icon.png" width="34px" height="34px" style="padding-right:10px;"></img>
                  <img src="twitter icon.png" width="34px" height="34px"></img>
              </div>
              <ul class="list-horizontal">
                   <li>Contact</li>
                   <li><a href="otherPrac.html">Team</a></li>
                   <li><a href="press/press.html">Press</a></li>
                   <li><a href="dataset/dataset.html">Dataset</a></li>
               </ul>
          </section>
       </body>
    </html>

team.html: 

<!DOCTYPE html>
<html>

  <head>
    <title>Snap</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="team.css">
    <link rel="stylesheet" type="text/css" href="../main.css">
  </head>

  <body>
    <nav>
      <h1 class="page-title">
        <a href="index.html">
               <img src="leafsnap_logo.png" style="width:197px;height:71px;border:0;">
               </a>
      </h1>
      <ul>
        <li><a class="active" href="../species.html">Species</a></li>
        <li><a class="active" href="../support.html">Support</a></li>
      </ul>
    </nav>
    <section class="content-wrapper history">
      <div class="title">
        <h2>About Us</h2>
      </div>
      <input id="ch" type="checkbox">
      <div class="headline">
        <p>Columbia University, the University of Maryland, and the Smithsonian Institution are working on visual recognition software to help identify species from photographs.</p>
      </div>
      <div class="text">

      </div>
      <label for="ch"></label>
      </input>
    </section>
    <section class="content-wrapper team">
    </section>
    <section class="content-wrapper links">
         <div style="width:100px; padding-top:20px; margin:auto; display:flex;">
             <img src="github icon.png" width="34px" height="34px" style="padding-right:10px;"></img>
             <img src="twitter icon.png" width="34px" height="34px"></img>
         </div>
         <ul class="list-horizontal">
             <li>Contact</li>
             <li><a href="otherPrac.html">Team</a></li>
             <li><a href="press/press.html">Press</a></li>
             <li><a href="dataset/dataset.html">Dataset</a></li>
         </ul>
     </section>

  </body>

</html>

main.css: 

* { margin: 0; padding: 0; }
a{
        color:   #000000;
}

body {
        height: 100%;
        margin: 0;
        width: 100%;
        font-family: "Avenir Next";
        font-size:18px;
        text-align: justify;
        text-justify: auto;
}

header{
    position:relative;
    background-color:white;
}

/*Navigation Bar*/ 

nav{
    position:relative;
    display: inline-block;
    width:100%;
    height:80px;
    z-index:1;
    background-color:white;
}

nav ul {
    float: right;
    margin-right:5%;
    position:relative;
    top:30px; 
}

nav li{
  margin: 0; 
  padding: 0 30px;
  display: inline; 
  font-weight: 550;
  font-size: 18px;
  color:   #000000;
}

nav li a{
    text-decoration:none;

}

.page-title{
    float:left;
    margin-left:5%;
    width:197px;
    height:70px;
}

section.intro{
    width:100%;
    color:#FFFFFF;
    background: linear-gradient(#BEE872,#429321);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.clearfix{
    clear:both
}

section.intro #text{
    width:40%;
    float:left;
    margin-left:5%;
}

section #text{
    width:40%;
    float:left;
    margin-left:5%;
}

section.intro #img-box{
    margin-right:5%;
    padding-bottom:4%;
}

section #img-box{
    width:40%;
    float:right;
    margin-top:5%;
    margin-right:10%;
}

section img{
    float:right;
}

section h1{
   font-weight:550;
   font-size:36px;
   line-height:125%;
}

section h3{
    font-weight:425;
}

section.intro h3{
   font-size:18px;
   width:363px;
}

section.about{
    height:100%;
    background: #F5F8F4;
}

section.about h1{
     width: 50%;
     margin-left: auto;
     margin-right: auto;
}

section.about p{
     width: 50%;
     margin-left: auto;
     margin-right: auto;
}
section.how-to{
    background: linear-gradient(#BBDDFF, #85B8FF);
    background-repeat:no-repeat;
    background-attachment: fixed;
    color:#FFFFFF;
}

section.how-to h3{
    font-size:28px;
    width:370px;
    padding-top:5%;
    padding-bottom:3%;
}

section.how-to #text{
    padding-top:5%;
}

section.results{
     padding-top:7%;
     background-color:#F6F7F5;
}

section.results #text{
    float:none;
    margin:0px auto;
    width:743px;
}

section.features{
    background: linear-gradient(#BEE872,#429321);
    background-repeat:no-repeat;
    background-attachment: fixed;
    color:#FFFFFF;
    font-size:22px;
    font-weight:425;
}
#statistics ul {
    position:relative;
    height:218px;
    list-style: none;
    margin:0px auto;
}

#statistics li{
  font-weight: 550;
  font-size: 80px;
  width: 200px;
  color: #BBDDFF;
  float:left;
  text-align:center;
  padding-right:5%;
}

.slideshow-container{
    width:100%;
    display:block;
}

.caption{
    font-size:22px;
    color: #FFFFFF;
    width: 287px;
    float: left;
    font-weight:500;
    margin-top:20%;
    margin-left: 10%;
    position:absolute;
    text-align:left;  
}


#icon{
    padding-top:50px; 
    display: flex; 
    justify-content: space-between; 
    width:90%; 
    margin-left: 5%;

}

#logo{
    display:block;
    padding-top:50px;
    padding-bottom:50px;
    display: flex;
    justify-content: space-between;
    width:90%;
    margin-left: 5%;
}

section.links{
    background-color:#EEEEEE;
    height:150px;
    text-align:center;
}

section.links img{
     margin:auto;    
}
.list-horizontal{
    padding-top:30px;
    width:50%;
    margin: 0 auto;
    font-size:20px;
    font-weight:450;
    text-align:center;
    white-space:nowrap
}
.list-horizontal li {
    display:inline-block;
        padding-right:24px;
    color:#4A4A4A;
}
.list-horizontal li a{
   color:#4A4A4A; 
   text-decoration: none
}
.list-horizontal li:before {
    content: '\00a0\2022\00a0\00a0';
    color:#4A4A4A;
        padding-right:24px;
    font-size:16px;
}
.list-horizontal li:first-child:before {
    content: '';
}

@font-face{
    font-family: Avenir Next;
    src: url('avenir-next-regular.ttf'),
}

#home{
   margin:auto;
   width:85%;
   text-indent:50px;
   column-count:2; 
   column-gap:30px;
}

team.css: 

section.intro{
    width:100%;
    color:#FFFFFF;
    background: linear-gradient(#BEE872,#429321);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.clearfix{
    clear:both
}

section.intro #text{
    width:40%;
    float:left;
    margin-left:5%;
}

section #text{
    width:40%;
    float:left;
    margin-left:5%;
}

section.intro #img-box{
    margin-right:5%;
    padding-bottom:4%;
}

section #img-box{
    width:40%;
    float:right;
    margin-top:5%;
    margin-right:10%;
}

section img{
    float:right;
}

section h1{
   font-weight:550;
   font-size:36px;
   line-height:125%;
}

section h3{
    font-weight:425;
}

section.intro h3{
   font-size:18px;
   width:363px;
}

section.about{
    height:100%;
    background: #F5F8F4;
}

section.about h1{
     width: 50%;
     margin-left: auto;
     margin-right: auto;
}

section.about p{
     width: 50%;
     margin-left: auto;
     margin-right: auto;
}
section.how-to{
    background: linear-gradient(#BBDDFF, #85B8FF);
    background-repeat:no-repeat;
    background-attachment: fixed;
    color:#FFFFFF;
}

section.how-to h3{
    font-size:28px;
    width:370px;
    padding-top:5%;
    padding-bottom:3%;
}

section.how-to #text{
    padding-top:5%;
}

section.results{
     padding-top:7%;
     background-color:#F6F7F5;
}

section.results #text{
    float:none;
    margin:0px auto;
    width:743px;
}

section.features{
    background: linear-gradient(#BEE872,#429321);
    background-repeat:no-repeat;
    background-attachment: fixed;
    color:#FFFFFF;
    font-size:22px;
    font-weight:425;
}
#statistics ul {
    position:relative;
    height:218px;
    list-style: none;
    margin:0px auto;
}

#statistics li{
  font-weight: 550;
  font-size: 80px;
  width: 200px;
  color: #BBDDFF;
  float:left;
  text-align:center;
  padding-right:5%;
}

.slideshow-container{
    width:100%;
    display:block;
}

.caption{
    font-size:22px;
    color: #FFFFFF;
    width: 287px;
    float: left;
    font-weight:500;
    margin-top:20%;
    margin-left: 10%;
    position:absolute;
    text-align:left;  
}


#icon{
    padding-top:50px; 
    display: flex; 
    justify-content: space-between; 
    width:90%; 
    margin-left: 5%;

}

#logo{
    display:block;
    padding-top:50px;
    padding-bottom:50px;
    display: flex;
    justify-content: space-between;
    width:90%;
    margin-left: 5%;
}

section.links{
    background-color:#EEEEEE;
    height:150px;
    text-align:center;
}

section.links img{
     margin:auto;    
}
.list-horizontal{
    padding-top:30px;
    width:50%;
    margin: 0 auto;
    font-size:20px;
    font-weight:450;
    text-align:center;
    white-space:nowrap
}
.list-horizontal li {
    display:inline-block;
        padding-right:24px;
    color:#4A4A4A;
}
.list-horizontal li a{
   color:#4A4A4A; 
   text-decoration: none
}
.list-horizontal li:before {
    content: '\00a0\2022\00a0\00a0';
    color:#4A4A4A;
        padding-right:24px;
    font-size:16px;
}
.list-horizontal li:first-child:before {
    content: '';
}

@font-face{
    font-family: Avenir Next;
    src: url('avenir-next-regular.ttf'),
}

#home{
   margin:auto;
   width:85%;
   text-indent:50px;
   column-count:2; 
   column-gap:30px;
}

section.history{
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin:auto;
    color: #232323;
    display:inline-block;
    text-align:center;
    width:100%;
    background:#FBFBFB;
}


section.history h2{
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight:600;
}

.headline {
    display:inline-block;
    width: 60%;
    margin-bottom:10px;
    font-style:normal;
    line-height: normal;
    font: helvetica neue;
}

.text {
    height: 0px;
    width:80%;
    overflow: hidden;
    margin:auto;
    margin-bottom:20px;
    display:block;
    text-align:justify;
    column-count:2;
    column-gap:5%;
}

.text a{
    color:#000;
}
.container {
    position: relative;
}

label {
    font-weight:550;
}

input {
    display: none;
}


label {
    font-weight:550;
    display:block;
}

input {
    display: none;
}

label:after {
    content: "Show More";
}

.text{
   margin-top: 10px;
   text-indent:40px;
}

input:checked + label:after {
    content: "Show Less";
}

input:checked ~ div {
    height: 100%;
}

.team-listing {
  position: relative;
  margin-top: 40px;
  margin-right: auto;
  margin-left: auto;
}


.team-listing ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
  flex-flow: row wrap;
  flex-shrink: 1;
  flex-grow: 1;
  float: left;
  min-width: 0;
  max-width: 100%;
  position: relative;
}

.team-listing li {
  display: inline-block;
  vertical-align:top;
  overflow: hidden;
  float: left;
  height: 340px;
  list-style-position: inside;
  margin: 1px 1px 1px 1px;
  background-color: #fff;
}

a {
  display: inline-block;
}

article {
  position: relative;
  width: 300px;
  height: 340px;
  overflow: hidden;
}

article:hover {
  background-color: #000;
}

.portrait {
  position: relative;
  width: 300px;
  height: 340px;
  overflow: hidden;
}

.portrait image {
  clip-path: url(#circle);
}

a:hover .portrait image {
  clip-path: none;
}

a:hover article:after {
  position: absolute;
  display: block;
}

.ring {
  fill: none;
  stroke: white;
  stroke-width: 1;
  opacity: 0;
  transform-origin: 50% 50%;
  transform: scale(1.8);
  transition: transform .3s ease, opacity .4s ease;
}

a:hover .ring {
  opacity: 1;
  transform: scale(1);
}

a:hover .bio {
  color: #FFF;
  background-color: #000000;
  width: 100%;
  padding-top: 0;
}

.bio {
  position: absolute;
  bottom: 0;
  padding: 1rem 1rem;
  color: #000;
}

1 Ответ

0 голосов
/ 05 сентября 2018

Ваша проблема связана с тем, что ваш .team-listing ul находится на плаву. Всплывающие элементы находятся вне потока документа (что вы испытываете и почему изложено здесь: https://css -tricks.com / all-about-float / # article-header-id-3 - я предлагаю прочитать всю статью, хотя). В этом случае вам не нужен поплавок, поэтому просто удалите его. Я бы тоже удалил его из li, потому что он там тоже не нужен. Есть ли причина, почему так много поплавков? 

.team-listing ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
  flex-flow: row wrap;
  flex-shrink: 1;
  flex-grow: 1;
  /* float: left;  REMOVE THIS */
  min-width: 0;
  max-width: 100%;
  position: relative;
}

Вот обновленная скрипка

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...