Subsection List

Created 30 Oct 2012 13:29, Updated 30 Oct 2012 13:29

The Subsections list on every note page to the right uses a very special coding in order to bring out the boxes upon hovering over the box. The code also causes the text not to run off the screen or out of the box. Overall, only one CSS class is needed to accomplish the goal, .subsection, but there is a lot of coding for the class.

The code is as follows:

.subsection{
    display:inline-block;
    height: 1.4em;
    background-color:#FFE;
    border: 1px solid #660;
    margin-right:-1px; margin-bottom:1px;
    border-right:none;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px;
    padding: 0px 3px 0px 3px;
    width: 130px;
    overflow:hidden;
}
.subsection span{    display: none; }
.subsection:hover{
    background-color:#FFF;
}
.subsection:hover span{
    position: absolute;
    display: inline;
    text-align:left;
    font-size:80%;
    margin: 15px -4px;
    height: auto;
    width: 250px;
    background: #FFF;
    border: 1px solid #660;
    color: #000;
    padding: 3px;
}
.subsection:hover span span {
    position: relative;
    margin: auto;
    height: auto;
    width: auto;
    border: none;
    padding: 0;
}

Of these, you really should not change .subsection span and .subsection:hover span span. The others you can change looks for.

.subsection by itself dictates the looks of the actual tabs. The .subsection:hover span controls the looks of the box that appears upon hovering over the tab.

Fix IE bug

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License