Как применить CSS к панели навигации с мастер-страницами?

Я работаю над проектом, но имею проблему с применением CSS только для панели навигации. Мой проект содержитКак применить CSS к панели навигации с мастер-страницами?

главная страница
Home.aspx
gallery.aspx

Когда я применяю menu.css файл в панели навигации на master.page это влияет остальные таблицы, а также другого контента страницы (home.aspx и gallery.aspx) мой код выглядит следующим образом:

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 a { 
    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 all linear; 
    -moz-transition: .2s all linear; 
    -o-transition: .2s all linear; 
    transition: .2s all linear; 
} 

#li:nth-child(1) a { 
    border-color: #636393; 
} 

#li:nth-child(2) a { 
    border-color: #B5222D; 
} 

#li:nth-child(3) a { 
    border-color: #D4953C; 
} 

#li:nth-child(4) a { 
    border-color: #609491; 
} 

#li:nth-child(5) a { 
    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; 
}

Пожалуйста, помогите мне.

источник

2013-05-15 Umar Khan

Чтобы применить CSS к одному элементу, используйте id, например. затем в CSS:

#nav { 
    color:yellow; 
} 
#nav li { 
    font-size:19pt; 
}

Остальные элементы (без id == nav) не будут затронуты.

Пример: http://jsfiddle.net/igos/tJWq6/

источник

2013-05-15 09:21:38

Как применить CSS к панели навигации с мастер-страницами?

ответ

Смежные вопросы