4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

I need some help on this code snippet - please

by BenQ
3 replies
I'm trying to style navbar tabs. I have two pieces of code that work, but I need more control over the individual tabs and not sure how to do it.

These tabs are under the header and the far right. And I'm trying to round the bottom left corner of only the first tab. The two code snippets below both round the bottom left of every tab in the nav bar.

I'd like to figure out the proper code that would give me control over each tab and allow me to style each tab individually. The 2 snippets below get me halfway there, just not sure which is better to be improved on.
Code:
.custom .menu, .custom .menu a, .custom .menu li ul {
-moz-border-radius-bottomleft:.5em; font-weight:bold;
-webkit-border-bottom-left-radius:.5em; font-weight:bold;
-moz-border-radius-bottomright:.0em;
-webkit-border-bottom-right-radius:.0em;}
or this:
Code:
/* Remove the border from the far left. */
ul.menu{border-left:0;}

/* Add the left border back in. If you change the color of the nav border in the WordPress admin panel, you will also have to manually change the left border color below. */
ul.menu li.tab-1 a{
    border-left:1px solid #CCC;
    -moz-border-radius-topleft:.5em;
    -webkit-border-top-left-radius:.5em;}

/* This creates the rounded borders. */
ul.menu li.tab a{
    -moz-border-radius-bottomleft:.5em; font-weight:bold;
    -webkit-border-bottom-left-radius:.5em; font-weight:bold;
    -moz-border-radius-topright:.0em;
    -webkit-border-top-right-radius:.0em;}
#code #snippet
  • Profile picture of the author doop
    For stuff like this you're better off trying stackoverflow.com - you'll get half a dozen responses in about 30 seconds!!! Best SITE ever for coding!!!
    {{ DiscussionBoard.errors[3203506].message }}
  • Profile picture of the author indianbill007
    Hi
    Expert here. Hit me for details
    {{ DiscussionBoard.errors[3203661].message }}
  • Profile picture of the author phpbbxpert
    The tab that you want rounded should have an ID or a class not used anywhere else.
    Then style that id.
    <ul id="tabs">
    <li id="first">First Tab</li>
    <li>Second Tab</li>
    </ul>

    All tabs
    #tabs li {

    }

    Now style the fist tab
    #tabs li#first{

    }
    {{ DiscussionBoard.errors[3213050].message }}

Trending Topics