header tabs

• 

  nhaparty · Member · Jun 9, 2010 at 11:33 am

  • Copy link
  • Add topic to favorites

  Hi, at the top of my blog is a header tab that contains my blog catagories. I would like it if someone could tell me how to put white lines in between each of these catagories in order to seperate them more cleaerly. I’d also like to space them out so they are evenly distributed across the header tab.

  Thanks,

  http://www.ukmediapundit.com

  Tom

  The blog I need help with is: (visible only to logged in users)

• 

  devblog · Member · Jun 9, 2010 at 10:37 pm

  • Copy link

  Because you copied the entire CSS in the Editor you have lots of duplicate and unnecessary code.

  Remove the following selectors from the CSS:

  #mainmenu ul.level1 {
  border-top:1px solid #fff;
  border-bottom:1px solid #fff;
  }
  
  #mainmenu a {
  text-decoration:none;
  border-right:1px solid #000000;
  padding:6px 9px;
  }
  
  #mainmenu li.current a  (THIS SELECTOR ONLY)

  Replace the current selectors with the following:

  #mainmenu {text-align: center;}
  
  #mainmenu ul {background: #000;}
  
  #mainmenu li {
  line-height:35px;
  font-size:1.1em;
  }

  Since you’re using pages whose title are linked to your categories, “empty” links are being created. The following code will hide them; however, this won’t work in browsers such as IE6 and IE7.

  #mainmenu li a[title]{display: none;}
  
  #mainmenu li a[href="http://ukmediapundit.com/about-this-blog/"],
  #mainmenu li a[href="http://ukmediapundit.com/contact-details/"] {display: inline;}

  Hope this is what you were aiming for.

• 

  nhaparty · Member · Jun 10, 2010 at 10:50 am

  • Copy link

  This has nearly worked. However, when i add the last bit of code you sugested this actually deletes the ‘about this bog/me’ and ‘contact details’ pages. I think this is because they are pages whilst the others are catagories.

  Do you know how i can solve this?

  Tom

• 

  devblog · Member · Jun 10, 2010 at 12:32 pm

  • Copy link

  The code I gave you above fixes that…

  #mainmenu li a[href="http://ukmediapundit.com/about-this-blog/"],
  #mainmenu li a[href="http://ukmediapundit.com/contact-details/"] {display: inline;}