Не могу заставить работать NAV LINKS

Question

Не могу заставить работать NAV LINKS

0

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

Кто-нибудь может понять, почему?

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;
}

user3294450 16 фев. 2014, в 03:31

Источник

Теги:

html

css

navigation

hyperlink

2 ответа

Ещё вопросы

Boshi · Answer 1 · 2014-02-16T03-08-00.000Z

В следующем коде 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;
}

Varinder · Answer 2 · 2014-02-16T01-30-00.000Z

Есть несколько исправлений CSS, которые можно сделать

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

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

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

ниже исправлено 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/