Question

Итак, я сделал действительно крутой сайт. Затем в отдельном файле я сделал действительно классную панель навигации. Однако, когда я их собрал, панель навигации исчезла. Фон самого первого div, называемого «список», должен быть заполнен и должен быть больше, однако это не так. Надеюсь, кто-то может помочь мне иметь панель навигации и сайт на одной странице. Спасибо!

        
.list {
  background-color: #666;
    color: #111111;
    height: 105px;
    width: 100%;
}

.list a {
    
  margin-top: 20px;  
  float: right;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 25px;   
    
}

.list a:hover {
  background-color: #70b5ff;
  color: #111111;
}

.list a.on {
background-color: #81ff7c;
  color: #005604; 
}

.imagefornav {
 
    width: 160px;
    height: 100px;
    
}



body, html {
    height: 100%;
    margin: 0;
    margin-top: 0;
    padding: 0;
    font-family: Verdana, sans-serif;
    line-height: 35px;  
    font-weight: 300;
    color: #797a7c;
}

.title {
      letter-spacing: 5px;
    color: #1d3863; 
      text-align: center;
      text-decoration: underline overline;
    font-size: 35px;
      line-height: 75px;
    margin-top: 13%;
      text-transform: uppercase;
    opacity: 1.00;
    padding-right: 370px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 370px;
    animation: Fadein 2s ease-in;
}

@keyframes Fadein {
    
 from {
     opacity: 0;
    }
    
    to {
        opacity: 0.80;
    }
    
}

.imgc1, #imgc2, #imgc3, #imgc4 {
 position: relative;
     opacity: 0.80;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


.imgc1 {
    
    background-image: url("http://pluspng.com/img-png/ocean-background-png-hd-superior-ocean-background-wallpapers-widescreen-for-desktop-2560.jpg");
    height: 700px;
    width: 100%;
    margin: 0;
    margin-top: -16px;
    
}

.border1 {
 
    padding: 1px;
    background-color: #111;
 font-family: arial, sans-serif;
    
}


#imgc2 {
     background-image: url("https://wallpaperstream.com/wallpapers/full/desert-sand/Algodones-Dunes-Desert-Sand-HD-Wallpaper.jpg");
    height: 600px;
    background-position: center right;

}

#Imgtxt1 {
    font-size: 41px;
    line-height: 100px; 
    color: #111111;
    padding-top: 100px;

    
}



#imgc3 {
     background-image: url("http://pluspng.com/img-png/ocean-background-png-hd-superior-ocean-background-wallpapers-widescreen-for-desktop-2560.jpg");
    height: 650px;
   
}

#section1 {
 text-align: center;
    padding: 50px 70px;
    font-size: 19px;
     
   
}

#section2 {
 text-align: center;
    padding: 50px 70px;
    background-color: #666;
        color: #f4f4f4;
    height: 50%;
    margin: 0px;

    
    
}

#section3 {
 height: 400px;
    width: 100%;
    
    
}

.invis {
 visibility: hidden;   
}

#BF {
   
    font-size: 15px;
    animation: Comein 200s ease-in;
   padding-left: 0px;
    text-align: left;
    visibility: hidden;
    opacity: 0;
}

@keyframes Comein {
    
 0% {
     opacity: 0;
     padding-left: 0px;
    visibility: hidden;
    }
    
    6% {
        opacity: 0;
     padding-left: 0px;
    visibility: hidden;
    }
    
    7% {
     
     opacity: 1;   
        padding-left: 600px;
         visibility: visible;
    }
    
    100% {
       
        padding-left: 601px;
        opacity: 1;   
    }
    
    
}

#ranger {
    font-size: 25px;
    padding-left: 5px;
}

#borderabout {
    background-color: #666;
    width: 100%;
    color: #FFFFFF;
    text-align: center;
    border-radius: 25px;
    opacity: 0.70;
}

#borderourgoal {
      font-size: 35px;
    line-height: 70px;
}

#ourgoal {
    
    letter-spacing: 10px;
}

#you {
    
    font-size: 60px;
    
}

#about {
 
    letter-spacing: 10px;
    
}


#border3 {
 
    background-color: #1be2e5;
    opacity: 0.60;
    height: 650px;
    color: #111111;
    
    
}

#opacityforborder3 {
 
  
  padding-top: 200px;
    font-size: 30px;
    
}

#imgtxt2 {
    
  height: 100%;
    
}
   

.button1 {
    
    border-radius: 15px;
     margin-top: 80px;
    margin-left: 605px;
    border: none;
     background-color: #666;
  color: #FFFFFF;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  font-size: 25px;
    
}

