c# - How to apply CSS to navigation bar with master pages? -


i working on project, having problem applying css navigation bar. project contains

  1. master page
  2. home.aspx
  3. 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

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -