Current Tab Not Working

**Ian R. Gordon** · Oct 21, 2004, 08:05

Hey,

I was trying to get these tabs to work...I am making them expandable but, I need them to work properly, currently the only tab that isn't working is the current "active" tab that is specificed with the "body" tag.

Here is the code:

HTML

Code:

	<body id="blog">
		<div id="wrapper">
			<div id="title">&nbsp;</div>
				<div class="menu">
					<ul id="navigation">
						<li><a class="blog" href="/">Blog</a></li>
						<li><a class="pages" href="/">Pages</a></li>
						<li><a class="templates" href="/">Templates</a></li>
						<li><a class="settings" href="/">Settings</a></li>
					</ul>
				</div>
			<div class="sidemenu">Text here? Right! I think so? Don't you...</div>
		</div>
	</body>

CSS

Code:

#navigation {
  top: 251px;
  _top: 250px;
  position: absolute;
  list-style-type: none;
  white-space: nowrap;
  z-index: 1000;
  }
   #navigation ul { 
     margin: 0; 
     padding: 0;
     list-style: none;
     }
   #navigation li {
     background: url(../images/right-tab.gif) no-repeat right top;
     float: left;
     margin: 0 0 0 .09em;
     padding: 0;
     }
   #navigation a {
     background: url(../images/left-tab.gif) no-repeat left top;
     color: #666;
     display: block;
     font: 0.8em Verdana, Helvetica, sans-serif;
     padding: .4em 1em;
     text-decoration: none;
     }
   #navigation a:hover {
     color: #333;
     }
   #blog .blog, #pages .pages, #templates .templates, #settings .settings {
     background-image: url(../images/right-tab-hover.gif);
     }
   #blog .blog a, #pages .pages a, #templates .templates a, #settings .settings a {
     color: #333;
     background-image: url(../images/left-tab-hover.gif);
     cursor: default;
     font-weight: bold;
     }

.menu {
  background: #CDC2A3;
  height: 2.5em;
  }

I have looked over the code like four times and I can't seem to find the trouble area. Below is a screenshot of the problem:

**Paul O'B** · Oct 21, 2004, 12:47

Hi,

This code:

Code:

 #blog .blog a

applies to anchors that are within a class of blog which you don't have. You have an anchor that has a class of blog.

e.g.

Code:

 #blog a.blog

Paul

**Ian R. Gordon** · Oct 21, 2004, 18:32

Paul,

Thanks but, it didn't work quite that well. Look what happened now:

See only half of it is showing...the problem has to be here:

CSS:

Code:

   #blog .blog, #pages .pages, #templates .templates, #settings .settings {
     background-image: url(../images/right-tab-hover.gif);
     }

**Paul O'B** · Oct 22, 2004, 01:55

Hi,

You need to specify the full path so that it carries more weight.

Code:

#blog #navigation li a.blog

Its a question of specifity and the way its calculated. #navigation li was overiding #blog .blog because the former carried more weight.

Paul

**Ian R. Gordon** · Oct 22, 2004, 12:34

However, if I do that, then I am back to the first problem I had before...there has to be a workaround to this.

Here is all the CSS:

Code:

html,body {
  background: #F8F4EA url(../images/background.gif);
  height: 100%;
  color: #4C4531;
  font-family: Verdana, Arial, Helvetica, Sans-serif;
  font-size: 10pt;
  text-align: center;
  margin: 0;
  padding: 0;
  }

#wrapper {
  background: #FFF4D3 url(../images/menu_back.gif) top right repeat-y;
  width: 740px;
  height: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  border-left: 5px solid #7B7258;
  border-right: 5px solid #7B7258;
  padding: 0;
  }

#title {
  background: url(../images/title.gif) top no-repeat;
  height: 252px;
  border-bottom: 1px solid #FFFFFF;
  }

#navigation {
  top: 251px;
  _top: 250px;
  position: absolute;
  list-style-type: none;
  white-space: nowrap;
  z-index: 1000;
  }
   #navigation ul { 
     margin: 0; 
     padding: 0;
     list-style: none;
     }
   #navigation li {
     background: url(../images/right-tab.gif) no-repeat right top;
     float: left;
     margin: 0 0 0 .09em;
     padding: 0;
     }
   #navigation a {
     background: url(../images/left-tab.gif) no-repeat left top;
     color: #666;
     display: block;
     font: 0.8em Verdana, Helvetica, sans-serif;
     padding: .4em 1em;
     text-decoration: none;
     }
   #navigation a:hover {
     color: #333;
     }
   #blog .blog, #pages .pages, #templates .templates, #settings .settings {
     background-image: url(../images/right-tab-hover.gif);
     }
   #blog a.blog, #pages a.pages, #templates a.templates, #settings a.settings {
     color: #333;
     background-image: url(../images/left-tab-hover.gif);
     cursor: default;
     font-weight: bold;
     }

