This forum is now read-only. Please use our new forums at discuss.codecademy.com.

Build a Resume Forum

View Course

346 points
5195240b2ff1a57196000056_249384371
Submitted by
Izzie McKenzie
about 5 years ago

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


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.

737 points
B0a731aac37bd9cb9073a5da0aafd07c?s=140&d=retro
Submitted by
Sean Jennings
about 5 years ago

1 Comment

5195240b2ff1a57196000056_249384371 Izzie McKenzie about 5 years ago

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