Невозможно заставить NAV LINKS работать

Я не могу заставить свои навигационные ссылки работать, и я понятия не имею, почему. Раньше они работали раньше, но после того, как я добавил немного больше кода, они, похоже, остановились.Невозможно заставить NAV LINKS работать

У кого-нибудь есть идеи, почему?

HTML

<body> 
<div id="page-wrap"> 
    <div id="header"> 
     <img src="images/header.png" /> 
    </div> 
    <img src="images/navbar.png" /> 
    <ul id="nav"> 
     <li><a href="http://www.voyage-us.com">Home</a></li> 
     <li><a href="http://www.voyage-us.com/xenforo/upload/index.php">Forums</a></li> 
     <li><a href="http://www.google.com">Members</a></li> 
     <li><a href="http://www.google.com">Streams</a></li> 
     <li><a href="http://www.google.com">Contact Us</a></li> 
    </ul> 
    <div id="mainbody"> 
     <img src="images/mainbody.png" /> 

     <div class="news1"> 
      <img src="images/news1.png" /></div> 

     <div class="teamspeak"> <!--Teamspeak IMG--> 
      <img src="images/teamspeak.png" /></div> 

     <div id="ts3viewer_1037062" /></div> <!-- Teamspeak Widget --> 

     <script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script> 

     <script type="text/javascript"> 
     <!-- 
     var ts3v_url_1 = "http://www.tsviewer.com/ts3viewer.php?ID=1037062&text=000000&text_size=12&text_family=2&js=1&text_s_color=ffffff&text_s_weight=bold&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_s_color_h=ffffff&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=underline&text_i_color=ffffff&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_i_color_h=ffffff&text_i_weight_h=normal&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=underline&text_c_color=ffffff&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_c_color_h=ffffff&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=underline&text_u_color=ffffff&text_u_weight=bold&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_u_color_h=ffffff&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none"; 
     ts3v_display.init(ts3v_url_1, 1037062, 100); 
     --> 
     </script> 
    </div> 

    <div id="footer"> 
     <p>&copy;2014 Rythmn Designs<p></div> 
</div> 
</body>

CSS

body 
{ 
margin: 0px; 
padding: 0px; 
background: url("http://puu.sh/6RlKi.png") 
} 

.clear 
{ 
clear:both; 
} 

#page-wrap 
{ 
width: 1019px; 
margin: 0 auto; 
} 

#header 
{ 
width:100%; 
text-align: center; 
display: block; 
} 

#nav 
{ 
height: 1px; 
list-style: none; 
padding-left: 14px; 
text-align: center; 
padding-bottom: 0px; 
margin: -14px; 
margin-top: -15px; 
} 

#nav li a 
{ 
position:relative; 
top: -12px; 
display: block; 
width: 100px; 
float: left; 
color: white; 
font-size: 14.09px; 
text-decoration: none; 
font-family:"BankGothic Md BT" 
} 

#nav li a:hover, #nav li a:active 
{ 
color: red; 
} 

#mainbody 
{ 
vertical-align:top; 
position:relative 
} 

.news1 
{ 
margin: 0 auto; 
position: absolute; 
top: 155px; 
right: 375px 
} 

.teamspeak 
{ 
position: absolute; 
top: 155px; 
right: 30px 

} 

#ts3viewer_1037062 
{ 
position:absolute; 
top: 185px; 
right: 30px; 
width: 290px; 
height:190px; 
overflow:auto; 
} 

#footer 
{ 
background: #181818; 
color: white; 
padding: 20px 0 20px 0; 
text-transform: uppercase; 
border-top: 15px solid #828080; 
text-align: center; 
font-family:"BankGothic Md BT"; 
font-size: 12px; 
position: relative; 
}

источник

2014-02-16 user3294450

Есть несколько CSS решений, которые могут быть сделаны

Так нав элементов (<a> тегов) всплывают, что означает, что вы должны очистить свои поплавки , Быстрый способ сделать это было бы использовать overflow:hidden на родительский элемент (в данном случае, я бы с ul, который #nav)

заметил Также некоторые отрицательные поля применяются на #nav элемента. Я не уверен, что это было дизайнерское решение - в любом случае, комментируя их, вы не сможете выйти из экрана.

И везде, где это возможно - старайтесь избегать придания высоты элемента к элементам.

ниже ammended CSS для #nav

#nav { 
    /*height: 1px;*/ 
    list-style: none; 
    padding-left: 14px; 
    text-align: center; 
    padding-bottom: 0px; 
    /* 
     margin: -14px; 
     margin-top: -15px; 
    */ 
    overflow:hidden; 
}

Перемещение на навигационные ссылки #nav li a. Опять же, не уверен, что это дизайнерское решение, но position:relative; и top:-12px, похоже, сломают его.

#nav li a { 
    /*position:relative; 
    top: -12px;*/ 
    display: block; 
    width: 100px; 
    float: left; 
    color: white; 
    font-size: 14.09px; 
    text-decoration: none; 
    font-family:"BankGothic Md BT" 
}

скрипку: http://jsfiddle.net/Varinder/8A9sW/1/

источник

2014-02-16 02:33:59 Varinder

В вашем следующем коде CSS, высота 1px создает проблему. Сделайте это 20-25px и проверьте или просто удалите height:1px;, если это не повлияет на ваш дизайн.

#nav 
{ 
height: 1px; 
list-style: none; 
padding-left: 14px; 
text-align: center; 
padding-bottom: 0px; 
margin: -14px; 
margin-top: -15px; 
}

источник

2014-02-16 04:17:02 Boshi

Невозможно заставить NAV LINKS работать

ответ

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