Need a script for tab menu.

**PCFirewire** · 12-10-2007, 12:15 PM

I confess I am a intermediate webpage builder. I use FrontPage 2000 on a Vista Home Premium computer. I have FP 2003 but prefer 2000 because I already know it.

My pages are simple HTML with occasional copy and pasted scripts. That is all I know about scripts.

I want to find a tab menu for a site i am working on. I would like a drop down menu also on a few of the tabs. Where is the best place to start to be able to put that in my webpage?

Thanks

**chrishirst** · 12-10-2007, 12:28 PM

Quote:

Where is the best place to start to be able to put that in my webpage?

Google
&
Google

**PCFirewire** · 08:50 PM

I found those searching Google but don't have a clue as to how to make them work. I copy and pasted code with no luck. I am reading up on CSS. No experience with that either. Any suggestions are welcome.

Looks like a lot of help on your page.

Quote:

Originally Posted by chrishirst

Google
&
Google

Here is the code I pasted in FrontPage. Alone it shows the menu correctly. But when I paste the code into the existing page, it does not show up. I put the Head code within the head and the body code in the body where I want the menu to appear. What else do I need to do? Here is the free code. I hope it is alright to post it here.

<html>
<head>
<title></title>
<style type="text/css">
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
img {
border: none;
}

/*- Menu Tabs C--------------------------- */
#tabsC {
float:left;
width:100%;
background:#EDF7E7;
font-size:93%;
line-height:normal;
}
#tabsC ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsC li {
display:inline;
margin:0;
padding:0;
}
#tabsC a {
float:left;
background:url("tableftC.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsC a span {
float:left;
display:block;
background:url("tabrightC.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsC a span {float:none;}
/* End IE5-Mac hack */
#tabsC a:hover span {
color:#FFF;
}
#tabsC a:hover {
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;
}

</style>
</head>
<body>

<div id="tabsC">
<ul>
<li><a href="#" title="Link 1">Link 1</a></li>
<li><a href="#" title="Link 2">Link 2</a></li>
<li><a href="#" title="Link 3">Link 3</a></li>
<li><a href="#" title="Longer Link Text">Longer Link Text</a></li>
<li><a href="#" title="Link 5">Link 5</a></li>
<li><a href="#" title="Link 6">Link 6</a></li>
<li><a href="#" title="Link 7">Link 7</a></li>
<li><a href="#" title="Link 7">Link 8</a></li>
<li><a href="#" title="Link 7">Link 9</a></li>
<li><a href="#" title="Link 7">Link 10</a></li>
</ul>
</div>
</body>
</html>

**serandfae** · 12-10-2007, 10:31 PM

We really need to see the page itself where you've pasted this. Otherwise it's really not possible to tell you where the conflict is.

**PCFirewire** · 12:28 AM

This is so cool. I did make it work, finally. It is changing some of my fonts so am experimenting with the code to make it not do some things. I think I am going to be able to do this finally. It is just what I wanted for a menu.

I do have 1 question. Can you tell me why the menu bar no longer looks like tabs? http://www.vbcnorwalk.org/indextesttab.htm I changed the v link color from white to black. I need a darker color for mouse over.

Quote:

Originally Posted by serandfae

We really need to see the page itself where you've pasted this. Otherwise it's really not possible to tell you where the conflict is.

**serandfae** · 12-11-2007, 11:41 AM

The first thing to check is this: Where are the .gifs for the tabs located? The way you have the location typed they're in the same folder as your index page. If that is not the case (and it shouldn't be) change the url and the browser will find your tabs again.

**PCFirewire** · 12-12-2007, 11:10 AM

Whew, change one thing and other things need fixing. I finally have a good page with the tabs. Is a learning experience. There is a pause before the page loads now. I can compress some of the other photos on the page to help speed it up. Is it common for the styles code to slow down loading? The buttons loaded slower too. http://www.vbcnorwalk.org/indextesttab.htm

**PCFirewire** · 12-13-2007, 10:22 AM

I forgot to say THANK YOU!

**wayfarer07** · 12-13-2007, 10:34 PM

My advice is to learn as much about CSS as possible. Buy a book about the subject. For more about dropdowns go here

**Capt Quirk** · 02-15-2008, 12:22 PM

Is there a CSS tab style that works right in the majority of browsers? I have been working on this too, and have seen results from great, to still ok, to completely butchered... and that is just IE! I haven't tried Safari or Netscape yet.