Latest Announcemnent
New thread

Simple CSS highlight help

Status
Not open for further replies.
N

NewBiee

Active Member
77
2011
2
0
Code: 
<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?

Code: 
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. :))
 
11 comments
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.

Code: 
<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
 
jayfella said:
modify
ul#navigation li.active
Click to expand...

What do I modify sir?

deAthbLisS said:
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.

Code: 
<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
Click to expand...

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?
 
What deAthbLisS said is right.

Add this CSS code in your .css file
Code: 
ul#navigation li.active1
{
    border-bottom: 1px solid #000;
    background: #304b0f;
}

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

Example:
PHP: 
<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 ;)
 
NewBiee said:
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?
Click to expand...
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:
PHP: 
<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
 
BlaZe said:
What deAthbLisS said is right.

Add this CSS code in your .css file
Code: 
ul#navigation li.active1
{
    border-bottom: 1px solid #000;
    background: #304b0f;
}
Now whichever tab needs to be highlighted, add class="active1" for it.

Example:
PHP: 
<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 ;)
Click to expand...

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

soft2050 said:
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:
PHP: 
<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
Click to expand...

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

So this is my Home.
PHP: 
{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:
PHP: 
{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:
PHP: 
<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?
 
^You can try do some php checking (maybe thru a variable) on which page you are currently in.

PHP: 
<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.
 
Last edited:
Apathetic said:
^You can try do some php checking (maybe thru a variable) on which page you are currently in.

PHP: 
<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.
Click to expand...

Can you help me do this?

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

http://goo.gl/uViQG
Click to expand...

I appreciate your reply, I'm gonna try this later.
 
Try this
Code: 
<html>
    <head>
        <style type="text/css">
            .item {
                width:900px;
                padding:0;
                margin:0;
                list-style-type:none;
            }

            a {
                display:block;
                width:60;
                line-height:25px; /*24px*/
                border-bottom:1px  none #808080;
                font-family:'arial narrow',sans-serif;
                color:#00F;
                text-align:center;
                text-decoration:none;
                background:#CCC;
                border-radius: 5px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                margin-bottom:0em;
                padding: 0px;
            }

            a.item {
                float:left;        /* For horizontal left to right display. */
                width:145px;       /* For maintaining equal  */
                margin-right: 5px; /* space between two boxes. */
            }

            a.selected{
                background:orange;
                color:white;
            }
        </style>
    </head>
    <body>
      <a href="/" class="item">Home</a>
      <a href="/myaccount" class="item">My Account</a>
      <a href="/editaccount" class="item">Edit Account</a>
      <a href="/logout" class="item">Logout</a>
        <script>
            var anchorArr=document.getElementsByTagName("a");
            var prevA="";
            for(var i=0;i<anchorArr.length;i++)
            {
                anchorArr[i].onclick = function(){
                    if(prevA!="" && prevA!=this)
                    {
                        prevA.className="item";
                    }
                    this.className="item selected";
                    prevA=this;
                }
            }
        </script>
    </body>
</html>
 
Status
Not open for further replies.
Back
Top