View Full Version : Sizing and aligning CSS tabs

Dec 30th, 2009, 07:29 PM
i used this method (http://icant.co.uk/articles/flexible-css-menu/) to design the tabbed navigation on this page of my site: http://www.shirtsaboutnothing.com/studio_red_oak1.html

however, for some reason the tabs aren't properly shrinking the original tab images so that the curved right side is fit within each tab. as you can see, the right side each tab just cuts off the image so that the side is straight. but i'd like the right side to have the curve just like the left.

any idea how to fix? thanks!

Dec 30th, 2009, 09:06 PM
Hello sixrfan,
I messed with this a bit and couldn't get it to work either.
The right curve is there, it's just the tabs.gif on the anchor is still visible behind it.
Best I came up with is a background color on the spanned tabs.gif.
Like this -

ol#sku_tabs span {
background: #632908 url(template_pics/tabs.gif) 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;

Here is a demo of the sliding doors method (http://nopeople.com/CSS/menu%20tabs/index.html)of doing tabs. It uses two images though...

Dec 30th, 2009, 09:31 PM
nothing wrong with that. seems to do the trick. thanks!

also though, how do i get the tabs centered? i can't figure out where to put text-align: center;


Dec 30th, 2009, 10:07 PM
You can fake a center like this -

/* Studio Tabs */
ol#sku_tabs {
overflow: auto;
list-style: none;
margin: 0 0 0 110px;
padding: 0;

Otherwise, you would need to give your ol a width and center it with margin: 0 auto;

Here is a third method (http://nopeople.com/CSS/menu-h_centered-ul/index.html)that you might like.

Dec 30th, 2009, 10:08 PM
nothing wrong with that. seems to do the trick. thanks!

Glad it works for you. I'm still trying to figure out what the difference is between yours and the example you followed...

Dec 30th, 2009, 10:32 PM
So, it's pretty obvious what's different when you look at the images. You're using a transparent gif that doesn't lend itself well to the way we're stacking these images.

Look at the two differrent images here -

Wow, I was stumped on that one way too long!