.button1:hover {
 
    background-color: #FFFFFF;
  color: #666;
     border-style: solid;
  border-width: 1.5px;
    border-color: #666;
    
}

#contacts {
    
    font-size: 25px;
    text-align: center;
    width: 100%;
}



#button2 {
    
    padding: 10px;
    margin-left: 300px;
     height: 100px;
     width: 100px;
     background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Gmail_Icon.svg/100px-Gmail_Icon.svg.png");
    border: none;
    border-radius: 25px;
    margin-top: 25px;
    
    
}

#button2:hover {
    
    padding: 10px;
    margin-left: 285px;
     height: 140px;
     width: 140px;
     background: url("https://lh6.ggpht.com/8-N_qLXgV-eNDQINqTR-Pzu5Y8DuH0Xjz53zoWq_IcBNpcxDL_gK4uS_MvXH00yN6nd4=w140-rw");
    border: none;
    border-radius: 25px;
    margin-top: 5px;
   
    
    
}

#Mygmail {
 
    font-size: 20px;
    margin-left: 290px;
    margin-bottom: 0px;
    width: 75%;
    
   
}

#dots {
    
 visibility: hidden;
    
}

#refs {
 
    float: right;
    margin-right: 10px;
    
}

#linktext {
 
    font-size: 17px;
    margin-left: 35px;
    
    
}

#link01 {
    
    margin-left: 300px;
    
}


#link1 {
 
    margin-left: 170px;
    
}

#link2 {
    
    margin-left: 60px;
    
}

#link3 {
    
    margin-left: 125px;
    
}

#link4 {
    
    margin-left: 50px;
    
}

a {
    
    color: #60d16b;
    
}



#imgc4 {
    
     background-color: #666;
    height: 300px;
    color: #FFFFFF;
   
}

#image1 {
    
    height: 265px;
    width: 400px;
    margin-top: 20px;
    margin-left: 20px;
}

#byme {
    
 margin-left: 350px;
    font-size: 13px;
    
}

<!DOCTYPE html>
<html>
<head>
    <title>Resource Rangers</title>
    <link href="CSS for 4th project (1).css" rel="stylesheet">
</head>
<style>
</style>
<body>
    <div class="List">
        <a class="a1" href="about.asp">Lack of Water</a>
        <a href="about.asp">Waters Journey</a>
        <a href="contact.asp">How</a>
        <a href="news.asp">Why?</a>
        <a class="on" href="default.asp">Home</a>
    </div>
    <div class="imgc1"><br>
        <div class="title">
            <div class="border1">
                <h3 align="center"> Resource Rangers </h3>
            </div>
        </div>
    </div>

    <div id="section1">
        <div id="about">
            <h2> About </h2>
        </div>
        <section>
            <div id="borderabout">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse blandit tortor varius, suscipit
                    felis nec, consectetur est. Fusce at commodo velit. Aenean dictum ipsum est, ut congue ligula
                    condimentum et. Nullam cursus a purus id maximus. Sed ullamcorper erat neque, placerat pellentesque
                    lectus scelerisque sit amet. Fusce mi enim, bibendum gravida ex vel, dignissim aliquam dui. Etiam
                    porta augue non dignissim sagittis. Suspendisse at quam a felis hendrerit aliquam. Sed elementum
                    dapibus venenatis. Sed a neque ac tellus auctor dictum ac ut ante. Cras a lectus et nisl faucibus
                    venenatis. Pellentesque placerat dolor at dolor bibendum maximus. Nullam faucibus massa at enim
                    blandit ultrices. Nulla dapibus lacinia turpis eu aliquam. Morbi at fringilla tortor, eu eleifend
                    leo. <span id="ranger">Resource Ranger!</span>
                </p>
            </div>
        </section>
    </div>

    <div id="imgc2">
        <div id="Imgtxt1">
            <div id="border2">
                <h1 align="center"> "When the Wells dry, we know the worth of water"
                    <span class="invis">.</span>
                    <div id="BF"> - Benjamin Franklin </div>
                </h1>
            </div>
        </div>
    </div>
    <div id="section2">
        <section>
            <div id="ourgoal">
                <h2> Our Goal </h2>
            </div>
            <div id="borderourgoal">
                <p>
                    <span id="you">You</span> to be inspired to and help you get involved, for the benefit of our
                    community of , as well as the global community, and our planet.
                </p>
            </div>
        </section>
    </div>
    <div id="imgc3">
        <div id="Imgtxt2">
            <div id="border3">
                <div id="opacityforborder3">
                    <h1 align="center" class="moreinfo"> To find out more information </h1>
                    <button class="button1" onclick="location.href = 'default.asp';">Click Here</button>
                </div>
            </div>
        </div>
    </div>
    <div id="section3">
        <span id="contacts">
            <h2> Contacts </h2>
        </span>
        <div id="Mygmail">
            <h3> My Gmail
                <span id="dots">......................................................</span>More References
            </h3>
        </div>
        <div id="stuff1">
            <button id="button2" onclick="location.href = 'https://www.lipsum.com/feed/html';"></button>
            <span id="refs"> <span id="linktext">Here are some more links if you are looking to go more in depth into
                    water conservation! </span><br>
            <span id="link01"><a href="https://saveourwater.com">https://saveourwater.com</a></span><br>
            <span id="link1"> <a href="https://www.farnellfamily.com/cfarnell/why/default.html">https://www.farnellfamily.com/cfarnell/why/default.html</a></span><br>
            <span id="link2"> <a href="https://learn.eartheasy.com/guides/45-ways-to-conserve-water-in-the-home-and-yard/">https://learn.eartheasy.com/guides/45-ways-to-conserve-water-in-the-home-and-yard/</a></span><br>
            <span id="link3"> <a href="https://www.constellation.com/energy-101/water-conservation-tips0.html">https://www.constellation.com/energy-101/water-conservation-tips0.html</a></span><br>
            <span id="link4"> <a href="https://www.lipsum.com/feed/html">https://www.lipsum.com/feed/html</a></span></span>
        </div>
    </div>
    <div id="imgc4">
        <div id="Imgtxt3">
            <div id="border4">
                <img id="image1" src="wix3.png">
                <span id="byme">By All rights reserved</span>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript"></script>

