Jump to content
Killersites Community
bkelly1369

Nav box improvements

Recommended Posts

After great effort, too much effort, not enough result, several years ago I managed to get a basic page working.  Now I am trying to put a border around the navigation box and set its background color.  I have tried a few tutorial sites but they seem to leave a few things out and I cannot get it working.

The full web page is here  https://us-path-forward.com/presidential_pardon.htm

 The lead in code section with the nav bar is below,( with a few changes from my edit attempts).  How must this be changed to implement a border and background color around the navigation box.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="bkelly.css" href="bkelly.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>www.bkelly.ws Home Page</title>
  <meta name="description" content="irig standards chapter 10">
  <meta name="main-nav" background:"#F1F1F1">
 </head>
<body>
<div id="lead_in">
<h1>Presidential Pardon</h1>
</div>
<!-- Site navigation menu -->
<ul id="main_nav" >
  <li><a href="https://us-path-forward.com/index.htm">Home Pagexxx</a>
  <li><a href="https://us-path-forward.com/resistance_to_change.htm">Resistance to Change</a>
  <li><a href="https://us-path-forward.com/amendments.htm">Constitutional Amemdments</a>
  <li><a href="https://us-path-forward.com/big_money.htm">Citizens United</a>
  <li><a href="https://us-path-forward.com/presidential_pardon.htm">Presidential Pardon</a>
</ul>

 

Share this post


Link to post
Share on other sites

Place a nav tag around the menu and apply CSS borders and padding:

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

Share this post


Link to post
Share on other sites

Thanks for the reply, but I don't see where to put what.  Here is my attempt and it just displays this:

CSS p.solid {border-style: solid;}

 

<nav>

    <a href="/css/">CSS</a>
    p.solid {border-style: solid;}
<ul class="navbar">
  <li><a href="https://us-path-forward.com/resistance_to_change.htm">Resistance to Change</a>
    <li><a href="https://us-path-forward.com/amendments.htm">Constitutional Amemdments</a>
  <li><a href="https://us-path-forward.com/citizens_united.htm">Citizens United</a>
  <li><a href="https://us-path-forward.com/presidential_pardon.htm">Presidential Pardon</a>
  <li><a href="https://us-path-forward.com/site_index.htm">Site Index</a>
    </ul>
</nav>
Edited by bkelly1369

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×