Simple CSS highlight help

[NewBiee]

<ul id="navigation">
                <li class="active"><a href="/">Home</a></li>
                <li class="active"><a href="/myaccount">My Account</a></li>
                <li class="active"><a href="/editaccount">Edit Account</a></li>
                <li class="active"><a href="/logout">Logout</a></li>
</ul>

This is my HTML, how do I highlight the current tab which is currently viewed on the browser?

ul#navigation li
{
    float: left;
    margin: 0 1px 0 0;
    padding: 8px 10px 8px 10px;
    font-size: 0.8em;
    background: #161616;
    /*background: #fff url(images/tab_background.gif) top left repeat-x;*/
    font-family: "Verdana", sans-serif;
}

ul#navigation :hover
{
    background: #376a00;
}

/*Navigation Text*/
ul#navigation li a
{
    color: #FFF;
    text-decoration: none;
}

ul#navigation li a:hover
{
    color: #fff;
    font-family: "Verdana", sans-serif;
}

ul#navigation li.active
{
    border-bottom: 1px solid #000;
    background: #81CA2A;
}

I would appreciate any help guys. I'm only learning CSS and HTML.

NewBiee Reviewed by NewBiee on 24th Mar 2012. Simple CSS highlight help <ul id="navigation"> <li class="active"><a href="/">Home</a></li> <li class="active"><a href="/myaccount">My Account</a></li> <li class="active"><a href="/editaccount">Edit Account</a></li> <li class="active"><a href="/logout">Logout</a></li> </ul> This is my HTML, how do I highlight the current tab which is currently viewed on the browser? Rating: 5

[jayfella]

modify
ul#navigation li.active

[deAthbLisS]

all links can't be in the same class
<li class="active">

make a new class as inactive and assign others to it..
let the inactive class colors be little dull to make a significant difference of active/inactive.

<ul id="navigation">
                <li class="active"><a href="/">Home</a></li>
                <li class="inactive"><a href="/myaccount">My Account</a></li>
                <li class="inactive"><a href="/editaccount">Edit Account</a></li>
                <li class="inactive"><a href="/logout">Logout</a></li>
</ul>

now the home is highlighted

[NewBiee]

modify
ul#navigation li.active

What do I modify sir?

all links can't be in the same class
<li class="active">

make a new class as inactive and assign others to it..
let the inactive class colors be little dull to make a significant difference of active/inactive.

<ul id="navigation">
                <li class="active"><a href="/">Home</a></li>
                <li class="inactive"><a href="/myaccount">My Account</a></li>
                <li class="inactive"><a href="/editaccount">Edit Account</a></li>
                <li class="inactive"><a href="/logout">Logout</a></li>
</ul>

now the home is highlighted

Yeah, but the problem is that I use this HTML page on all other page on my mini site. so I don't wanna edit the class all over and over again. Any suggestions sir?

[BlaZe]

What deAthbLisS said is right.

Add this CSS code in your .css file

ul#navigation li.active1
{
    border-bottom: 1px solid #000;
    background: #304b0f;
}

Now whichever tab needs to be highlighted, add class="active1" for it.

Example:

<ul id="navigation">
                <li class="active"><a href="/">Home</a></li>
                <li class="active1"><a href="/myaccount">My Account</a></li>
                <li class="active"><a href="/editaccount">Edit Account</a></li>
                <li class="active"><a href="/logout">Logout</a></li>
</ul> 

Here, "My Account" will be highlighted.

If you need to edit the color, then change this background: #304b0f; (in the code I gave previously) as per your liking.

Goto http://www.color-hex.com/color/ for HTML Color Codes

[Djlatino]

What do I modify sir?



Yeah, but the problem is that I use this HTML page on all other page on my mini site. so I don't wanna edit the class all over and over again. Any suggestions sir?

even in 2012, you still have to do everything yourself, no shortcuts.

[soft2050]

Yeah, but the problem is that I use this HTML page on all other page on my mini site. so I don't wanna edit the class all over and over again. Any suggestions sir?

