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
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.
1 comments
Thank you so much! And also thanks for the tip about the {} :D
Popular free courses
- Free course
Learn SQL
In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Beginner Friendly4 Lessons - Free course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner Friendly11 Lessons - Free course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner Friendly6 Lessons