Putting in a Nav. bar with CSS

[longrawker]

Hey.

I was curious, is there a way to put in a image-mapped .jpg to use as a Nav bar, with CSS? For example, could you put the code which would do that in an external style sheet, and then link the page you want the Nav bar on, to the style sheet? Or do you just have to copy/paste the HTML onto every page of your site?

I have also noticed that some CSS doesnt work on certan browsers, AOL being one of them. Would the Nav bar just not show up then?

Thanks.

[mrdeeye]

i am not really sure if this is what your looking for, but i have been developing a website for my moms work which is all html/css. And my navbar is all done with css

this is the html for it

<div id="nav">
<a href="/index.htm">Home</a>  
<a href="/link1.htm">Link</a>
<a href="/link2.htm">Link 2</a>
<a href="/link3.htm">Link 3</a>
<a href="/link4.htm">Link 4</a>
<a href="/link5.htm">Link5</a> 
<a href="/link6.htm">Link6</a>

and this would be your css

#nav{
display: block;
background-color: #c00000;
position: absolute;
top: 180px;
left: 10px;
width: 120;
border: 1px solid #000000;
text-align: center;
font-size: 12px;
font-weight: bold;
}

and if you wanna see the finished product go to http://www.svfca.org .....hope that helps

[neouser99]

AOL doesn't work because it uses Internet Explorer, which doesn't conform to todays standards, particularly W3C.

No, you can't use a .css to do what you are asking. .css are reserved just for styles and formatting. What you can do is a server side include (ssi). Or, use php to include another file, but that would require the webserver has php. I would just recommend using ssi to include with a small one line piece of code on each page...

<--#include blahblah.shtml--> or something like that.

just google server side includes, that will tell you how to use it.

-neo

[mairving]

Server Side Includes are about as dated as using frames. I personally wouldn't recommend them. It would be pretty easy to do using PHP with PHP's include function.

[longrawker]

So i could use the include function to display an image-mapped .jpg?

[WhatsThisBoxFor?]

What languages does your server support? If it supports PHP use what mairving said, to use a server side include you need a server that supports it, this normally comes bundled/along with a language.

[longrawker]

The server supports PHP, so it would work, right? But how do i standardize it for all of my pages. Just include the same code? Then i'm no better off than i was copy/pasting all of the html.

[WhatsThisBoxFor?]

It would work, don't know PHP, but I assume it includes a file, and you copy and paste the entire thing, but if you change the file with the CSS the output to all the pages change. If you just copy the CSS to each page if you change it you will have to copy it to all the pages again. At least thats how it would work using the languages I know.

[neouser99]

it works just the way you would think an include works.

you have document a.php. within document b.php you have this code

include( "path/to/a.php" );

that line calls up a.php, and pastes everything taht is within a.php and puts it right there, the exact same thing as copy and paste, but you do it with that line instead of the 50 or 1000 lines that you have in a.php.

-neo

[Force Flow]

Would something like hotspots work out for you?

[MrAustin]

Just put your navigation HTML in a seperate file (here named "nav.inc") like so:

<a href="/index.htm">Home</a>  
<a href="/sacvalley/about/about_us.htm">About Us</a>
<a href="/sacvalley/membership/membership.htm">Membership</a>
<a href="/sacvalley/events/events.htm">Events</a>
<a href="/sacvalley/newsletter/newsletter.htm">Newsletter</a>
<a href="/sacvalley/links/links.htm">Links</a> 
<a href="/forum">Forum</a>

And at the top of each page, put the following:

PHP Code:

<?php include("includes/nav.inc"); ?>

While yes, you might as well copy/paste the whole thing, the portion of this to grasp is that you can now edit ONE FILE and have the changes reflected wherever the navigation include was used.