Re: [WSG] CSS Tabs

Chris Stratford Thu, 15 Jul 2004 18:12:22 -0700

Here, its very simple.

1st step.
Setup you link heirachy in an unordered list.
<div id="nav">
    <ul>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
    </ul>
</div>

2nd step.
Setup the CSS,
div#nav ul
{
    list-style-type: none;
    padding: 0; margin: 0;
}
div#nav ul li
{
    display: inline;
    padding: 0; margin: 0 5px 0 0;
}
div#nav ul li a
{
    color: #000;
}
div#nav ul li a:hover
{
    color: #000;
}

Obviously use the CSS you want, to make them look like the tabs you want!

THEN,
3rd step.
Setup your PHP header to handle the class="current"
eg:
change the header HTML to this PHP...

<div id="nav">
    <ul>
        <li><a <? if ($_SERVER['PHP_SELF'] == '/home.php'){echo('class="current" '); ?>href="">Link</a></li>
        <li><a <? if ($_SERVER['PHP_SELF'] == '/link.php'){echo('class="current" '); ?>href="">Link</a></li>
        <li><a <? if ($_SERVER['PHP_SELF'] == '/blog.php'){echo('class="current" '); ?>href="">Link</a></li>
        <li><a <? if ($_SERVER['PHP_SELF'] == '/about.php'){echo('class="current" '); ?>href="">Link</a></li>
    </ul>
</div>

4th step
Add the DIV#NAV UL LI A.CURRENT to the CSS,
eg:

div#nav ul li a.current
{
    /* Some New Style */
}

div#nav ul li a.current:hover
{
    /* Some New Style */
}

Hope that helped...
sorry its in the email...
anyone like to add to this?

Jad Madi wrote:

Hi 
guys is there anyway to get CSS tabs working without _javascript_s?

Re: [WSG] CSS Tabs

Reply via email to