c# - How to apply CSS to navigation bar with master pages? -
i working on project, having problem applying css navigation bar. project contains
- master page
- home.aspx
- gallery.aspx
when apply menu.css
file navigation bar on master.page
effects rest of tables other content pages (home.aspx , gallery.aspx) code looks following:
master.page
<body style="background-image: url('/website5/bacground/fruit-drinks-vector-pptbackgrounds.jpg')"> <form id="form1" runat="server"> <div> <asp:contentplaceholder id="contentplaceholder1" runat="server"> <table align="center" class="style1"> <tr> <td style="text-align: center"> <img alt="" class="style2" src="bacground/logo.png" /> </td> </tr> <tr> <td> <uc1:menu id="menu1" runat="server" /> </td> </tr> </table> </asp:contentplaceholder> </div> <table class="style3"> <tr> <td style="text-align: center"> <asp:contentplaceholder id="contentplaceholder3" runat="server"> </asp:contentplaceholder> </td> </tr> </table> </form> </body>
menu.ascx
<table class="style1"> <tr> <td> <ul id="nav">`enter code here` <li class="home" aria-orientation="horizontal"><a href="#">home</a></li> <li class="gallery"><a href="#">gallery</a></li> <li class="events"><a href="#">events</a></li> <li class="about us"><a href="#">about us</a></li> <li class="contact"><a href="#">contact</a></li> </ul> </td> </tr> </table>
menu.css
#ul li { list-style: none; height: 44px; float: left; padding: 10px 5px; width: 175px; } #ul li { width: 146px; height: 40px; line-height: 53px; border-bottom: 4px solid #636393; padding:0px; color: #fff; font-size:18px; font-weight:lighter; text-align:center; text-decoration: none; display: block; -webkit-transition: .2s linear; -moz-transition: .2s linear; -o-transition: .2s linear; transition: .2s linear; } #li:nth-child(1) { border-color: #636393; } #li:nth-child(2) { border-color: #b5222d; } #li:nth-child(3) { border-color: #d4953c; } #li:nth-child(4) { border-color: #609491; } #li:nth-child(5) { border-color: #87a248; } #li:nth-child(1) a:hover { border-bottom: 35px solid #636393; height: 9px; } #li:nth-child(2) a:hover { border-bottom: 35px solid #b5222d; height: 9px; } #li:nth-child(3) a:hover { border-bottom: 35px solid #d4953c; height: 9px; } #li:nth-child(4) a:hover { border-bottom: 35px solid #609491; height: 9px; } #li:nth-child(5) a:hover { border-bottom: 35px solid #87a248; height: 9px; }
please me.
to apply css 1 element use id, ex. in css:
#nav { color:yellow; } #nav li { font-size:19pt; }
rest of elements (without id==nav) not affected.
example: http://jsfiddle.net/igos/tjwq6/
Comments
Post a Comment