</html>

schoolcoder · Answer 1 · 11 июня 2019

Отредактировал фрагмент. В html используйте «список» вместо «список». Также я сделал, .list положение как исправлено.

.list {
  background-color: #666;
    color: #111111;
    height: 105px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
}

.list a {
    
  margin-top: 20px;  
  float: right;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 25px;   
    
}

.list a:hover {
  background-color: #70b5ff;
  color: #111111;
}

.list a.on {
background-color: #81ff7c;
  color: #005604; 
}

.imagefornav {
 
    width: 160px;
    height: 100px;
    
}



body, html {
    height: 100%;
    margin: 0;
    margin-top: 0;
    padding: 0;
    font-family: Verdana, sans-serif;
    line-height: 35px;  
    font-weight: 300;
    color: #797a7c;
}

.title {
      letter-spacing: 5px;
    color: #1d3863; 
      text-align: center;
      text-decoration: underline overline;
    font-size: 35px;
      line-height: 75px;
    margin-top: 13%;
      text-transform: uppercase;
    opacity: 1.00;
    padding-right: 370px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 370px;
    animation: Fadein 2s ease-in;
}

@keyframes Fadein {
    
 from {
     opacity: 0;
    }
    
    to {
        opacity: 0.80;
    }
    
}

.imgc1, #imgc2, #imgc3, #imgc4 {
 position: relative;
     opacity: 0.80;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


.imgc1 {
    
    background-image: url("http://pluspng.com/img-png/ocean-background-png-hd-superior-ocean-background-wallpapers-widescreen-for-desktop-2560.jpg");
    height: 700px;
    width: 100%;
    margin: 0;
    margin-top: -16px;
    
}

.border1 {
 
    padding: 1px;
    background-color: #111;
 font-family: arial, sans-serif;
    
}


#imgc2 {
     background-image: url("https://wallpaperstream.com/wallpapers/full/desert-sand/Algodones-Dunes-Desert-Sand-HD-Wallpaper.jpg");
    height: 600px;
    background-position: center right;

}

#Imgtxt1 {
    font-size: 41px;
    line-height: 100px; 
    color: #111111;
    padding-top: 100px;

    
}



#imgc3 {
     background-image: url("http://pluspng.com/img-png/ocean-background-png-hd-superior-ocean-background-wallpapers-widescreen-for-desktop-2560.jpg");
    height: 650px;
   
}

#section1 {
 text-align: center;
    padding: 50px 70px;
    font-size: 19px;
     
   
}

#section2 {
 text-align: center;
    padding: 50px 70px;
    background-color: #666;
        color: #f4f4f4;
    height: 50%;
    margin: 0px;

    
    
}

#section3 {
 height: 400px;
    width: 100%;
    
    
}

