-2

So I'm REALLY new to HTML and brackets, however I have a little navigation bar going. That's pretty much it. What I want to ask is, how do I make it so when I press one of the buttons in the bar, that button leads to another page? This is the code:

Index.html:

    <DOCTYPE Html>
<html>
<head>
  <title>Navigation Bar</title> 
  <link rel="stylesheet" type="text/css" href="style.css">
</head>  
<body>
<div id="Maindiv">
   <div id="navdiv">

        <u1>
            <h1>The Turtle House</h1>
             <li><a href="#">Home</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Information</a></li>
            <li><a href="#">Care Guide</a></li>
       </u1>
    </div>    
</div>   
</body>
</html>

Style.css:

body{
    font-family: arial, sans-serif;

}
*{
    padding: 0px;
    margin: 0px;
}
#maindiv{
    width: 100%;
    height: 1000px;
    background: url(img/RiverRock.jpg) repeat;
    background-size: cover;
}
#navdiv u1{
    width: 100%;
    height: 80px;
    background: #648DA0;
    line-height: 80px;
    color: white;
    float: right;
}
#navdiv u1 a{
    text-decoration: none;
    color: white;
    padding: 20px;
}
#navdiv u1 li {
    list-style-type: none;
    display: inline-block;
    float: right;
}
#navdiv u1 li:hover{
    background: #8FB0BF;
    transition:all 0.40s;
}
#navdiv h1{
    width: 300px;
    float: left;
    cursor: pointer;
    margin-left: 15px;
}

Thanks.

Winu Petinu
  • 1
  • 1
  • 1
  • https://developer.mozilla.org/en/docs/Web/HTML/Element/a#Linking_to_an_external_location – Joe Clay Apr 06 '17 at 16:00
  • Adding a link path instead of `#` would solve your issue. for example `Contact` – Eric Robinson Apr 06 '17 at 16:04
  • You really should get a book or find a tutorial on the web like [this Khan Academy track](https://www.khanacademy.org/computing/computer-programming/html-css) to learn the basics of web development. – hungerstar Apr 06 '17 at 16:08

1 Answers1

1

Put the page name in the anchor link href:

<li><a href="Contact.html">Contact</a></li>
Simon
  • 764
  • 4
  • 8