SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. Oct 21, 2004, 08:05 #1
    Ian R. Gordon
    Ian R. Gordon is offline
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Current Tab Not Working

    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:

    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us
  2. Oct 21, 2004, 12:47 #2
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,009
    Mentioned
    128 Post(s)
    Tagged
    3 Thread(s)
    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
  3. Oct 21, 2004, 18:32 #3
    Ian R. Gordon
    Ian R. Gordon is offline
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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);
     }
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us
  4. Oct 22, 2004, 01:55 #4
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,009
    Mentioned
    128 Post(s)
    Tagged
    3 Thread(s)
    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
  5. Oct 22, 2004, 12:34 #5
    Ian R. Gordon
    Ian R. Gordon is offline
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
  }
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us
  6. Oct 22, 2004, 12:37 #6
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,009
    Mentioned
    128 Post(s)
    Tagged
    3 Thread(s)
    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
  7. Oct 22, 2004, 18:48 #7
    Ian R. Gordon
    Ian R. Gordon is offline
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us
  8. Oct 23, 2004, 05:14 #8
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,009
    Mentioned
    128 Post(s)
    Tagged
    3 Thread(s)
    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

« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules