Subsection List

Created 01 Oct 2013 12:43, Updated 01 Oct 2013 12:43

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