•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 401,473 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,046 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 253 | Replies: 1
 |
•
•
Join Date: May 2008
Posts: 2
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
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:
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!
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…
<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!
Last edited by supriya.iiita : May 22nd, 2008 at 10:22 am.
•
•
Join Date: Apr 2008
Posts: 43
Reputation:
Rep Power: 1
Solved Threads: 11
Light Poster
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
Here is your style.css:
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 } |
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
Similar Threads
- Web design table woes (HTML and CSS)
- Nav bar in dreamweaver dissappears after click (HTML and CSS)
- drop down menu problem (JavaScript / DHTML / AJAX)
- CSS position problem (HTML and CSS)
- Question regarding multidimensional array for navigation bar (Graphics and Multimedia)
- Help with my Navigation bar (JavaScript / DHTML / AJAX)
- Making a static but yet a dynamic navigation (PHP)
- Hey crunchie, RE: LOP problem (Viruses, Spyware and other Nasties)
- navigation bar (HTML and CSS)
- Navigation Bar that extends the length of the page (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: How to make flash slideshow?
- Next Thread: horizontal divs
