CODEWITHSUNDEEP
htmlcss
raghu_3
raghu_3

Reputation: 1899

Highlighting active tab in navigation

I am trying to highlight the active tab in my tabbed navigation site. This is html snippet for tabs.

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Title here</title>
<link href="style.css" media="all" rel="stylesheet" type="text/css" />
<style type="text/css">
.auto-style1 {
        font-size: medium;
}
</style>
</head>

<body>

<div id="container">
     <div id="navigation">                    
        <ul>
           <li class="link"><a href="default.html" title="Product">Home</a></li>
           <li class="link"><a href="Research.html" title="Product">Research</a></li>    
           <li class="link"><a href="Teaching.html" title="Progress">Teaching</a></li>
           <li class="link"><a href="about.html" title="About">Contact</a></li>
           <li class="link"><a href="CV.html" title="CV">CV</a></li>
        </ul>
     </div>

This is my Stylesheet

/* --------------------------------------------- RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, 
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; font-weight: normal;}
body { margin: 0pt;}
ol, ul { list-style-type: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }

/* --------------------------------------------- STRUCTURE STYLES */
body {
        font-family: Georgia, "Times New Roman", Times, serif;
        background: url('bg.jpg') repeat-x top left #f0f0f0;
}

#container {
        width: 960px;
        height: auto;
        margin: 0 auto 0 auto;
}

#header {
        color: #fff;
        font-size: .9em;
        width: 190px;
        height: 40px;
        float: left;
        margin-right: 2px;
}


   /* --------------------------------------------- NAVIGATION */
#navigation {
        padding-top: 15px;
        width: 960px;
        float: left;
}

#navigation .link {
        background: #f0f0f0;
        float: left;
        text-align:center;
        font-size:0.5cm
  }

#navigation .link:hover {
        background: #92c19b;
}

#navigation .link:focus{
        background:silver;      
  }
#navigation .link:active{ 
background:silver; 
} 

#navigation li a {
        padding-top: 15px;
        padding-left: 15px;
        width: 176px;
        height: 45px;
        margin-bottom: 1px;
        border-left: #fff solid 1px;
        color: #000;
        float: left;
        font-size: 1em;
}

#navigation p {
        position: absolute;
        font-size: .8em;
        top: 45px;
        padding-left: 15px;
}

/* --------------------------------------------- FONTS & IMAGES */
h1 {font-size: 1.9em;}
#header h1 {padding: 15px; background: #000; text-align: center; font-weight: bold;}
#header a {color: #fff;}
h2 {font-size: 1.9em;}
#splash h2 {color: #12884f;}
h3 {font-size: 1.4em; line-height: 1.1em;}
h4 {font-size: 1em; font-weight: bold;}
p {font-size: .8em; line-height: 1.6em;}
p.footer {font-size: .6em; color: #000; text-align: right; padding-top: 100px;}
p.header {font-size: .8em; font-style: italic; color: #ababab;}
#content p, #content h3, #sidebar h3, #content h4, #sidebar p {margin-bottom: 25px;}
img {margin: 0 0 25px 0;}
li {font-size: .7em; margin-bottom: 10px;}

both li:active and li:focus don't highlight the active tab. But strangely li:hover does work

Anything i can do to resolve this??

I am looking for highlighting something like this:

enter image description here

Upvotes: 1

Views: 18897

Answers (2)

Dasuevia
Dasuevia

Reputation: 72

Sorry my mistake, just remove the last comma "," before the opening the curly brackets "{" and it should work. Here's an example I just tested:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Home</title>
        <style>
            #home #nav_home a,
            #research #nav_research a,
            #teaching #nav_teaching a,
            #about #nav_about a,
            #cv #nav_cv a {
                color:aqua;
            }
        </style>
    </head>
    <body id="research">
        <ul>
            <li id="nav_home"><a href="">Home</a></li>
            <li id="nav_research"><a href="">Research</a></li>
            <li id="nav_teaching"><a href="">Teaching</a></li>
            <li id="nav_about"><a href="">About</a></li>
            <li id="nav_cv"><a href="">CV</a></li>
        </ul>
    </body>
</html>

I hope this helps :) Sorry about the wrong answer before, as I said I'm just starting web development myself.

Cheers!

Upvotes: 1

Dasuevia
Dasuevia

Reputation: 72

The CSS :active selector only applies when the link is active - i.e. being clicked on. The :focus selector is only allowed on elements that accept keyboard events or other user input. I'm fairly new to web development myself, but I think you won't be able to achieve what you're looking for with those selectors.

You could try assigning an id to the body tag for each page in your tab menu and a different id to every li in your menu. For example:

<body id="home">        <!-- on default.html -->
<body id="research">    <!-- on research.html -->
<body id="teaching">    <!-- on teaching.html -->
<body id="contact">     <!-- on about.html -->
<body id="cv">          <!-- on cv.html -->

Your menu could look something like this:

<ul>
    <li class="link" id="nav_home"><a href="default.html" title="Product">Home</a></li>
    <li class="link" id="nav_research"><a href="Research.html" title="Product">Research</a></li>
    <li class="link" id="nav_teaching"><a href="Teaching.html" title="Progress">Teaching</a></li>
    <li class="link" id="nav_contact"><a href="about.html" title="About">Contact</a></li>
    <li class="link" id="nav_cv"><a href="CV.html" title="CV">CV</a></li>
</ul>

Then on your CSS you could do something like this:

#home #nav_home a,
#research #nav_research a,
#teaching #nav_teaching a,
#contact #nav_contact a,
#cv #nav_cv a, {
    background:silver;
}

Another option would be to just create a new class (e.g. class="active_link") and associated style for the active tab and then set it manually per page.

As I said I'm fairly new to web development myself, but both solutions should work. If you're looking for something more dynamic you probably need some Javascript.

I hope this helps.

Cheers,

Upvotes: 2

Related Questions