Grow your CSS skills. Land your dream job.

Sub Nav Tabs

  • # March 21, 2013 at 7:07 pm

    Hello,

    My website is at:

    http://www.rmhcghg.org

    I’m looking for some snippets of CSS coding.
    If you look at my navigation bar in bright red, and look at the tabs with in them;

    1) Some get highlighted in a black color, some just stay red, I want them all to be black when you hover over them.

    2) The character space for all the sub tabs is limited, say I wanna spell out a program name, but the name is too long. How can I expand the character space for tabs?

    MUCH APPRECIATED TO THOSE WHO CAN HELP ME!

    Thanks again! :-)

    # March 21, 2013 at 7:21 pm

    Here is mycoding:

    /**
    * @file
    * @project 756
    * @package sftheme
    * @site app1
    */

    /*


    Typography Reset


    */
    h1 {
    font-size:2.5em;
    font-weight:normal;
    letter-spacing:-.04em;
    margin:0 0 0.5em;
    }
    h2 {
    font-size:2em;
    font-weight:normal;
    letter-spacing:-.03em;
    margin:0 0 0.75em;
    }
    h3 {
    font-size:1.75em;
    font-weight:normal;
    letter-spacing:-.02em;
    margin:0 0 1em;
    }
    h4 {
    font-size:1.5em;
    font-weight:bold;
    letter-spacing:-.02em;
    margin:0 0 1.25em;
    }
    h5 {
    font-size:1.25em;
    margin:1.67em 0;
    }
    h6 {
    font-size:1em;
    font-weight:bold;
    margin:2.05em 0;
    }
    p, form {
    margin:0 0 1.5em;
    padding:0;
    }
    blockquote {
    margin:1.5em;
    }
    sup, sub {
    line-height:0;
    }
    address {
    margin:0 0 1.5em;
    }
    pre, code {
    margin:1.5em 0;
    white-space:pre;
    }
    pre, code, tt {
    line-height:1.5;
    }
    caption {
    margin:0;
    padding:.5em;
    }
    /*


    Structure


    */
    body {
    font-family:Tahoma, Geneva, Kalimati, sans-serif;
    font-size:16px;
    color:#666666;
    margin: 0;
    background-position:top;
    background-repeat: repeat-x;
    }
    .sf_region1 {
    width: 980px;
    background-color: #ffffff;
    }
    .sf_region2 {
    display: none;
    }
    .sf_region8 {
    background-color: #FFFFFF;
    }

    .sf_region3 {
    width: 980px;
    min-height: 256px;
    height: auto !important;
    height: 256px;
    float:left;
    background-image:url(images/756_headerbg.jpg);
    background-repeat: no-repeat;
    background-color: #000000;
    }

    textarea, input[type="text"] {
    border:solid 1px #c2c1c1;
    }
    .sf_header_wrapper {
    height: auto !important;
    min-height: 227px;
    z-index: 499;
    position: relative;
    }
    .sf_outer_wrapper {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    background-position:top center;
    background-repeat:no-repeat;
    padding-top:0px;
    width: 980px;
    min-width: 980px;
    margin: 0 auto;
    }
    .sf_main_header {
    display:inline-block;
    font-size:46px;
    padding: 15px 15px 15px 15px;
    zoom:1;
    width: 950px;
    margin-bottom: 20px;
    }
    /* IE9 */
    .sf_main_wrapper {
    width: 980px;
    float: left;
    }
    .sf_region6 {
    width: 980px;
    float: left;
    }
    /*


    Navigation


    */
    .sf_navigation:after {
    border-right: 25px solid transparent;
    content: “”;
    float: right;
    height: 0;
    right: 0;
    width: 0;
    }
    .sf_navigation {
    clear: both;
    margin: 0 0 0 0;
    padding: 0 0 0 6px;
    width: 999px;

    }
    .sf_navigation h3 {
    display:none;
    }
    .sf_navigation .widget_content:after {
    content:”.”;
    display:block;
    font-size:0;
    height:0;
    clear:both;
    visibility:hidden;
    }
    .sf_navigation ul {
    list-style-type:none;
    margin:0;
    padding:0;
    width: 95%;
    }
    .sf_navigation ul:after {
    content:”.”;
    display:block;
    font-size:0;
    height:0;
    clear:both;
    visibility:hidden;
    }
    .sf_navigation ul li {
    float:left;
    white-space:nowrap;
    }
    .sf_navigation ul li a {
    display: block;
    font-style:normal;
    padding:10px;
    min-width:1%;
    width:auto !important;
    width:1%;
    text-decoration:none;
    font-size: 18px;
    margin: 0;
    font-weight: normal;
    letter-spacing: -0.02em;
    }
    /*


    Subnav


    */
    .sf_navigation .subnav {
    float: left;
    left: -999em;
    margin:0;
    padding:0;
    position: absolute;
    width: 168px;
    z-index: 9999;
    }
    .sf_navigation .subnav li {
    border:none;
    white-space: normal;
    margin: 0;
    width: 168px;
    }
    .sf_navigation .subnav li a {
    background:none;
    border:none;
    font-family:Arial, Helvetica, FreeSans, sans-serif;
    font-size:14px;
    height: auto;
    margin:0;
    padding: 7px 15px 3px;
    width: 138px;
    BORDER-TOP: 0px;
    }
    .sf_navigation ul li:hover li a {
    background:none;
    }
    #Nav1 li:hover ul, #Nav1 li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
    }
    #Nav1 iframe {
    position: absolute;
    /* account for the border */
    left: -0.25em;
    top: -0.25em;
    z-index: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=0);
    margin-left: 3px;
    }
    #Nav1 li:hover, #Nav1 li.hover {
    position: static;
    }
    /*


    Widgets


    */
    .widgetset .widget {
    margin-top: 0px;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 40px;
    }
    .widgetset .widget_header {
    margin:0 0 10px;
    padding:8px 16px;
    overflow: hidden;
    word-wrap: break-word;
    }
    .widgetset .widget_header a {
    display:block;
    font-size: 18px;
    margin:-9px -17px;
    padding: 11px;
    text-decoration:none;
    }
    .widgetset h3 {
    font-size:18px;
    line-height:1em;
    margin:0;
    }
    .widgetset h4 {
    font-size:1.2em;
    font-weight:normal;
    }
    .widgetset .widget_content {
    overflow:hidden;
    width:220px;
    }
    .widgetset ul {
    list-style:none;
    margin:0;
    padding:0;
    }
    .widgetset ol {
    list-style:none;
    margin:0;
    padding:0;
    }
    .widgetset .widget_content li {
    padding:3px 0;
    }
    .widgetset label {
    display: block;
    font-size:13px;
    margin:0;
    padding:0;
    }
    .widgetset input[type="text"] {
    padding:0;
    width:218px !important;
    }
    .widgetset .form_button {
    float:right;
    }
    .widgetset select {
    width:100% !important;
    }
    /*


    Content


    */
    .sf_content {
    min-height:250px;
    height:auto !important;
    height:250px;
    padding: 15px;
    width: 948px;
    display: block;
    float: left;
    }
    .sf_content:after {
    content:”.”;
    display:block;
    font-size:0;
    height:0;
    clear:both;
    visibility:hidden;
    }
    .sf_pagetitle {
    background-repeat: repeat;
    color: #FFFFFF;
    display: inline;
    float: left;
    font-family:Tahoma, Geneva, Kalimati, sans-serif;
    font-size: 64px;
    height: auto !important;
    letter-spacing: -0.04em;
    min-height: 64px;
    padding: 22px 22px 10px;
    float: left;
    margin-top: 30px;
    }
    .sf_pagetitle h1 {
    font-size:36px;
    }
    /*


    Footer


    */
    .sf_footer {
    clear: both;
    margin: 0 0 0 0px;
    padding: 48px 48px 15px 15px;
    position: relative;
    text-align: right;
    width: 942px;
    }
    .sf_footer:after {
    border-right: 25px solid transparent;
    content: “”;
    float: right;
    height: 0;
    position: absolute;
    right: 0;
    top: -25px;
    width: 0;
    }
    .sf_banner {
    text-align: right;
    padding: 20px;
    }
    .sf_region10 {
    margin:100px 150px;
    text-align:center;
    }

    # March 22, 2013 at 6:44 am

    I know the answer to point1

    [http://codepen.io/anon/pen/Gdzuv](http://codepen.io/anon/pen/Gdzuv “”)

    Unfortunately, I do not know how to fix point 2. I’ve used a cheap fix, but it is shabby and has flaws(check codepen). If I do not specify a width to the dropdown, the dropdown will not exceed the width of the parent li, and I am not sure how to fix that.

    # March 22, 2013 at 8:41 am

    Outstanding! Just what I needed! Thanks a million!

    # March 22, 2013 at 8:49 am

    Just a question. Can max-width be specified? So that if it goes beyond a point, the div width will stop (this might help if say, while dynamically uploading values, a certain value is too large)?

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".