Thread: How do I links TABS to an IFRAME ?

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

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.

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?

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>