Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Overlapping Tabs in CSS

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #40620
    maor
    Member

    Hi guys,

    I’ve been handed with a PSD and asked to slice it into HTML+CSS. The issue that I’m running into is that I have no clue of how to extract the tabs graphics and make it all work. Each tab should be able to be “inactive” or “active”, and there are different graphics for each.

    So my question is, how do I start? I have a strong understanding in CSS but this really keeps me from moving, I’ve never dealt with such kind of tabs.

    Here’s a link to the [full screenshot](http://i.imgur.com/duxd9.png)

    ![the tabs](http://i.imgur.com/duxd9.png)

    Thanks for helping!
    M Chasen

    #113403
    Paulie_D
    Member

    To be honest you don’t need the images…you can do all this with CSS depending on what browser support (basically which IE versions) you need.

    https://css-tricks.com/tabs-with-round-out-borders/

    #113404
    Paulie_D
    Member

    However, at the moment, if you really need to slice up the PSD, the simple answer is ‘you can’t’.

    They have not provided you with what the active tab looks like (except for the ‘Overview’ tab which is different from all other tabs.)

    If you really don’t know how to slice up a PSD then that’s a whole other question.

    #113229
    Senff
    Participant

    Eh, I would say the Overview tab is the one that’s active, so you could use that as a basis for all the other tabs.

    It’ll be tricky though, I hate those tabs where they overlap eachother somewhat. You’ll always end up with some negative margins or absolute positioning and such.

    #113230
    Paulie_D
    Member

    I know the Overview tab is the active one but if you are going to use images then it’s different from all the other tabs which, I assume, have round-in and round-out….and that’s the issue.

    I agree with you on the negative margin thing BTW.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.