.invis {
 visibility: hidden;   
}

#BF {
   
    font-size: 15px;
    animation: Comein 200s ease-in;
   padding-left: 0px;
    text-align: left;
    visibility: hidden;
    opacity: 0;
}

@keyframes Comein {
    
 0% {
     opacity: 0;
     padding-left: 0px;
    visibility: hidden;
    }
    
    6% {
        opacity: 0;
     padding-left: 0px;
    visibility: hidden;
    }
    
    7% {
     
     opacity: 1;   
        padding-left: 600px;
         visibility: visible;
    }
    
    100% {
       
        padding-left: 601px;
        opacity: 1;   
    }
    
    
}

#ranger {
    font-size: 25px;
    padding-left: 5px;
}

#borderabout {
    background-color: #666;
    width: 100%;
    color: #FFFFFF;
    text-align: center;
    border-radius: 25px;
    opacity: 0.70;
}

#borderourgoal {
      font-size: 35px;
    line-height: 70px;
}

#ourgoal {
    
    letter-spacing: 10px;
}

#you {
    
    font-size: 60px;
    
}

#about {
 
    letter-spacing: 10px;
    
}


#border3 {
 
    background-color: #1be2e5;
    opacity: 0.60;
    height: 650px;
    color: #111111;
    
    
}

#opacityforborder3 {
 
  
  padding-top: 200px;
    font-size: 30px;
    
}

#imgtxt2 {
    
  height: 100%;
    
}
   

.button1 {
    
    border-radius: 15px;
     margin-top: 80px;
    margin-left: 605px;
    border: none;
     background-color: #666;
  color: #FFFFFF;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  font-size: 25px;
    
}

.button1:hover {
 
    background-color: #FFFFFF;
  color: #666;
     border-style: solid;
  border-width: 1.5px;
    border-color: #666;
    
}

#contacts {
    
    font-size: 25px;
    text-align: center;
    width: 100%;
}



#button2 {
    
    padding: 10px;
    margin-left: 300px;
     height: 100px;
     width: 100px;
     background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Gmail_Icon.svg/100px-Gmail_Icon.svg.png");
    border: none;
    border-radius: 25px;
    margin-top: 25px;
    
    
}

#button2:hover {
    
    padding: 10px;
    margin-left: 285px;
     height: 140px;
     width: 140px;
     background: url("https://lh6.ggpht.com/8-N_qLXgV-eNDQINqTR-Pzu5Y8DuH0Xjz53zoWq_IcBNpcxDL_gK4uS_MvXH00yN6nd4=w140-rw");
    border: none;
    border-radius: 25px;
    margin-top: 5px;
   
    
    
}

#Mygmail {
 
    font-size: 20px;
    margin-left: 290px;
    margin-bottom: 0px;
    width: 75%;
    
   
}

#dots {
    
 visibility: hidden;
    
}

#refs {
 
    float: right;
    margin-right: 10px;
    
}

#linktext {
 
    font-size: 17px;
    margin-left: 35px;
    
    
}

#link01 {
    
    margin-left: 300px;
    
}


#link1 {
 
    margin-left: 170px;
    
}

#link2 {
    
    margin-left: 60px;
    
}

#link3 {
    
    margin-left: 125px;
    
}

#link4 {
    
    margin-left: 50px;
    
}

a {
    
    color: #60d16b;
    
}



#imgc4 {
    
     background-color: #666;
    height: 300px;
    color: #FFFFFF;
   
}

#image1 {
    
    height: 265px;
    width: 400px;
    margin-top: 20px;
    margin-left: 20px;
}

#byme {
    
 margin-left: 350px;
    font-size: 13px;
    
}

<!DOCTYPE html>

<html>
   
    
    
    
<head>
	<title>Resource Rangers</title>
    <link href ="CSS for 4th project (1).css" rel ="stylesheet">
</head>
    
    
    <style>

    </style>

    
    
<body>
    
    
    
 <div class="list">
  <a class= "a1" href="about.asp">Lack of Water</a>
  <a href="about.asp">Waters Journey</a>
        <a href="contact.asp">How</a>
        <a href="news.asp">Why?</a>
        <a class= "on" href="default.asp">Home</a>
</div>
    <div class= "imgc1">

<br>
    
    
    <div class= "title">
        <div class= "border1">
            <h3 align="center"> Resource Rangers </h3>
        </div>
    </div>
