Changeset 84


Ignore:
Timestamp:
02/27/11 22:02:44 (13 years ago)
Author:
Kris Deugau
Message:

/trunk

Finally find a clean workspace to commit a (mostly) complete collapsible

group tree adapted from ​http://www.thecssninja.com/css/css-tree-menu.

Works in Opera, Firefox, Safari, probably works in recent Konqueror,

as coded it will provide a gracefully degraded always-open tree in IE 8
(and probably 7, but I don't have that handy). It will likely fail
horribly in IE6 as is since IE6 apparently does not support the
special <! if [IE] > tags in the <head> section. Feh.

Due to this IE limitation, I may switch to detecting the browser in the

script, and fiddling the header to include one group tree file or the other.

Location:
trunk/templates
Files:
2 added
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/templates/dns.css

    r69 r84  
    2121        border: 0px;
    2222}
     23/* Use Gecko-style list elements */
     24ul, ol, li {
     25        margin-left: 0;
     26        padding-left: 40px;
     27//border: thin solid #FF0000;
     28}
    2329fieldset {
    2430        border: none;
    … …  
    154160input {
    155161        font-size: 10px;
    156 }
    157 
    158 
    159 /*
    160   Pure CSS collapseable tree for groups
    161   Adapted (mostly trimmed down) from http://www.thecssninja.com/css/css-tree-menu
    162   Fails variously in IE
    163 */
    164 
    165 li.hassub {
    166         position: relative;
    167         margin: 0 0 0 -40px;
    168         padding: 0;
    169         list-style: none;
    170 }
    171 li.leaf {
    172         margin: 0;
    173         padding: 0 0 0 15px;    /* in px since this is to adjust for a fixed-size image */
    174 }
    175 li.hassub input {
    176         position: absolute;
    177         left: 0;
    178         margin: 0;
    179         opacity: 0;
    180         filter:alpha(opacity=0);        /* IE > 6, maybe */
    181         z-index: 2;
    182         cursor: pointer;
    183         height: 1em;
    184         width: 1em;
    185         top: 0;
    186 }
    187 li.hassub input + ul {
    188         background: url('../images/tree_closed.png') 0px -2px no-repeat;
    189         margin-top: -0.95em;    /* esplain to me, why this not 1em?  O_o */
    190         padding-top: 0.1em;
    191         padding-left: 2.25em;   /* ah-HA!  use this to adjust the indent!  watch for neg margin from li.hassub */
    192         xdisplay: block;
    193         height: 1em;
    194 }
    195 li.hassub input + ul > li {
    196         height: 0;
    197         overflow: hidden;
    198         margin-left: -14px !important;
    199 }
    200 li.hassub label {
    201         cursor: pointer;
    202         display: block;
    203         padding-left: 15px;     /* in px as it ajusts for fixed-size image */
    204 }
    205 li.hassub input:checked + ul {
    206         background: url('../images/tree_open.png') 0px 0px no-repeat;
    207         margin-top: -1.2em;
    208         padding-top: 1.1em;
    209         height: auto;
    210 }
    211 li.hassub input:checked + ul > li {
    212         height: auto;
    213162}
    214163

  • trunk/templates/header.tmpl

    r38 r84  
    44        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    55        <title>tinyDNS Administration</title>
    6         <link rel="stylesheet" type="text/css" href="templates/dns.css" />
     6        <!-- General stylesheet for most content, all browsers -->
     7        <link rel="stylesheet" type="text/css" href="templates/dns.css">
     8
     9        <!-- Load a secondary stylesheet for the group tree for IE ... -->
     10        <![if IE]>
     11        <title>css tree test page - Internet Exploder</title>
     12        <link rel="stylesheet" type="text/css" href="templates/grouptree-ie.css">
     13        <![endif]>
     14
     15        <!-- ... and now override the IE glop with the nifty CSS-only collapsing tree -->
     16        <![if !IE]>
     17        <title>css tree test page - Real Browsers(TM)</title>
     18        <link rel="stylesheet" type="text/css" href="templates/grouptree.css">
     19        <![endif]>
    720    </head>
    821<body>
Note: See TracChangeset for help on using the changeset viewer.