• ll87
  • New member
  • Offline
  • Registered: 2009-03-23
  • Posts: 17

Topic: goodtoknow website

the website at www.goodtoknow.co.uk has a nice tabbed menu (imo) but when right clicking one to find their background images, nothing comes up in the list to do it. surely they use images? i used firebug to look at the css briefly but nothing that puts an image there. is there a way they would have blocked viewers from getting the background image?

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

Re: goodtoknow website

No, they have used an image -- url(/images/nav/tabs/tab_left.png). It is overlayed over the tab background color (which is unique for each tab) and creates the tab effect.

The css rule:
ul.tab #t-generic, ul.tab #t-health, ul.tab #t-diet, ul.tab #t-food, ul.tab #t-family, ul.tab #t-videos, ul.tab #t-forums, ul.tab #t-xmas, ul.tab #t-coffee-break, ul.tab #t-shopping, ul.tab #t-sex, ul.tab #t-goodforyou, ul.tab #t-nationalfamilyweek {
background-color:#FF54A1;
background-image:url(/images/nav/tabs/tab_left.png);
background-position:left top;
background-repeat:no-repeat;
border-bottom:1px solid #FFD3E7;
font-size:1.1em !important;
}

  • ll87
  • New member
  • Offline
  • Registered: 2009-03-23
  • Posts: 17

Re: goodtoknow website

thanks for your help.

i still can't find that rule, it's because i'm not using firebug properly, point me in the right direction?

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

Re: goodtoknow website

Not sure exactly... I click on the tab using Firebug (I go down to the code view and select the <li> element), and then check the css properties. It is the second listed:

.home ul.tab #t-generic, .home ul.tab #t-generic:hover, ul.tab #t-generic:hover {
background-color:#FF4A9B;
}
carousel.css (line 1)
ul.tab #t-generic, ul.tab #t-health, ul.tab #t-diet, ul.tab #t-food, ul.tab #t-family, ul.tab #t-videos, ul.tab #t-forums, ul.tab #t-xmas, ul.tab #t-coffee-break, ul.tab #t-shopping, ul.tab #t-sex, ul.tab #t-goodforyou, ul.tab #t-nationalfamilyweek {
background-color:#FF54A1;
background-image:url(/images/nav/tabs/tab_left.png);
background-position:left top;
background-repeat:no-repeat;
border-bottom:1px solid #FFD3E7;
font-size:1.1em !important;
}