</div>
    
    <div id= "section1">
        <div id= "about">
        <h2> About </h2>
            </div>
        <section>
        <div id= "borderabout">
        <p> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse blandit tortor varius, suscipit felis nec, consectetur est. Fusce at commodo velit. Aenean dictum ipsum est, ut congue ligula condimentum et. Nullam cursus a purus id maximus. Sed ullamcorper erat neque, placerat pellentesque lectus scelerisque sit amet. Fusce mi enim, bibendum gravida ex vel, dignissim aliquam dui. Etiam porta augue non dignissim sagittis. Suspendisse at quam a felis hendrerit aliquam. Sed elementum dapibus venenatis. Sed a neque ac tellus auctor dictum ac ut ante. Cras a lectus et nisl faucibus venenatis. Pellentesque placerat dolor at dolor bibendum maximus. Nullam faucibus massa at enim blandit ultrices. Nulla dapibus lacinia turpis eu aliquam. Morbi at fringilla tortor, eu eleifend leo. <span id= "ranger">Resource Ranger!</span>

        </p>
        </div> 
            </section> 
         </div>
    
<div id= "imgc2">
    <div id="Imgtxt1">
        <div id= "border2">
            <h1 align="center"> "When the Wells dry, we know the worth of water"       
                <span class= "invis">.</span> <div id= "BF"> - Benjamin Franklin </div> </h1>
        </div>
    </div>
</div>
    
    
    
    <div id= "section2">
      <section>
          <div id= "ourgoal">
        <h2> Our Goal </h2>
          </div>
          <div id= "borderourgoal">
          <p> 
               <span id= "you">You</span> to be inspired to  and help you get involved, for the benefit of our community of , as well as the global community, and our planet. 
        </p>
          </div>
         </section> 
         </div>
    
    
<div id= "imgc3">
    <div id="Imgtxt2">
        <div id= "border3">
            <div id= "opacityforborder3">
            <h1 align="center" class= "moreinfo"> To find out more information </h1>
                <button class= "button1" onclick="location.href = 'default.asp';">Click Here</button>
        </div>
        </div>
    </div>
</div>
    
    
     <div id= "section3">
         <span id= "contacts">
         <h2> Contacts </h2>
         </span>
         <div id= "Mygmail">
         <h3> My Gmail<span id= "dots">......................................................</span>More References</h3></div>
       
         
         <div id= "stuff1">
         <button id= "button2" onclick="location.href = 'https://www.lipsum.com/feed/html';"></button>
             
             <span id= "refs">  <span id= "linktext">Here are some more links if you are looking to go more in depth into water conservation! </span><br> 
                 
                 
                  <span id="link01"><a href="https://saveourwater.com">https://saveourwater.com</a></span>
    <br>  
                 <span id= "link1"> <a href="https://www.farnellfamily.com/cfarnell/why/default.html">https://www.farnellfamily.com/cfarnell/why/default.html</a></span><br>
                 
           <span id= "link2"> <a href="https://learn.eartheasy.com/guides/45-ways-to-conserve-water-in-the-home-and-yard/">https://learn.eartheasy.com/guides/45-ways-to-conserve-water-in-the-home-and-yard/</a> </span><br>
                 
                 <span id= "link3"> <a href="https://www.constellation.com/energy-101/water-conservation-tips0.html">https://www.constellation.com/energy-101/water-conservation-tips0.html</a></span><br>
                 
             <span id= "link4"> <a href="https://www.lipsum.com/feed/html">https://www.lipsum.com/feed/html</a></span></span>
             </div>
         </div>
    
    
    <div id= "imgc4">
    <div id="Imgtxt3">
        <div id= "border4">
        
            <img id= "image1" src="wix3.png">
            <span id="byme">By All rights reserved</span>
            
        </div>
    </div>
</div>
    
    

    
</body>
    <script type="text/javascript">
        
        </script>
</html>

SM Imtiaz Hussain · Answer 2 · 12 июня 2019

в имени вашего html класса "List", где в css его "list". измените «Список» на «список» в HTML. Пожалуйста, оставьте имя класса в HTML и CSS одинаковыми. иначе они не будут работать.

.list {
    background-color: #666;
    color: #111111;
    height: 105px;
    width: 100%;
}

    <div class="List">
    
    </div>
    
<!--    in the above class name is "List". change it to "list" -->
   <div class="list">

   </div>

Jasper Scheper · Answer 3 · 11 июня 2019

В вашем html вы применяете класс List. однако в вашем CSS вы называете .list (строчная буква l).

Измените свой класс HTML на list, и он будет работать.

Простая панель навигации не работает: показывается только пустой div

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 3 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Простая панель навигации не работает: показывается только пустой div

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 3 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Нет похожих вопросов