如何在横幅上获得导航栏？

我想将导航栏放在横幅上？这可能吗。我一直在做下面的CSS来试图实现，它的工作原理，但它超出了包装的范围。这里是下面的CSS：如何在横幅上获得导航栏？

.navbar-buttons{ 
    padding-top:10px; 
    padding-right:20px; 
    text-align:right; 
    list-style:none; 
    margin:0 auto; 
    overflow:hidden; 
    <!---I commented it out because like I mentioned above, goes out of scope---> 
    <!---background-image: url(./img/Intranet_Banner.jpg);---> 
    width:100%; 
} 

#wrapper { 
    width: 940px; 
    height:100%; 
    margin: 0 auto; 
}

以下是html页面navpage：

<div id="wrapper"> 

<!-- content-wrap starts here --> 
<div id="content-wrapper">  

    <img src="img/Banner.jpg" alt="Banner" class="no-border img-banner" /> 

      <!-- Menu Tabs --> 
     <ul> 
      <li class="navbar-buttons"><a href="index.cfm"><span>Home</span></a>&nbsp;<span style="color:blue !important">|</span>&nbsp;<a href="Resources.cfm"><span>IT Support</span></a></li> 

     </ul> 
</div>

来源

2016-06-21 Roberto Flores

应该真正从你的短语手册中消除。除此之外，请更具体地说明您要在此实现的目标。 “在旗帜上”并不是非常具体。此外，CSS评论是'/ * Comment * /'，而不是'<！ - Comment - >' –

@Wes Foster：我的意思是导航栏的链接位于图片上。所以图像是我可以实现的导航栏的背景，但问题是它超出了范围。并感谢您的建议 –

@ Wes Foster：是的，您对css的评论是正确的，但它是在html页面中完成的，因为我不确定如何使用Coldfusion并将css文件链接到cfm文件 –

可以使用background-image属性来设置background-image上#content-wrapper，而不是试图继续前进的顶部列表。图片。

我做了一些调整，以您的代码： “？有没有可能”

.navbar-buttons { 
 
    padding-top: 10px; 
 
    padding-right: 20px; 
 
    list-style: none; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
    width: 100%; 
 
} 
 
#content-wrapper { 
 
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/93/Long_sky_background_%2B_PAN.jpg'); 
 
} 
 
#wrapper { 
 
    width: 940px; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
} 
 
a { 
 
    color: white; 
 
}

<div id="wrapper"> 
 

 
    <!-- content-wrap starts here --> 
 
    <div id="content-wrapper"> 
 
    <!-- Menu Tabs --> 
 
    <ul> 
 
     <li class="navbar-buttons"><a href="index.cfm"><span>Home</span></a>&nbsp;<span style="color:white !important">|</span>&nbsp;<a href="Resources.cfm"><span>IT Support</span></a> 
 
     </li> 
 

 
    </ul> 
 
    </div> 
 

 
</div>

View on JSFiddle

来源

2016-06-21 16:24:38 Anthony

Thanks @安东尼，它帮助。 –

没问题。很高兴帮助 – Anthony

如何在横幅上获得导航栏？

回答

相关问题