Member Avatar for supriya.iiita

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
  • 273 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by effu
Member Avatar for effu

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 }
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.