css inverted tabs sample

Posted on 2009-04-29
Last Modified: 2012-05-06

I found the link below that contains css inverted tabs, something I have been looking for for a long time.

However, there is a problem.

Even though none of the tabs has a link, when I played with it with actual link, clicking on the link takes me out of the screen.

I would like the default screen (with the title Inverted Sliding Doors tabs) to be the main screen.

This way, it doesn't matter what tab I click, content on that tab will render on this main screen while maintaining same layout.

Hopefully, I am making some sense.

Thanks in advance

Question by:simflex
    LVL 2

    Accepted Solution


    Author Comment

    Thanks for your response and I am sorry I was on the road ( i drive a long way to and fro work).

    That example addressed everything except have content render on a default (main page) just as though it were a frame.

    Here is an example of what I mean.

    If you look at the example from the link I posted:

    Notiec that as soon as you go to that page, the default title is:

    Inverted Sliding Doors tabs followed by the content for that page.

    I believe the id for that page is main, <id="main"...
    If I click on Home or Services, for instance, how do I make content appear at the same id which is main?

    Thanks a lot again

    Author Closing Comment

    I didn't get what I was after. No need to keep this thread open

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now