6 replies [Last post]
-=GiL=-
Offline
newbie
Last seen: 16 years 51 weeks ago
Joined: 2004-03-15
Posts: 4
Points: 0

Hi!

First off. This is a great forum. I've been using it for a while, but have never posted as I've always found the answer I was looking for. Much appreciated!

Secondly, I'm having trouble with part of the navigation for a site i'm working on and wondered if anyone could offer any help.

I've been working on a version of alistapart's sliding doors tab technique for 3 tabs I want to use on my layout, but I'm finding it restrictive in terms of the graphic you can use for the base. It seems that you can only really have the shape of the original design otherwise the graphics distort quite badly.

You can see the tabs on my concept design here (please excuse the low quality gif). This shows what I'm trying to achieve.

I've got my heart set on this design and would like to get around it somehow. Anyone have any suggestions ?

TIA.

GiL.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 21 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Graphical tabs possibility?

Hi -=GiL=-,
I think as your tabs are basically flat you should be able to do the tabs with a much simpler method.
Create an white image that is the wedge (white part) between two tabs make the rest of the image transparent. then use something like

li{
    list-style:none; 
    float:left; 
    padding:3px 15px; 
    background-color:red; 
    background-image:url(wedge.gif);
    background-position:-10px 0;
    background-repeat:no-repeat;
    }
You will have to play with the position values etc and should make the wedge taller to handle text resize, the excess will be positioned out of view. And you will need a different image for the first and last tabs.
Oh well it sounded easier to me.
Hope that helps.

-=GiL=-
Offline
newbie
Last seen: 16 years 51 weeks ago
Joined: 2004-03-15
Posts: 4
Points: 0

Graphical tabs possibility?

I'm gonna have to give up on this I think.

The tabs look really naff and I can't get them to look the same as the design. I'm really beginning to miss tables! :?

Thx for your help.

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 17 years 19 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

Graphical tabs possibility?

Frankly I don't understand your problem. If you
want tabs like in your gif I see no difficulties other
than possibly related to them being under the bar
rather than over it. The shape should be very easy.

I have recently had much experience wih this
technique, and feel you are panicking for nothing.

Can you explain exactly what your difficulty is, so
I can understand where you are going wrong?

http//www.positioniseverything.net/

-=GiL=-
Offline
newbie
Last seen: 16 years 51 weeks ago
Joined: 2004-03-15
Posts: 4
Points: 0

Graphical tabs possibility?

I'm not panicking. I just don't know how to do it because I'm a CSS noob Laughing out loud

I can't seem to maintain the original shape of the image for tabs when I use the list aparts version.

I tried doing it in a simpler way as Tony suggested, but didn't really get a very good result. In fact I'm pretty sure I didn't do it right because the tabs looked very strange.

If you can point me in the right direction I would appreciate it.

Cheers,

GiL.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 21 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Graphical tabs possibility?

Hi -=GiL=-,
Sorry like most things these days I rushed my example a bit Shock
Her is a list of tab example you should find helpful. http://css-discuss.incutio.com/?page=ListTabs

-=GiL=-
Offline
newbie
Last seen: 16 years 51 weeks ago
Joined: 2004-03-15
Posts: 4
Points: 0

Graphical tabs possibility?

Great stuff.

Cheers Tony Laughing out loud