Some CSS Help?

Discussion in 'Web Design and Development' started by VPrime, Oct 26, 2009.

  1. VPrime macrumors 68000

    VPrime

    Joined:
    Dec 19, 2008
    Location:
    London Ontario
    #1
    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:eek:
    Code:
    
    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;
    }
    
    
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     
  3. VPrime thread starter macrumors 68000

    VPrime

    Joined:
    Dec 19, 2008
    Location:
    London Ontario
    #3
    I am sorry, but I don't understand what you mean?
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    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.
     
  5. Akitakoi macrumors regular

    Akitakoi

    Joined:
    Jan 31, 2008
    #5
  6. VPrime thread starter macrumors 68000

    VPrime

    Joined:
    Dec 19, 2008
    Location:
    London Ontario
    #6
    I don't have the issue with the content.. I am trying to change the background of the selected tab piece it self.

    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.
    [​IMG]
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    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.
     
  8. VPrime thread starter macrumors 68000

    VPrime

    Joined:
    Dec 19, 2008
    Location:
    London Ontario
    #8
    Ah great that helped a bit thanks!
    But for some reason the left side is still weird. Even after playing with the pading.
    [​IMG]

    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.
     
  9. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #9
    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.
     
  10. VPrime thread starter macrumors 68000

    VPrime

    Joined:
    Dec 19, 2008
    Location:
    London Ontario
    #10
    The rest of the code is identical to that of the link I originally posted.
     
  11. VPrime thread starter macrumors 68000

    VPrime

    Joined:
    Dec 19, 2008
    Location:
    London Ontario
    #11
    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!
     

Share This Page