SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Tab menu... active and focus...

  1. Jul 13, 2006 19:24 #1
    jnbdz
    jnbdz is offline
    SitePoint Enthusiast jnbdz's Avatar
    Join Date
    Apr 2005
    Location
    Montreal
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tab menu... active and focus...

    Hello, I'm trying make this function:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>stu nicholls | CSS PLaY | a validating link calendar</title>

    <meta name="Author" content="Stu Nicholls">
    <meta name="Keywords" content="cssplay, css play, Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML1.1, w3c, doing it with style, recommendations, opacity, box model, mozilla, opera, netscape, internet explorer, v6, v7.23, techniques, layout, three column, cutting edge, experimental, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS experiments, CSS demonstrations">
    <meta name="Description" content="CSS ~ Cutting edge Cascading Style Sheets. Experiments in CSS">
    <link rel="shortcut icon" href="http://www.cssplay.co.uk/favicon.ico" type="image/x-icon">
    <link rel="icon" href="http://www.cssplay.co.uk/favicon.ico" type="image/ico">
    <style type="text/css">

    html, body {height:100%;}
    body { padding:0; margin:0;}

    #calendar {position:relative; width:100%; height:100%; margin:0;}
    #calendar h2 {position:absolute; width:240px; left:110px; top:150px; text-align:center; font-size:2em;}
    #year a {text-decoration:none; color:#000;}
    #year {padding:54px 0 0 0; margin:0; list-style-type:none; width:110px;}
    #year li {display:block; width:100px; height:17px; line-height:17px; padding-left:10px; background:#FFFFFF;}
    #year table {border-collapse:collapse; width:100%; height:100%; bottom:0;}
    #year table td {width:100px;}
    #year li table {display:none;}
    #year a.hid {background:#7092bf; outline-style:none;}
    li a.hid:active, li a.hid:focus {}
    a.hid:active span, a.hid:focus span {display:none;}
    #year a.hid:active table, #year a.hid:focus table {display:block; cursor:default; background:#7092bf;}
    #year a.hid:active table, #year a.hid:focus table {display:block; position:absolute; left:110px; top:0; background:#7092bf;}


    </style><!--[if lte IE 6]>
    <style type="text/css">
    #year {padding-top:54px;}
    #year li table {display:block;}
    #year li table tfoot td {height:44px;}
    #year li {width:110px; float:left; padding:0;}
    #year li a {display:block; width:100px; height:17px; line-height:17px; background:#fff; padding-left:10px; background:transparent;}
    #year li a:hover {display:block; height:17px; overflow:visible; background:#7092bf; padding-left:10px; color:#fff;}
    #year li a:hover table {position:absolute; top:0; left:110px; background:#7092bf;}
    #year li a:hover table a {height:100%; width:100%; text-align:center; line-height:33px; text-align:center; padding:0; border:1px solid #000; margin:-1px;}
    #year li a:hover table a:hover {background:#fff; color:#000;}

    </style>
    <![endif]--></head>

    <body>


    <div id="calendar">

    <h2>Calendar<br>2006</h2>
    <ul id="year">

    <li>

    <a class="hid" href="#nogo" onclick="this.hideFocus=true" onblur="this.hideFocus=false">

    <span>Page</span>
    <table>
    <tr><td><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p></td></tr>

    </table>

    </a>

    </li>

    <li>

    <a class="hid" href="#nogo" onclick="this.hideFocus=true" onblur="this.hideFocus=false">

    Page
    <table>
    <tr><td><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p></td></tr>

    </table>

    </a>

    </li><li> <a class="hid" href="#nogo" onclick="this.hideFocus=true" onblur="this.hideFocus=false">

    Page
    <table>
    <tr><td><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p></td></tr>

    </table>

    </a>

    </li><li> <a class="hid" href="#nogo" onclick="this.hideFocus=true" onblur="this.hideFocus=false">

    Page
    <table>
    <tr><td><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p></td></tr>

    </table>

    </a>

    </li>

    <li>
    <!--[if lte IE 6]>
    <a href="#nogo">
    <![endif]-->
    Page
    <table>
    <tbody>
    <tr><td>Hello</td></tr>

    </tbody>
    </table>
    <!--[if lte IE 6]>
    </a>
    <![endif]-->
    </li>

    <li>
    <!--[if lte IE 6]>
    <a href="#nogo">
    <![endif]-->
    Page
    <table>
    <tbody>
    <tr><td>Hello</td></tr>
    </tbody>

    </table>
    <!--[if lte IE 6]>
    </a>
    <![endif]-->
    </li>

    <li>
    <!--[if lte IE 6]>
    <a href="#nogo">
    <![endif]-->
    Page
    <table>
    <tbody>
    <tr><td>Hello</td></tr>
    </tbody>
    </table>

    <!--[if lte IE 6]>
    </a>
    <![endif]-->
    </li>

    <li>
    <!--[if lte IE 6]>
    <a href="#nogo">
    <![endif]-->
    Page
    <table>
    <tbody>
    <tr><td>Hello</td></tr>
    </tbody>
    </table>
    <!--[if lte IE 6]>
    </a>
    <![endif]-->

    </li>

    <li>
    <!--[if lte IE 6]>
    <a href="#nogo">
    <![endif]-->
    Page
    <table>
    <tbody>
    <tr><td>Hello</td></tr>
    </tbody>
    </table>
    <!--[if lte IE 6]>
    </a>
    <![endif]-->
    </li>

    <li>
    <!--[if lte IE 6]>
    <a href="#nogo">
    <![endif]-->
    Page
    <table>
    <tbody>
    <tr><td>Hello</td></tr>
    </tbody>
    </table>
    <!--[if lte IE 6]>
    </a>
    <![endif]-->
    </li>

    <li>
    <!--[if lte IE 6]>
    <a href="#nogo">
    <![endif]-->
    Page
    <table>
    <tbody>
    <tr><td>Hello</td></tr>
    </tbody>
    </table>
    <!--[if lte IE 6]>
    </a>
    <![endif]-->
    </li>

    <li>

    <!--[if lte IE 6]>
    <a href="#nogo">
    <![endif]-->
    Page
    <table>
    <tbody>
    <tr><td>Hello</td></tr>
    </tbody>
    </table>
    <!--[if lte IE 6]>
    </a>
    <![endif]-->
    </li>

    <li>
    <!--[if lte IE 6]>
    <a href="#nogo">
    <![endif]-->

    Page
    <table>
    <tbody>
    <tr><td>Hello</td></tr>
    </tbody>
    </table>
    <!--[if lte IE 6]>
    </a>
    <![endif]-->
    </li>

    </ul>
    </div>
    </body></html>

    What I'm trying to do exactly is that wen some body clicks on page the blue thing with the hello is going to show AND STAY even if we click on it ( i ave been trying to do this for a DAY and I'm a bit... )

    Thanks in advance for your help.
  2. Jul 14, 2006 08:23 #2
    jnbdz
    jnbdz is offline
    SitePoint Enthusiast jnbdz's Avatar
    Join Date
    Apr 2005
    Location
    Montreal
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is what im trying to get in css: http://code.google.com/webtoolkit/do...sink/demo.html
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules