Textpattern CMS

#1 2010-03-17 18:50:51

ricoschette

Member

From: Estonia

Registered: 2005-09-17

Posts: 176

Overlapping tabs

Well, I tried many things to make it work, but hopeless…
I have created simple tabs and want them to be overlapped.

I use 1 background image for the tabs. It is a PNG transparent file.

I’m using “background-color:#000” there, too. When transparent, it won’t work :(

Overlapping happens with “margin-right:-20px;”

Check out live demo

Any suggestions how it could be made easier?
Right now the active tab won’t be on top.

#2 2010-03-18 10:35:59

trenc

Plugin Author

From: Malmö

Registered: 2008-02-27

Posts: 572

Website GitHub

Re: Overlapping tabs

Hi ricoschette,

this won’t work if you want tabs with a dynamic width. There are multiple attempts. You have to create a (or more) PNG, so that every tab always inluded the last segment of the previous or the beginning segment of the next tab (in every state of current, hovered, passive).

Figural explanation:

Your current PNG:
++++++

But it should look like:
-++++-

Where - is the state of the prevoius or next tab.

You will find many tutorials and howtos on your preferred search engine.

---

Weblog | 32fthome