1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Using z-index to hide/display different content

Discussion in 'CSS' started by relixx, Aug 2, 2005.

  1. #1
    I was using excel today and looked at the tabs at the bottom. It got me thinking about how to do that with CSS. Is it possible to have a tab system using <div> or <span> tags? Eg, all the different layers load up but the active layer is on top, and by clicking on another tab you could switch the entire site content around, all without having to reload the page? I'm sure you can do it with javascript, I'm just wondering about CSS.
     
    relixx, Aug 2, 2005 IP
  2. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #2
    This example will only work in FF - IE can only handle a:hover, but this should give you the idea on how to approach this:

    <head>
    <style type="text/css">
    body {margin: 0; padding: 0;}
    div {margin: 10px; text-align: center;}
    div.pane {position: absolute; top: 1.5em; left: 0; width: 400px; height: 200px; border: 1px solid red; display: none;}
    div.tab {border: 1px solid blue; background-color: #EEF; width: 50px; height: 1.5em; float: left; cursor: pointer;}
    div.tab:hover {background-color: #FFE;}
    div.tab:hover div {display: block; background-color: #FFE;}
    </style>
    </head>
    <body>
    <div class="tab">tab 1<div class="pane">div 1</div></div>
    <div class="tab">tab 2<div class="pane">div 2</div></div>
    </body>

    J.D.
     
    J.D., Aug 2, 2005 IP
  3. relixx

    relixx Active Member

    Messages:
    946
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    70
    #3
    Hmmmm... Many thanks JD, this will come in handy :)
     
    relixx, Aug 4, 2005 IP