...

View Full Version : Sizing and aligning CSS tabs



sixrfan
12-30-2009, 06: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!

Excavator
12-30-2009, 08: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...

sixrfan
12-30-2009, 08: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;

thanks!

Excavator
12-30-2009, 09: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.

Excavator
12-30-2009, 09: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...

Excavator
12-30-2009, 09: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 -
http://nopeople.com/webfiles/Untitled-1.jpg

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum