0

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<br>
  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!

2
Contributors
1
Reply
2
Views
9 Years
Discussion Span
Last Post by effu
0

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 <!-- Main content --> 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 <HEAD> 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 }
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.