CODEWITHSUNDEEP
htmlcsstabspanel
MisaChan
MisaChan

Reputation: 279

How to create a panel tab?

is there anyone here who knows how to create a panel tab?it wasn't discussed in our class and i was asked by my boss to change my list link of A to Z to a panel tab. my link list is working properly. i tried making the letters in my links (you will see later) an image, but my boss doesn't want it that way,he specifically said that for example, you clicked the link letter "A", the link should look like it merged with the table or as if data's when links a clicked are like in different pages.

here is the code i used for my linked letters: *noticed that A and B link are different, that was my first attempt that he did not like.

    <table class="sub" border="0" cellpadding="0" cellspacing="0">              
            <!--A - Z link page-->
                <tr>
                <td colspan ="6" align="CENTER">
                <a href="index.php?namelist=a"onmouseover="AmouseOver()" onmouseout="AmouseOut()" /><img src="images/A.png" id="A" /></a>
                &nbsp;
                <a href="index.php?namelist=b"onmouseover="BmouseOver()" onmouseout="BmouseOut()" /><img src="images/B.png" id="B" /></a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=c">C</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=d">D</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=e">E</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=f">F</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=g">G</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=h">H</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=i">I</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=j">J</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=k">K</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=l">L</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=m">M</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=n">N</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=o">O</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=p">P</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=q">Q</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=r">R</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=s">S</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=t">T</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=u">U</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=v">V</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=w">W</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=x">X</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=y">Y</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=z">Z</a>

                </td>
                </tr>

these set of codes will be called when the user clicks on the link. actually my codes are working perfectly. my boss would just like to change the design a bit just so that there is something that i could do in my on-the-job training. See im just a student but i am always given a hard time here. i hope someone could help me here

MisaChan

PS. i already tried searching sites on how to make panel tab without barely changing my codes but no luck found. almost all are code generators and i dont like the result in those sites, i think css will help me here also as said by most forums i've seen

Upvotes: 1

Views: 5309

Answers (2)

Ry-
Ry-

Reputation: 224857

Well, not like that. Here's how I would do it:

<div id="tabs"><a href="index.php?namelist=a">A</a> <a href="index.php?namelist=b">B</a> <a href="index.php?namelist=c">C</a> <a href="index.php?namelist=d">D</a> <a href="index.php?namelist=e">E</a> <a href="index.php?namelist=f">F</a> <a href="index.php?namelist=g">G</a> <a href="index.php?namelist=h">H</a> <a href="index.php?namelist=i">I</a> <a href="index.php?namelist=j">J</a> <a href="index.php?namelist=k">K</a> <a href="index.php?namelist=l">L</a> <a href="index.php?namelist=m">M</a> <a href="index.php?namelist=n">N</a> <a href="index.php?namelist=o">O</a> <a href="index.php?namelist=p">P</a> <a href="index.php?namelist=q">Q</a> <a href="index.php?namelist=r">R</a> <a href="index.php?namelist=s">S</a> <a href="index.php?namelist=t">T</a> <a href="index.php?namelist=u">U</a> <a href="index.php?namelist=v">V</a> <a href="index.php?namelist=w">W</a> <a href="index.php?namelist=x">X</a> <a href="index.php?namelist=y">Y</a> <a href="index.php?namelist=z">Z</a></div>

Then, look at the CSS here to get an idea of how you might implement tabs.

Upvotes: 0

Rasika
Rasika

Reputation: 1998

Basically, the trick in making a tabbed panel is to change the style of your selected item different from the other tabs. You will definitely need to use CSS for this. I would change all of the letters into spans and give them a class name like "tabunsel" and for the selected tab a class name like "tabsel".

In the CSS for the span you can then do some tricks like adding a background image that looks like a tab with different colours for the selected and unselected ones. You could also do this with pure CSS if you are up to the challenge.

I would start by studying a the code and CSS of a few good looking tabbed pages on the web or look for a tutorial. I found this just Googling.

Upvotes: 1

Related Questions