Some CSS Help?

[VPrime]

Hey guys, I am building a site here and sort of stuck.

I am trying to get the site to have some tabs that just unhide a div on a click.
I used this site for the tab code (java, css)
http://www.elated.com/articles/javascript-tabs/

Any ways, What I am trying to do different from that site is have images as the div background instead of a solid color.

I can get the standard "unclicked" image to work fine (simple change for that). But when I try changing the selected and hover code to change a background image instead of color, it just changes the image around the 'a' text element instead of the div.

I know the problem, my CSS code is specifically telling it to! I just don't know the proper code to make the background cover the whole div, instead of just the bit of text.

here is the code for my css

ul#tabs { 
	width: 100%;
	overflow: hidden;
	margin: 0 0 -1px 0;
	position: relative;
} 
ul#tabs li {
	background: url(images/name1.png) no-repeat 0% 0%;
	width: 67px;
	height: 28px;
	overflow: hidden;
	padding: 0 0 0 10px;
	float: left;
	line-height: 30px;

}
ul#tabs li a {
	font-size: 0.917em;
	font-weight: bold;
	text-decoration: none;
	color: #000;font-size: 0.917em;
	font-weight: bold;
	text-decoration: none;
	color: #000;
	}
ul#tabs li a:hover {background: url(images/name1ovr.png) no-repeat 0% 0%;} 

ul#tabs li a.selected {
	color: #3a3a32;
}
ul#tabs li a.selected {
  background: url(images/name-act.gif) no-repeat 0% 0%;
	width: 80px;
}

 

[angelwatt]

Apply the CSS for the image to the individual tab you want it applied to. The current CSS you have here applies to only the tabs, not the content areas.

 

[VPrime]

Apply the CSS for the image to the individual tab you want it applied to. The current CSS you have here applies to only the tabs, not the content areas.

I am sorry, but I don't understand what you mean?

 

[angelwatt]

I am sorry, but I don't understand what you mean?

The CSS you posted only applies to the small tab pieces, not the content the tab reveals. You need to apply CSS to that content area rather than to the tab piece.

 

[Akitakoi]

http://www.fosterhydraulics.com/page/diesel/99_hp.html

If your trying to do something like I have on this page using spry in Dreamweaver makes it a breeze.

 

[VPrime]

The CSS you posted only applies to the small tab pieces, not the content the tab reveals. You need to apply CSS to that content area rather than to the tab piece.

I don't have the issue with the content.. I am trying to change the background of the selected tab piece it self.

http://www.fosterhydraulics.com/page/diesel/99_hp.html

If your trying to do something like I have on this page using spry in Dreamweaver makes it a breeze.

Yeah, except when you click a tab, the background of the tab it self (not the content) changes.


Here is the issue I am having, maybe the picture will help explain it.
"The office" is the selected tab. See the little grey square behind the text? well that is actually a background image (the exact same size as the tab).
I want it to be the background of the whole tab piece (not the content) not just the text.
The same thing is happening on the "hover" as well.

 

[angelwatt]

Ah, that clears things up better, the picture helps. I usually fix this stuff with trial and error, but here are some things to try out. I ran into a similar thing when first learning to do vertical navigation lists and having the entire nav element be clickable.

Make the a a block element; ul#tabs li a {display:block;} This will help it fill the space of the li. You should also move the padding on the li to the a so it can be used to fill the space. You may need to move the line-height to the a as well.

Another way is to use CSS Sprites for the tab images. There's another thread here talking about them, so you may want to check it and follow any links provided to see if it may be a better solution for you.

 

[VPrime]

Ah great that helped a bit thanks!
But for some reason the left side is still weird. Even after playing with the pading.

As for sprites, after reading a bit on them I don't thik I want to go down that road with this site. It is just extra effort at this point, and I have to have this done by nov first.

 

[angelwatt]

If you can either give us a link where you're working on this or post the code involved we might be able to get that last bit figured out. Just working from images and some of the CSS is hard. There could be some tags with default style properties involved that need to be overwritten. Also, you may want to take a look at the Firebug or Web Developer Toolbar addons for Firefox as they can help debug these problems pretty effectively.

 

[VPrime]

The rest of the code is identical to that of the link I originally posted.

 

[VPrime]

Fixed it... I was an idiot and didnt look at ALL the padding changes..
Apparently the 10px padding on the tabs (unselected) didnt trasnfer to the hover, so I just removed the padding and all is fine!

Thanks for all your help!