HFT Example

by ritcheyer

HTML

<p>Markup for Header on RDC V7</p>
<nav class="header">
    <ul>
        <li><a href="#" title="">Nav 1</a></li>
        <li><a href="#" title="">Nav 2</a></li>
        <li><a href="#" title="">Nav 3</a></li>
        <li><a href="#" title="">Nav 4</a></li>
    </ul>
</nav>

<br /><br /><br />
<p>Markup for Header on Non-RDC V7</p>

<nav class="ns-header">
    <ul>
        <li><a href="#" title="">Nav 1</a></li>
        <li><a href="#" title="">Nav 2</a></li>
        <li><a href="#" title="">Nav 3</a></li>
        <li><a href="#" title="">Nav 4</a></li>
    </ul>
</nav>

CSS

/************************
 Header CSS on RDC V7 
    .combinedFile.css
*************************/
.header { overflow: hidden; padding: 5px;  float: left; background-color: rgba(0,0,255,.9); }
.header li { float: left; margin-left: 5px; padding-left: 5px; }
.header a { color: white }

.header li:first-child { margin-left: 0; padding-left: 0; }

/************************
 Header CSS on Non-RDC V7
    .combinedFile.css
*************************/

/* -- from component-specific reset file -- */
.ns-header,
.ns-header li,
.ns-header a {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: Helvetica, Arial, sans-serif;
}

.ns-header { overflow: hidden; padding: 5px;  float: left; background-color: rgba(0,0,255,.9); }
.ns-header li { float: left; margin-left: 5px; padding-left: 5px;  }
.ns-header a { color: white }

.ns-header li:first-child { margin-left: 0; padding-left: 0; }