Actually, you can do so with a little bit of javascript to check all links and match ones that equals to the current path. And then set a special id attribute to them and add id style in your css file
You can add the javascript code to an existing .js file that is already in all pages.

As for the css, isn't it already in his code:

<ul id="navigation">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="/myaccount">My Account</a></li>
                <li><a href="/editaccount">Edit Account</a></li>
                <li><a href="/logout">Logout</a></li>
</ul> 

He only needed to remove those extra active class from other list items

[NewBiee]

What deAthbLisS said is right.

Add this CSS code in your .css file

ul#navigation li.active1
{
    border-bottom: 1px solid #000;
    background: #304b0f;
}

Now whichever tab needs to be highlighted, add class="active1" for it.

Example:

<ul id="navigation">
                <li class="active"><a href="/">Home</a></li>
                <li class="active1"><a href="/myaccount">My Account</a></li>
                <li class="active"><a href="/editaccount">Edit Account</a></li>
                <li class="active"><a href="/logout">Logout</a></li>
</ul> 

Here, "My Account" will be highlighted.

If you need to edit the color, then change this background: #304b0f; (in the code I gave previously) as per your liking.

Goto http://www.color-hex.com/color/ for HTML Color Codes

Thank you sir for your reply, but I'll explain my problem a little bit more by this reply below.

Actually, you can do so with a little bit of javascript to check all links and match ones that equals to the current path. And then set a special id attribute to them and add id style in your css file
You can add the javascript code to an existing .js file that is already in all pages.

As for the css, isn't it already in his code:

<ul id="navigation">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="/myaccount">My Account</a></li>
                <li><a href="/editaccount">Edit Account</a></li>
                <li><a href="/logout">Logout</a></li>
</ul> 

He only needed to remove those extra active class from other list items

This certainly is my problem. Lets say that my index.tbl (Because I'm using smartyphp) is:

So this is my Home.

{include file='header.tpl'}
        <div id="content">
            <center>
            <img src="/images/construction.png">
            </center>
        </div>
{include file='footer.tpl'} 

And lets say I'll go to my account that the codes are:

{include file='header.tpl'}
        <div id="content">
            <fieldset style="margin: 0 auto; width: 400px;"><legend>Profile</legend>
                <div style="text-align: left;">
                    <label style="margin-left: 70px;">Username :</label>
                    <span>{$user_name}</span>
                    <hr style="width: 75%;" />
                    <label style="margin-left: 70px;">Fullname :</label>
                    <span>{$full_name}</span>
                    <hr style="width: 75%;" />
                    <label style="margin-left: 70px;">Email :</label>
                    <span>{$user_email}</span>
                    <hr style="width: 75%;" />
                    <label style="margin-left: 70px;">Premium Status :</label>
                    <span>{if $duration > 0}<span style="color: green; font-weight: bolder;">Active</span>{else}Trial{/if}</span>
                    <hr style="width: 75%;" />
                    <label style="margin-left: 70px;">Duration :</label>
                    <span>{$dur}</span>
                    <div style="margin-left: 70px;">Updates every 30 mins</div>
                </div>
            </fieldset>
        </div>
{include file='footer.tpl'} 

So what's inside my header.tpl is this:

<ul id="navigation">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="/myaccount">My Account</a></li>
                <li><a href="/editaccount">Edit Account</a></li>
                <li><a href="/logout">Logout</a></li>
</ul> 

So now my problem is, how do I move/ rename the li class if I only use this: {include file='header.tpl'} for my navigation?

[Apathetic]

^You can try do some php checking (maybe thru a variable) on which page you are currently in.

<li <?php echo $isHome?'class="active"':''; ?>><a href="/">Home</a></li>
<li  <?php echo $isMyAccount?'class="active"':''; ?>><a href="/myaccount">My Account</a></li>
<li  <?php echo $isEdit?'class="active"':''; ?>><a href="/editaccount">Edit Account</a></li>
<li  <?php echo $isHome?'class="active"':''; ?>><a href="/logout">Logout</a></li>

THere can be other ways of doing this, I'm just shedding some light.

[mRAza]

if you are using smarty (as u mentioned above) see answer here:

http://*******/uViQG