Sidebar navigation links - CSS/HTML

[sunkiller]

I'm a new guy with CSS+HTML, so I have a question about a navigation bar using CSS.

CSS code for the sidebar (goes in CSS file):

#framecontent{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 170px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: #666666;
color: #000000;
}

#maincontent{
position: fixed;
top: 0;
left: 170px; /*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #999999;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 0 0 0 150px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}This is means it gives me the ability to have a sidebar, which is linked to the page where I want it.

Code for the page that I have it on (goes in HTML file):

<div id="maincontent">
<div class="innertube">
To decrease the amount of space I'm using up I removed the contents and replaced it with this sentence.
</div>
</div>

<div id="framecontent">
<div class="innertube">

<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="bio.html">Bio</a>
</ul>

</div>
</div>How do incorporate the links in the design that I want? Is there a way where I do not have to put the frame content on each individual page? If I have to put it on each individual page, when I add a new navigation link, I would have to change the list on every single page.

If I need to give more code within the document, I will.

http://www.dynamicdrive.com/style/layouts/item/css-left-frame-layout/ - Original code used


Perhaps some other useful code:

Code for what the buttons look like:

ul.navbar {
list-style-type: none;
padding: 0;
margin: 10;
position: absolute;
top: 2em;
left: 1em;
width: 9em }

ul.navbar li {
background: #CCCCCC;
margin: 0.3em 0;
padding: 0.3em;
border-right: 1em solid grey}

ul.navbar a {
text-decoration: none}
a:link {
color: #333333}
a:visited {
color: #333666 }

[FirePenguins]

I don't have much experience with css frames, but assuming they are similar to an html frame what you want to do is have the links in the navigation frame target the content frame. This way the content frame navigates to other pages and the navigation frame stays the same.

<a href="page1.html" target="your content frame">Link to Page 1</a>

[sunkiller]

Well I thought about it, and figured that CSS probably won't be able to do it, since it deals with style rather than content.

I may have to use php to get it so that I can have one page with the navigation links on it and the main page will display this page within the main page.

Correct? Other suggestions?

Edit:
Or perhaps I could put a html document within the frame? By this I mean, the left frame would call the html document with the navigation links within it. That way I could edit the html document as I feel necessary, which would automatically change the navigation bar for all the other pages.

[RMFz-]

Seriously speaking, frames suck.

Use php to include the nav bar, which you can construct anyway you like.

use <?php include('xyz.html') ?>

Use tables to put the nav bar on top bottom left or right.

[Perad]

I agree with the guy above that PHP is the way to go. This is what you would be looking for.

Page - remember the .php extension.

<div id="maincontent">
<div class="innertube">
To decrease the amount of space I'm using up I removed the contents and replaced it with this sentence.
</div>
</div>

<?php include 'navigation.php'; ?>


navigation.php

<div id="framecontent">
<div class="innertube">

<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="bio.html">Bio</a>
</ul>

</div>
</div>

I would also go a step further by adding the following files.

header.php and footer.php.

Generally speaking these 3 things are the same on all pages so you can save a lot of time and effort by condensing these files.

You can do far more with php but this is a good place to begin.