Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css menu crushed

    http://dynamicdrive.com/dynamicindex1/ddtabmenu.htm

    I'm using #4 (modified colors) and for some strange reason, the menu is crushed vertically and horizontally.

    This is my code:

    Code:
    <script type="text/javascript" src="../../scripts/tabmenu.js">
    <script type="text/javascript">
    ddtabmenu.definemenu("tabs", 2)
    </script>
    Code:
    <style type="text/css">
    <!--
    @import url('../../styles/site.css');
    @import url('../../styles/2ndlevel.css');
    @import url('../../styles/style.css');
    @import url('../../styles/tabs.css');
    @import url('../../styles/colortabs.css');
    body { behavior: url(../scripts/csshover2.htc); }
    #menuItemServices { background-image:url('../../images/navigation/on_services.gif'); }
    -->
    </style>
    The one for this ddtab menu is this:
    @import url('../../styles/colortabs.css');

    (body part)

    Code:
    <div id="tabs" class="colortabs">
      <ul>
        <li><a href="overview.php" title="Link 1">Overview</a></li>
        <li><a href="linux.php" title="Link 2">Packages</a></li>
        <li><a href="upgrades.php" title="Link 3">Add Ons</a></li>
        <li><a href="management.php" title="Link 5">Management</a></li>
        <li><a href="security.php" title="Link 6">Security</a></li>
    	<li><a href="nas.php" title="Link 7">Backups</a></li>
      </ul>
    </div>
    CSS file
    colortabs.css


    Code:
    .colortabs{
    padding: 0;
    width: 100%;
    background: transparent;
    voice-family: "\"}\"";
    voice-family: inherit;
    }
    
    .colortabs ul{
    font: normal 11px Arial, Verdana, sans-serif;
    margin:0;
    padding:0;
    list-style:none;
    }
    
    .colortabs li{
    display:inline;
    margin:0 3px 0 0;
    padding:0;
    text-transform:uppercase;
    }
    
    
    .colortabs a{
    float:left;
    color: white;
    background: #FFB400 url(../images/navigation/color_tabs_left.gif) no-repeat left top;
    margin:0 3px 0 0;
    padding:0 0 1px 3px;
    text-decoration:none;
    letter-spacing: 1px;
    }
    
    .colortabs a span{
    float:left;
    display:block;
    background: transparent url(../images/navigation/color_tabs_right.gif) no-repeat right top;
    padding: 6px 12px 5px 7px;
    }
    
    .colortabs a span{
    float:none;
    }
    
    .colortabs a:hover{
    background-color: #FF9C01;
    }
    
    .colortabs a:hover span{
    background-color: #FF9C01;
    }
    
    .colortabs a.current, #colortabs a.current span{ /*currently selected tab*/
    background-color: #FF9C01;
    }
    
    .colortabsline{
    clear: both;
    padding: 0;
    width: 100%;
    height: 8px;
    line-height: 12px;
    background: #FFB400;
    border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
    }
    
    .tabcontainer{
    clear: left;
    width:95%; /*width of 2nd level sub menus*/
    height:1.5em; /*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
    }
    
    .tabcontent{
    display:none;
    }
    The strange part is, it was working fine before until I was cleaning up *another* css file

    If your curious what the other css has...it is below
    (tabs.css) which is for the site's MAIN navigation menu (nothing to do with ddtab menu)

    Code:
    #current_specials {
    background-color:#28bbd5;
    background-image:url(../images/specials_bgd.gif);
    background-repeat:no-repeat;
    background-position:top right;
    color:#5c939d;
    }
    
    .specials_intro {
    background-color:#dbf4f8;
    padding:5px;
    color:#5c939d;
    }
    
    ul.specials_items
    {
     margin:0px;
     padding: 1px 0px 0px 0px;
    }
    
    ul.specials_items li
    {
     list-style:none;
     margin:0px;
     padding:2px;
     border-bottom: 1px solid #e5f4f6;
    }
    
    .viewbutton {
    background-image:url(../images/viewbutton_bgd.gif);
    line-height:24px;
    color:#FFFFFF;
    margin:10px 5px 10px 5px;
    }
    
    .viewbutton a:link, .viewbutton a:visited, .viewbutton a:active {
    color:#FFFFFF;
    text-decoration:none;
    }
    
    .viewbutton a:hover {
    color:#FFFFFF;
    text-decoration:underline;
    }
    
    /*--------------------------------------------------
      REQUIRED to hide the non-active tab content.
      But do not hide them in the print stylesheet!
      --------------------------------------------------*/
    .tabberlive .tabbertabhide {
     display:none;
    }
    
    /*--------------------------------------------------
      .tabber = before the tabber interface is set up
      .tabberlive = after the tabber interface is set up
      --------------------------------------------------*/
    .tabber {
    }
    .tabberlive {
     margin-top:1em;
    }
    
    /*--------------------------------------------------
      ul.tabbernav = the tab navigation list
      li.tabberactive = the active tab
      --------------------------------------------------*/
    ul.tabbernav
    {
     margin:0;
     padding: 3px 0px 0px 0px;
    }
    
    ul.tabbernav li
    {
     list-style: none;
     margin: 0;
     display: inline;
    }
    
    ul.tabbernav li a
    {
     padding: 3px 0.5em;
     margin-left: 3px;
     background-color: #18a2ba;
     text-decoration: none;
     color: white;
    }
    
    ul.tabbernav li a:link { color: white; }
    ul.tabbernav li a:visited { color: yellow; }
    
    ul.tabbernav li a:hover
    {
     color: #ffffff;
     background: #3dd6f1;
    }
    
    ul.tabbernav li.tabberactive a
    {
     background-color: #fff;
     border-bottom: 1px solid #fff;
     color:#189bb2;
    }
    
    ul.tabbernav li.tabberactive a:hover
    {
     color: #ff722b;
     background: white;
     border-bottom: 1px solid white;
    }
    
    /*--------------------------------------------------
      .tabbertab = the tab content
      Add style only after the tabber interface is set up (.tabberlive)
      --------------------------------------------------*/
    .tabberlive .tabbertab {
     padding:1px 6px 2px 6px;
     margin:3px;
     background-color:#FFFFFF;
    
     /* If you don't want the tab size changing whenever a tab is changed
        you can set a fixed height */
    
     /* height:200px; */
    
     /* If you set a fix height set overflow to auto and you will get a
        scrollbar when necessary */
    
     /* overflow:auto; */
    }
    
    /* If desired, hide the heading since a heading is provided by the tab */
    .tabberlive .tabbertab h2 {
     display:none;
    }
    .tabberlive .tabbertab h3 {
     display:none;
    }
    Attached Thumbnails Attached Thumbnails css menu crushed-1.gif  

  • #2
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I hope someone can please help me out.

  • #3
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How do I make it vertically taller (padding)? I cannot trace which padding area it is. I'm not a css pro, so please bear with me.

    Code:
    .ddcolortabs{
    padding: 0;
    width: 100%;
    background: transparent;
    voice-family: "\"}\"";
    voice-family: inherit;
    }
    
    .ddcolortabs ul{
    font: normal 11px Arial, Verdana, sans-serif;
    margin:0;
    padding:0;
    list-style:none;
    }
    
    .ddcolortabs li{
    display:inline;
    margin:0 2px 0 0;
    padding:0;
    text-transform:uppercase;
    }
    
    
    .ddcolortabs a{
    float:left;
    color: white;
    background: #34b773 url(../images/navigation/color_tabs_left.gif) no-repeat left top;
    margin:0 2px 0 0;
    padding:0 0 1px 3px;
    text-decoration:none;
    letter-spacing: 1px;
    }
    
    .ddcolortabs a span{
    float:left;
    display:block;
    background: transparent url(../images/navigation/color_tabs_right.gif) no-repeat right top;
    padding: 6px 8px 3px 7px;
    }
    
    .ddcolortabs a span{
    float:none;
    }
    
    .ddcolortabs a:hover{
    	background-color: #ee9f19;
    }
    
    .ddcolortabs a:hover span{
    background-color: #ee9f19;
    }
    
    .ddcolortabs a.current, #ddcolortabs a.current span{ /*currently selected tab*/
    background-color: #ee9f19;
    }
    
    .ddcolortabsline{
    clear: both;
    padding: 0;
    width: 100%;
    height: 8px;
    line-height: 8px;
    background: #34b773;
    border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
    }
    
    .tabcontainer{
    clear: left;
    width:95%; /*width of 2nd level sub menus*/
    height:1.5em; /*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
    }
    
    .tabcontent{
    display:none;
    }
    Also, the actual tab menu I'm using is this (provided wrong link in OP)
    http://dynamicdrive.com/dynamicindex1/ddtabmenu.htm

    Example 4

    One problem is the line below tabs is NOT showing up odd enough. I did fix the crushed tab portion (had to correct the body code) but the line still does not show up (blank) BUT it does push the rest of the body content below it all the way down, about a page view's worth. If I remove this code, it restores the body content back to where it should be, right below the tabs

    <div class="ddcolortabsline">&nbsp;</div>


    However, I really do want the line there yet not blank and not pushing the content far down leaving a big white space.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •