[LorEye]

I built a page awhile ago for someone. I'm trying out with CSS again and I want to learn it to make updating/changing and adding pages easier, like they say CSS can do. But when it comes to the navigation I get a little lost. I want to keep the rollover effect. How do I include the rollover navigation inside the css stylesheet?

[pgo]

That's kind of vague. What rollover effect do you want?

Generally, you use the same pseudo-classes you do for anchors: :link, :visited, :hover, :active...

[LorEye]

I have no problem with text links. I was wondering about image rollovers

[cjgraphix]

use a background image on the a tag, and change it on :hover.

[LorEye]

more specifically, this is what needs to be done. I already know how to use css to change the background, header, site colours, etc of a website. I am wondering how css is used when updating a website, say it's a 25 page website and I want to add a new link and new page called link26.html. And I want Link 26 to appear on my nav bar beside Link 25 without having to add a new link to all 25 pages.

[herkalees]

That's called server-side-includes (SSI), not CSS.

[LorEye]

I see now. So the navigation can be put in to a seperate file and placed on to the page using similar commands to a php include, or the old frames. I assume SSI is better than these methods? More compatible is it over different browsers?

[steelfrog]

Originally Posted by LorEye

I see now. So the navigation can be put in to a seperate file and placed on to the page using similar commands to a php include, or the old frames. I assume SSI is better than these methods? More compatible is it over different browsers?

SSI is better than frames and since it's done by the server as the name implies, it is transparent to users and compatible with pretty much everything. It's basically just a snippet of code that tells the server "add this page here" when the page loads.

[LorEye]

so...

If I have a layout finished in CSS, I took out the navgation and put it in a seperate file.

I want the navigation to appear in the left column of the layout, vertical navgation, and content to the right. What steps need to be taken? Does the page extension have to end in .shtml for the SSI to show up?

If I put this in the left column, should I be able to see the navigation?
<!--#include file="nav.html" -->

[funkyprem]

Originally Posted by LorEye

...or the old frames.

You need your wrist slapping for that one young man!

Other than that you're on the right lines.

[LorEye]

Originally Posted by funkyprem

You need your wrist slapping for that one young man!

Other than that you're on the right lines.

young woman. . .

Hey, I remember learning frames and how proud of myself I was. It wasn't long until CSS was brought to my attention. Probably about the time I started hanging around here, I learned that CSS could be something more than just colours. I payed hundreds of dollars at night school learning crap, I learned more today than I learned the last two semesters.

Does anyone have a working example I can look at? I'm having trouble getting the file to be where I want it to be.

[funkyprem]

apologies for my ommision of those vital two letters.

Honestly, now is the time to forget about all you've leant about frames and you can have that same level of pride in acheiveing that feat. (and it will make your life a lot easier if you don't have that concept floating around your head) (my god, I just inserted a css pun without even realising it) (i'm off to have a cry and re-evaluate my life now)

[LorEye]

when I include my navigation in the left column of my layout, I can no longer add anything to my right column. It disappears.

Any help?

[cjgraphix]

what does your nav.html file look like. is it JUST the navigation, or did you also put the html, head, body tags in?

[LorEye]

it's not just a blank document with navigation links in it. It starts like every html page I make.

[Shiro]

Can you post some of the code you are using? Specifically the code from before to after your server side include, as well as the contents of the include file. It will probably be easier to answer your questions if we can see what you are doing.

[LorEye]

This is the index.shtml page that should include the nav file

<!-- Begin Left Column -->
<div id="leftcolumn"> <!--#include file="nav.html" -->
</div>
<!-- End Left Column -->

this is my nav.html

<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: #FFFFFF;
}
-->
</style></head>

<body>
<table width="40" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" background="images/navbg.jpg"><img src="images/mainmenu.jpg" width="187" height="48" /></td>
<td rowspan="8" align="left" valign="top" background="images/navbg.jpg"><img src="images/navright.jpg" width="31" height="848" /></td>
</tr>
<tr>
<td align="left" valign="top" background="images/navbg.jpg"><table width="100" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td>link</td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top" background="images/navbg.jpg"><img src="images/community.jpg" width="187" height="48" /></td>
</tr>
<tr>
<td align="left" valign="top" background="images/navbg.jpg"><table width="100" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td>link</td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top" background="images/navbg.jpg"><img src="images/gaming.jpg" width="187" height="48" /></td>
</tr>
<tr>
<td align="left" valign="top" background="images/navbg.jpg"><table width="100" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td>link</td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top" background="images/navbg.jpg"><img src="images/affiliates.jpg" width="187" height="48" /></td>
</tr>
<tr>
<td align="left" valign="top" background="images/navbg.jpg"><table width="100" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td>link</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

[mx]

You should include the nav.html inside the body.

The included file should have any html, head or body tags as the page it's getting included into already has them.

[Shiro]

When you include a page, the code in the included page is included directly into the place you enter it.

For example, if you have a file that looks like this:

A
B
include c.html
D
E

And c.html looks like this:

1
2
3

Then the whole top file, with the include in it, will read like this:

A
B
1
2
3
D
E

So right now you have

<div id="leftcolumn">
<head>
<title>Untitled Document</title>
// bunch of stuff
</body>
</html>
</div> //this is the end of the 'left column' div

The included file should not be a complete file. It should just be a snippet that fits right into the file its being included into.

[LorEye]

Does anyone have a working example I can look at? So I can see how mine is different?