user2679758
user2679758

Reputation: 1

why cant I click om my navigationbar links?

i´m a beginner, and i try to do a webpage. i have tryed to made some links. but they are all unclickble. is there anything wrong in my html:

    <div class="navbar">
    <nav>
        <ul>
            <li id="nav-blog"><a class="nav2" href="http://www.ingridoscar.se/blog.html/">Blog</a></li>
            <li id="nav-gallery"><a class="nav2" href="http://www.ingridoscar.se/gallery.html/">Gallery</a></li>
            <li id="nav-about"><a class="nav2" href="http://www.ingridoscar.se/about.html/">About</a></li>
            <li id="nav-newsletter"><a class="nav2" href="http://www.ingridoscar.se/newsletter.html/">Newsletter</a></li>
            <li id="nav-support"><a class="nav2" href="http://www.ingridoscar.se/support.html/">Support</a></li>
            <li id="nav-location"><a class="nav2" href="http://www.ingridoscar.se/location.html/">Location</a></li>
            <li  id="nav-ywampismo"><a class="nav2" href="http://www.ywampismobeach.org/">YWAM Pismo</a></li>
        </ul>       
        <div id="logo"><a href="http://www.ingridoscar.se/index.html/"><img src='logo150px.png'></a></div>
    </nav>
    </div>

Or is the problem in the css? I tryed to style it, but when I was done the links didnt work. there probabli is hundreds of better ways to do the styling , but I just want my links to work.:

 .navbar
{
    height:200px;
    background:#f1f1f1;
    position:fixed;
    top:54px;
    left:-1px;
    width:110%;
}ul
{
    list-style-type:none;
    margin:auto auto auto 350px;
    padding:0;
}li
{
    float:left;
}.nav1
{
    display:block;
    width:50px;
}.nav2
{
    display:block;
    width:auto;
    height:auto;
    margin:75px 30px auto;
    font-family: "Roboto", sans-serif;
    color:gray;
    line-height: 35px;
    text-align: right; 
    text-transform:uppercase;
    text-decoration:none;
}#logo
{
    position:relative;
    top:25px;
}

thx for help

Upvotes: 0

Views: 413

Answers (1)

Myke
Myke

Reputation: 46

You have a / after .html on each of your links. Take that off so it looks like this

<div class="navbar">
    <nav>
        <ul>
            <li id="nav-blog"><a class="nav2" href="http://www.ingridoscar.se/blog.html">Blog</a></li>
            <li id="nav-gallery"><a class="nav2" href="http://www.ingridoscar.se/gallery.html">Gallery</a></li>
            <li id="nav-about"><a class="nav2" href="http://www.ingridoscar.se/about.html">About</a></li>
            <li id="nav-newsletter"><a class="nav2" href="http://www.ingridoscar.se/newsletter.html">Newsletter</a></li>
            <li id="nav-support"><a class="nav2" href="http://www.ingridoscar.se/support.html">Support</a></li>
            <li id="nav-location"><a class="nav2" href="http://www.ingridoscar.se/location.html">Location</a></li>
            <li  id="nav-ywampismo"><a class="nav2" href="http://www.ywampismobeach.org/">YWAM Pismo</a></li>
        </ul>       
        <div id="logo"><a href="http://www.ingridoscar.se/index.html"><img src='logo150px.png'></a></div>
    </nav>
    </div>

Upvotes: 2

Related Questions