Konica Navigation Trials

by fezec

HTML

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<nav id="paddingVerticalCentering">
    <ul>
        <li><span>RECEPTION</span></li>
        <li><span>IT/OFFICE ADMINISTRATION</span></li>
        <li><span>CLASSROOM</span></li>
        <li><span>IN-PLANT-SHOP</span></li>
    </ul>
</nav>




<nav id="lineHeightVerticalCentering">
    <ul>
        <li><span>RECEPTION</span></li>
        <li><span>IT/OFFICE ADMINISTRATION</span></li>
        <li><span>CLASSROOM</span></li>
        <li><span>IN-PLANT-SHOP</span></li>
    </ul>
</nav>

<nav id="tableCellVerticalCentering">
    <ul>
        <li><span>RECEPTION</span></li>
        <li><span>IT/OFFICE ADMINISTRATION</span></li>
        <li><span>CLASSROOM</span></li>
        <li><span>IN-PLANT-SHOP</span></li>
    </ul>
</nav>

SCSS

body{
 font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:100%;
}

#paddingVerticalCentering{
    height:50px;
background-image:url(http://ileavebehind.com/konicaminolta/businesssolutions/img/images/room-navigation-bar.png);
    background-position:left 50px;
    padding:0 0 0 30px;


li,ul{
    float:left;
    margin:0;
    padding:0;
}

li{
    margin:0 5px; 0 0;
    height:50%;
    padding:1em 0 0 0;
    bottom:0;
    position:relative;
}
ul{
    background-image:url(http://ileavebehind.com/konicaminolta/businesssolutions/img/images/room-navigation-bar.png);
    background-position:right 0px;
    margin:0;
    padding:0 30px 0 0 ;
    height:100%;
   
}

li>span{
    top:25%;
    position:relative;
}
}




#lineHeightVerticalCentering{
    height:50px;
background-image:url(http://ileavebehind.com/konicaminolta/businesssolutions/img/images/room-navigation-bar.png);
    background-position:left 50px;
    padding:0 0 0 30px;


li,ul{
    float:left;
    margin:0;
    padding:0;
}

li{

   
    padding:0;
    margin:auto 5px; 0 0;
    position:static;
    height:100%;
}
ul{
    
    background-image:url(http://ileavebehind.com/konicaminolta/businesssolutions/img/images/room-navigation-bar.png);
    background-position:right 0px;
    margin:0;
    padding:0 30px 0 0 ;
    height:100%;
   
}

li>span{
    line-height:4em;
}
}





#tableCellVerticalCentering{
    height:50px;
background-image:url(http://ileavebehind.com/konicaminolta/businesssolutions/img/images/room-navigation-bar.png);
    background-position:left 50px;
    padding:0 0 0 30px;


li,ul{
    float:left;
    margin:0;
    padding:0;
}

li{  
    margin:0 5px; 0 0;

}
ul{    
    background-image:url(http://ileavebehind.com/konicaminolta/businesssolutions/img/images/room-navigation-bar.png);
    background-position:right 0px;
    margin:0;
    padding:0 30px 0 0 ;
    height:100%;
    display:table;
   
}

li>span{
    padding:15px 0 0;
    display: table-cell;
    vertical-align:...