problem with navigation bar

hi i wud like to make a side navigation bar which opens links in another side of page , but on the same page only.
i have prepared the css but what i need is to give the target to the link so that it opens the link at the required position.

my code looks like following right now:

<html>
<head>
  <title>My first styled page</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004
  by myself.</address>

</body>
<style type="text/css">

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }


</style>
</html>

kindly help with this..
basically i wanted my page to work something like the follwoing link: http://www.ruser.webtomic.com/portal/

thanking in advance!

supriya.iiita

Newbie Poster

2 posts since May 2008

Reputation Points: 10

Solved Threads: 0

4 Years Ago

Were you planning on using JavaScript, Frames, or something else?

If it's just plain HTML and CSS here is one method:

For musings.html
1. Copy what you have.
2. Save it as musings.html
3. Change the section to the "musings" content.
4. Re-save
5. Repeat with another file

Also, you could save your CSS to an external location and reference it in your HTML. This method makes it easier when changing the CSS around, so it will be changed on all your HTML files that refer to it. Place this code within your tags

<LINK href="style.css" rel="stylesheet" type="text/css">

Here is your style.css:

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

Daedal

Junior Poster in Training

75 posts since Apr 2008

Reputation Points: 23

Solved Threads: 12

This article has been dead for over three months

You