Href links for navigation bar

I just started learning HTML and decided I wanted to try to build a simple blog. I decided I wanted a navigation bar with links to other HTML files. I thought I had done this perfectly until I ran it and discovered that only the “Home” link works (which is the HTML file that I had put the href tags in) the other 4 links showed up as links but weren’t clickable. All the files are located in the same folder.

<head>

<title>Music Project</title>

<link href="MusicProject.css" rel="stylesheet" />

    <div id="header">
    <h1 align="center" style="margin-top: -155px"><img src="logo.png" alt="logo" id="logo" height="500" width="700" /></h1>
    </div>
    <div id="nav">
<ul>
<li><a href="Music Project.html">Home</a></li>
<li><a href="Artist.html">Artists</a></li>
<li><a href="album.html">Mixtapes/Albums</a></li>
<li><a href="suggestions.html">Suggestions</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</head>

#header {
    background-color: #888888;
    height:380px;
    margin:0px;
    padding:0px;

    }
body {
    background-color: #C0C0C0;
    margin:0px;
    padding:0px;
}
#main {
    overflow: auto;
}
#content {
    float:left;
}
#side {
    float:left;
}
#nav {
    height: 42px;
    background-color: #888888;
    }
#nav ul {
    list-style-type:none;
    height:30px;
    padding:0px;
    margin:0px;
        }
#nav ul li {
    float:left;
    margin:10px;
    width:246px;
    text-align:center;
    font-family:"Arial";
    font-size: 23px;
    color: #00004B;
}
#nav ul li a {
    display: inline;
    width: 246px;
}
hi,欢迎来到堆栈溢出。通常,您没有在标签内实现锚链接,尝试将其放入标记中,看看它是否适合您。Choz
制定@Choz所说的内容,您的图像正在涵盖您拥有的导航链接,因此您当前无法单击它们。试图增加高度#headerOor一起将其删除。DPAC
@Choz通常?从来没有怎么样?ROB
Validator. are your friend.SteveAx

回答 1

  1. 赞同 0

    As说你需要放置你的<header><content><body>标签。

    This should help you out:

    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Music Project</title>
        <link href="MusicProject.css" rel="stylesheet">
    
        <style>
            #header {
                background-color: #888888;
                height: 380px;
                margin: 0px;
                padding: 0px;
            }
    
            body {
                background-color: #C0C0C0;
                margin: 0px;
                padding: 0px;
            }
    
            #main {
                overflow: auto;
            }
    
            #content {
                float: left;
            }
    
            #side {
                float: left;
            }
    
            #nav {
                height: 42px;
                background-color: #888888;
            }
    
                #nav ul {
                    list-style-type: none;
                    height: 30px;
                    padding: 0px;
                    margin: 0px;
                }
    
                    #nav ul li {
                        float: left;
                        margin: 10px;
                        width: 246px;
                        text-align: center;
                        font-family: "Arial";
                        font-size: 23px;
                        color: #00004B;
                    }
    
                        #nav ul li a {
                            display: inline;
                            width: 246px;
                        }
        </style>
    </head>
    <body>
        <header>
            <div id="header">
                <h1 style="margin-top: -155px; text-align:center;"><img src="logo.png" alt="logo" id="logo" height="500" width="700" /></h1>
            </div>
            <div id="nav">
                <ul>
                    <li><a href="Music Project.html">Home</a></li>
                    <li><a href="Artist.html">Artists</a></li>
                    <li><a href="album.html">Mixtapes/Albums</a></li>
                    <li><a href="suggestions.html">Suggestions</a></li>
                    <li><a href="about.html">About</a></li>
                </ul>
            </div>
        </header>
    
    
        <content>
             <!-- Page content here  -->
        </content>
    </body>
    </html>
    

    Fiddle.

    是一个帮助您学习基础知识的链接。link.

    Pool Pro
    Also查看此链接以了解更多信息。smashingmagazine.com/2009/08/...Pool Pro
    自1999年以来,NO应该使用过渡doctype用于新网页。元和链接标签没有关闭斜线。您的“标题”DIV没有任何目的,不推荐使用“对齐”,并且您的H1标记无效。更不用说,没有内容元素没有这样的东西。ROB
    You是正确的,我会解决这个问题。我的错误,我错误地点击CS3。pool亲