CSS tabs

[titaniumbean]

Hi I am looking at changing some example css tabs I found on the web.




I want the foremost tab not to have a line underneath it. The tab itself only has borders top right and left. Not bottom. The bottom line is (bear with me) the top of the main area below.

I had the idea of enlarging the tab slightly in height (but so the top stays still and the bottom bit of the tab moves down). Then setting the z index value to higher than that of the main area; whilst also keeping the main area in the same place so the tab is slightly overlayed and in just the area where the tab is the main areas top border is dissapeared so you get the affect I want.

Sorry for how confusing that is but I'm just typing whilst thinking i'm sure i'll read this back in a minute and find it makes no sense!


Any ideas what exactly I have to change in my css? And if it's possible to get the main area to stay still whilst moving the tab down slightly.

http://www.cwprint.co.uk/Pic/cwsite.css/



Thanks in advance


titaniumbean.

[Smokie]

can you post a gif or jpg instead, a tiff wont display!

sounds to me like you need border-bottom:0px; on the selected tab

[titaniumbean]

Link is below.

http://www.cwprint.co.uk/Pic/linksquestion.jpg/


There is no border specified for the foremost tab. I need a way of getting rid of a chunk of the top part of the border round the main section. But I only want to get rid of the part where the foremost tab is so it looks like a proper filing system.


Any ideas?



titaniumbean.

[Andy K]

Hi

I think your Z-index idea is a good one by just making the foremost tab above and a little bigger to cover the main border. To use Z-index you will need to use absolute positioning, which might cause a problem with the cross-browser position. . but then again it might not.

You can cover it without using Z-index and by adjusting the position/padding/margins to ofset it. Needs some experiment

Another idea could be to add a bottom-border to the formost tab, the same as the background colour and with a 3px size. This might cover it, but unsure without trying.

[titaniumbean]

That there is a very good idea. Will start fiddling with a large bottom border. Back in a mo.



[EDIT]
The problem with this idea is that when you increase the bottom border size the main body area below which I want to overlap to moves down aswell. As it's relatively positioned.

Any ideas.

[/EDIT]


toodles


titaniumbean.

[Andy K]

How about removing the top border from the main area. Then use background images on the tabs somehow.

.... or I just thought.

If you place all the TABs inside an absolute layer- so it is just over the main content. Then you can adjust the tabs, add a big border or whatever and it wont push the main content down?

LET me know how it goes dude