Profile image of Izzie
Submitted by Izzie
almost 12 years

How do I add a nav bar?

I’ve just been practicing my html/css skills and I thought making a basic website would help. I have a problem -how do I add a bar for navigation? And is there a way to create more than only one page? Here is my html/css html-(I’ve removed all the </> from the html because it wouldn’t show up otherwise) !DOCTYPE html html head link type=”text/css” rel=”stylesheet” href=”stylesheet.css”/ title/title /head body div ID=”header”KingJofferyGameOfThrones.Com/divdiv class=”left”/divdiv class=”right”/divdiv ID=”bottom”/div div ID=”menu” p Home About Contact Advertise /p
/div /body /html

css- body { background-color: lightgrey; } div { border-radius: 5px; } #header { font-family: Calibri; font-size: 50px; text-align: center; } #menu { position: relative; height: 50px; background-color: #668284; clear: both; font-family: Verdana, sans-serif; font-size: 14px; text-align: center; color: #ffffff; } Thanks

Answer 516f475d23dee3d6540009c2

1 vote

Permalink

In the future your code will show up if you enter it and then highlight it here and click the “{}” icon above to mark it as code.

To create a menu you will need to change your paragraph text into links using the <a></a> tag. The href= specifies the new HTML page you will need to create for the link to become valid.

<div ID="menu">
        <a href="home.html">Home</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>
        <a href="advertise.html">Advertise</a>
</div>  

If you would like to center the text vertically within your navigation bar you can do that by adding “line-height:50px;” under your #menu class.

Profile image of objectBlaster79338
Submitted by objectBlaster79338
almost 12 years

1 comments

Profile image of Izzie
Submitted by Izzie
almost 12 years

Thank you so much! And also thanks for the tip about the {} :D