How do I link my pages within a CSS layout? Please.

I have basically taught myself how to create websites by playing around with HTML. For several years I was happy with the different things I could do, but I am tired of typing code.

I found several websites with CSS layout tutorials, and decided to try my hand at creating and using one. I have used simple CSS for links and text color, but I think I am way in over my head now.

I found a site with free CSS layouts to download, and I found a nice one I like. I created my graphics, and made changes as far as that and the colors. Here is where I am lost:

In creating the pages with HTML, I know how to link the pages using tables and frames. I can't figure out how to do the same thing with the CSS layout. Instead of redoing all of my website pages, I want to use the CSS layout in the existing pages. How do I make it work? Any help is greatly appreciated.

The site I want to "upgrade" is here: fiction-place.com/bots

My CSS layout is:

* {margin: 0;
padding: 0;}

body {
background-color: #000000;
color: #CD3700;
background-image: url(images/bodybg.jpg);
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;
}



#container {
width: 896px;
padding:3px;
margin: 0px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
color: #CD3700;
background-color: #000000;
}

#header {margin-top: 1px;
background-image: url(images/header2.jpg);
height: 320px;
border: 1px solid #A78D84;

}

#left {
float: left;
width: 155px;
color: #CD3700;
background-color: #000000;
padding: 5px;
}

#right {
background-color: #000000;
color: #CD3700;
float: right;
width: 155px;
background-position: right top;
padding: 5px;

}

#content {
margin-left: 170px;
margin-right: 170px;
margin-bottom: 5px;
color: #CD3700;
background-color: #000000;
padding: 20px;
border: 0px solid #A78D84;
}

#footer {
clear: both;
background-color: #000000;
color: #CD3700;
padding: 4px;
border: 1px solid #A78D84;
text-align: center;
}



.imageleft{
float: left;
margin-right: 7px;
margin-bottom: 1px;
}


p{
margin-top: 15px;
margin-bottom: 15px;
}

blockquote{
margin-top: 15px;
margin-bottom: 15px;
padding: 30px;
border: 1px dotted #A78D84;
background-image: url(images/swordtest.gif);
background-repeat: no-repeat;
}

h1{
background-color: #000000;
padding: 5px;
font-size: 1.3em;
color: #CD3700;
margin-top: 5px;
margin-bottom: 15px;
border-top: 1px solid white;
border-bottom: 1px solid white;

}

h2{
background-color: #000000;
padding: 5px;
font-size: 1.3em;
color: #CD3700;
margin-top: 15px;
margin-bottom: 15px;
border-top: 1px solid white;
border-bottom: 1px solid white;

}

.list {
margin-left: 25px;
list-style-image: url(images/redrose.gif);
margin-top: 30px;
}

a:link {
color: #FF3300;
background-color: inherit;
}
a:visited {
color: #FFFFFF;
background-color: inherit;
}
a:hover {
color: #336600;
background-color: inherit;
}
a:active {
color: #336600;
background-color: inherit;
}


#navlist
{
height: 2.6em!important;
height: 2.7em;
margin-top: 7px;
padding: 1.7em 0em .3em .4em;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
border: 1px solid #FFFFFF;
}

#navlist a, #navlist a:link, #navlist a:visited
{
border: 1px solid #CCCCCC;
padding: 1.2em;
padding-left: 0.5em;
padding-right: 0.5em;
color: #FFFFFF;
text-decoration: none;
}

#navlist a:hover, #navlist a:active, #navlist a:focus
{
border: 1px solid #FFFFFF;
padding: 1.1em;
padding-left: 0.5em;
padding-right: 0.5em;
text-decoration: none;
color: #336600;
}

#navlist li
{
padding-right: 1px;
display: inline;
font-size: 1em;
}

#navlist ul
{
margin: 0px;
padding: 0px;

}

#navlist #active a {
background-color: #000000;
color: #336600;
font-size: 1em;
font-weight: bold;
}

A general misconception of people new to CSS is that CSS replaces HTML (functionality). But as I said: that’s a misconception. Websites are still made of HTML. CSS is only there to give the plain HTML a new look. CSS without HTML doesn’t do anything.

Generally the concept is that we separate structure/information (HTML) from design (CSS) that a website can be read and interpreted by many different applications/devices, each to their own possibilities.

So, knowing that you should be aware that each web page is an HTML document (file), all with the same navigation, content, footer, etc. Nowadays frames and framesets are frowned upon and shouldn’t be used. I suspect you want to have the same functionality as frames where not the entire page is reloaded, right? But nowadays with browser cache and DSL and stuff there’s no disadvantage in using plain documents with repeating code as loading times have become faster with modern browsers.

The advantage of CSS is that you can apply the same stylesheet to many HTML files and if you change one style it’ll be changed on all files with that stylesheet attached. Now, if you want the same for the HTML, i.e. change the menu once and have it changed on all pages, for example, then you would do that with a server-side script, written in PHP, ASP, or Ruby on Rails, among others, and include certain sections of your website in one main template.

For example this is how you include files with PHP:

Create a text file where you just put the HTML code for the menu (you can give it whatever extension you like as long as it can be interpreted by the browser; some name it menu.php, others name it menu.htm, some name it menu.txt, whatever…)
Create a PHP file (with extension .php) where you put the main code of your page.
Put the line <?php include('menu.htm'); ?> where you want your menu to appear.


Note that your server needs to support the execution of server-side scripts in order to work. Now, if you view the source code you’ll see that it looks like a plain HTML file, you don’t see and indication that a server-side include has been used but yet, you can change that menu file once and it will be changed on all pages that have this include statement.