How do I links TABS to an IFRAME ?

[Rob (SA)]

Hi Folks,

I am trying to do something like this but without the major scripts and effort in changing values consisitantly.

www.gnjgf.co.za/gngucal.html

How do I link a tab menu with one singular Iframe that when I click on the month I see the result of the click in the iframe

[Collectors-info]

Re: How do I links TABS to an IFRAME ?

Hi , i believe you named your iframe "tabiframe" If so! When you link from the tab FEB, type in the url you want to appear in the frame & also type tabiframe in the target field. The pages you want to appear in the frame must be published.

[Rob (SA)]

Re: How do I links TABS to an IFRAME ?

Hi Chris,

Thanks for that help - quick and easy.

Now for the tricky part.

How does a person increase / chnage the spacing between the tabs?

[Collectors-info]

Re: How do I links TABS to an IFRAME ?

Hi, you will need to play around with the css part than you placed in the head of the page.
Try increasing the margin number to (lets say) 8 & see how that changes the looks. Make the changes 1 at a time & play with the ones on blue as well.

</style>
<style type="text/css">
#TabMenu1
{
float: left;
width: 100%;
font-family: Arial;
font-size: 11px;
line-height: normal;
}
#TabMenu1 ul
{
margin: 8;
padding: 10px 0px 3px 10px;
list-style: none;
}
#TabMenu1 li
{
display: inline;
margin: 0;
padding: 0;
}
#TabMenu1 a
{
float: left;
background: url("style13left.gif") no-repeat left top;
margin: 0;
padding: 0 0 0 4px;
text-decoration: none;
}
#TabMenu1 a span
{
float: none;
display: block;
background: url("style13right.gif") no-repeat right top;
padding: 5px 15px 4px 6px;
color: #627EB7;
font-weight: bold;
text-decoration: none;
}
#TabMenu1 a:hover span
{
background-position: 100% -42px;
color: #FF0000;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
#TabMenu1 a:hover
{
background-position: 0% -42px;
}
#TabMenu1 #active a
{
background-position: 0% -84px;
}
#TabMenu1 #active a span
{
background-position: 100% -84px;
color: #627EB7;
font-weight: bold;
text-decoration: none;
}
</style>