我的导航无法使用锚点?

时间:2018-04-18 18:57:53

标签: html css scroll navigation horizontal-scrolling

我的网站:emilyjane.ca

我的导航不会在我的水平滚动网站中正确跳转到这些部分,我无法弄清楚出了什么问题。每个部分都有一个大的div,里面包含所有元素。我已将导航与href“#”相关联,并将其链接到我的html中的ID以创建锚点。打印导航菜单链接根本没有移动到正确的位置。请帮忙!

CSS& HTML

#printsection {
    width: 3700px;
    height: 530px;
    float: left;
    margin-left:30px;
    margin-top: 30px;
     position: relative;

}

#title {
    float: left;
    margin-top: 100px;
    margin-left:0px;
}


#page2silk {
 width: 300px;
    float: left;
    clear: both;
    margin-top:0px;
    margin-left:200px;
    position:absolute;
    /*width: 300px;
    float: left;
    margin-top:0px;
    margin-left: 300px;
    position:absolute;*/

    
}


.silk {
    float:left;
  width:600px;
    margin: 0px 0px 600px 150px;
    overflow:hidden;
    position:absolute;
    
}
<div class="navbar" id="nav">
           <ul>
            <li> <a href="#printsection">PRINT</a></li>
            <li> <a href="#websection">DIGITAL</a></li>
            <li> <a href="#illustrations">ILLUSTRATION</a></li>
            <li> <a href="#photography"> PHOTOGRAPHY</a></li>
            <li  class="letstalk"> <a href="#letstalk"> LETS TALK</a></li>
          <li> <a href="#https://www.instagram.com/emilyjane.design/" class="fa fa-instagram"></a></li> 
         
            </ul>



    </div>
        
        
        <div id="printsection">
        <section id="title" > 
          
 <h4>
   <span> PR</span>
   <span> INT </span>
  </h4>
        </section> 
            
    <section id="page2silk" > 
            
        <h3> 
        Branding + Packaging 
         </h3>
        
        <h1> 
        Silk Rebrand 
        </h1>
        
        <h2> 
        A rebrand of the packaging and identity for Silk Almond Milk. It is packaged in a frosted glass bottle, which is eco-friendly by being 100% recyclable. The brand is stongly type based, using the typeface Acumin Pro. 
        </h2>
        <section>       
     <img src="a3_ilse_website/Desktop_A3-assets/silk.png" alt="silk" class="silk"/> </section>
</section>
          </div>

0 个答案:

没有答案