.menu {
  background: #CDC2A3;
  height: 2.5em;
  }

.sidemenu {
  float: right;
  width: 263px;
  font-size: 8pt;
  text-align: left;
  padding-top: 5px;
  }

**Paul O'B** · Oct 22, 2004, 12:37

However, if I do that, then I am back to the first problem I had before...there has to be a workaround to this.

You'll have to give me a link to the page so I can do it for you as we are going around in circles here

PM me if you don't want it seen live but it will have to wait until tomorrow now

Paul

**Ian R. Gordon** · Oct 22, 2004, 18:48

oh sorry, here is the HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<title>Tenji - Administration Panel</title>

	</head>
	<body id="blog">
		<div id="wrapper">
			<div id="title">&nbsp;</div>
				<div class="menu">
					<ul id="navigation">
						<li><a class="blog" href="/">Blog</a></li>
						<li><a class="pages" href="/">Pages</a></li>
						<li><a class="templates" href="/">Templates</a></li>
						<li><a class="settings" href="/">Settings</a></li>
					</ul>
				</div>
			<div class="sidemenu">Text here? Right! I think so? Don't you...</div>
		</div>
	</body>
</html>

**Paul O'B** · Oct 23, 2004, 05:14

Ok

here you go:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html,body {
background: #F8F4EA url(images/background.gif);
height: 100%;
color: #4C4531;
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-size: 10pt;
text-align: center;
margin: 0;
padding: 0;
}
#wrapper {
background: #FFF4D3 url(images/menu_back.gif) top right repeat-y;
width: 740px;
height: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
border-left: 5px solid #7B7258;
border-right: 5px solid #7B7258;
padding: 0;
}
#title {
background: url(../images/title.gif) top no-repeat;
height: 252px;
border-bottom: 1px solid #FFFFFF;
}
#navigation {
top: 251px;
_top: 250px;
position: absolute;
list-style-type: none;
white-space: nowrap;
z-index: 1000;
}
ul#navigation { 
margin: 0; 
padding: 0;
list-style: none;
}
#navigation li {
background: url(images/right-tab.gif) no-repeat right top;
float: left;
margin: 0 0 0 .09em;
padding: 0;
}
#navigation a {
background: url(images/left-tab.gif) no-repeat left top;
color: #666;
display: block;
font: 0.8em Verdana, Helvetica, sans-serif;
padding: .4em 1em;
text-decoration: none;
}
#navigation a:hover {
color: #333;
}
#blog li.blog a, #pages li.pages a, #templates li.templates a, #settings li.settings a{
background: url(images/left-tab-hover.gif);
}
#blog li.blog, #pages li.pages, #templates li.templates, #settings li.settings {
color: #333;
background-image: url(images/right-tab-hover.gif);
cursor: default;
font-weight: bold;
}
.menu {
background: #CDC2A3;
height: 2.5em;
}
.sidemenu {
float: right;
width: 263px;
font-size: 8pt;
text-align: left;
padding-top: 5px;
}
</style>
<title>Tenji - Administration Panel</title>
</head>
<body id="blog">
<div id="wrapper"> 
<div id="title">&nbsp;</div>
<div class="menu"> 
<ul id="navigation">
<li class="blog" ><a href="/">Blog jkj </a></li>
<li class="pages"><a href="/">Pages</a></li>
<li class="templates"><a href="/">Templates</a></li>
<li class="settings"><a href="/">Settings</a></li>
</ul>
</div>
<div class="sidemenu">Text here? Right! I think so? Don't you...</div>
</div>
</body>
</html>

That solves the images showing correctly (didn't check anything else though)
(Change the image locations back to yours.)

Paul

The SitePoint Forums have moved.

User Tag List

Thread: Current Tab Not Working

Thread Tools

Display

Current Tab Not Working

Bookmarks

Bookmarks

Posting Permissions