Grow your CSS skills. Land your dream job.

Rounded Tabs in WordPress via CSS

  • # July 10, 2008 at 1:39 pm

    Hey guys,

    i made a little code for displayin’ my categories in tabs on my wordpress-blog. I’m a bit pissed, cuz I don’t know whats wrong with my code. Theres always a space beside my tab, so it looks like a bomb! :)

    Here’s a shot

    [img]http://img.skitch.com/20080710-r7hy9xjry1dj5i7xgpbmnkbkwy.preview.jpg[/img]
    Click for full sizeUploaded with plasq‘s Skitch

    Heres the code:

    HTML

    Code:
      < ?php
      wp_list_categories('orderby=name&include=4,187,59,3&title_li= '); ?>

    CSS

    Code:
    ul.catnav {
    list-style-type: none;
    margin:10px 0 10px 15px
    }

    .catnav li {
    margin: 0 10px 0 0;
    }

    .catnav li a {
    padding: 7px 10px 7px 2px;
    background: url(images/white_short.gif) top right no-repeat;

    }

    .catnav li {
    padding: 7px 0px 7px 8px;
    display: inline;
    background: url(images/white_long.gif) left top no-repeat;

    }

    .catnav .current-cat a {
    color: #fff;
    }

    .catnav .current-cat a {
    padding: 7px 10px 7px 2px;
    background: url(images/short.gif) top right no-repeat;

    }

    .catnav .current-cat {
    padding: 7px 0px 7px 8px;
    display: inline;
    background: url(images/long.gif) left top no-repeat;

    }

    Maybe you have an idea?

    Thanks in common…

    # July 11, 2008 at 12:41 am

    Do you have a live link we can check out? I have a feeling it’s just those padding values that can be tweaked around a little bit to get it to work. Or perhaps the addition of a little negative right margin on the anchor link?

    # July 11, 2008 at 7:50 am

    sorry, it’s not online, cuz its really ugly! :) maybe you can paste the code into a html to test it?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".