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
    May 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Nav Bar - One Small Problem :)

    Someone here helped me with making sure the main bar stuck, now I'm having the very last problem and I have exhausted myself tying to fix it

    (pic included for examples)

    When the page is collapsed smaller, the hover horizontal bar goes across the page instead of directly under the main navigation bar

    Example Page Normal


    Example Page Collapsed


    CSS For Navigation Bar
    Code:
    
    .nav {
    height:35px; 
    background: url(images/bg2.gif) repeat-x; 
    /*position:absolute;
    left:235px;
    top:210px;*/
    font-family:tahoma; 
    font-size:11px; 
    width:800px; 
    z-index:100;
    margin:0 auto;
    padding:0;
    }
    
    .nav .table {
    display:table; 
    margin:0 auto;
    }
    
    .nav .select,
    .nav .current {
    margin:0; 
    padding:0; 
    list-style:none; 
    display:table-cell; 
    white-space:nowrap;
    }
    
    .nav li {
    margin:0; 
    padding:0; 
    height:auto; 
    float:left;
    }
    
    .nav .select a {
    display:block; 
    height:35px; 
    float:left; 
    font-weight:bold;
    background: url(images/bg.gif); 
    padding:0 30px 0 30px; 
    text-decoration:none; 
    line-height:35px; 
    white-space:nowrap; 
    color:#ffffff;
    }
    
    
    .nav .select a:hover, 
    .nav .select li:hover a {
    background: url(images/hover.gif); 
    padding:0 0 0 15px; 
    cursor:pointer; 
    color:#000000;
    }
    
    .nav .select a b{
    	font-weight:bold;
    	}
    
    .nav .select a:hover b, 
    .nav .select li:hover a b {
    display:block; 
    float:left; 
    padding:0 30px 0 15px; 
    background:url(images/hover.gif) right top; 
    cursor:pointer;
    }
    
    .nav .select_sub {
    display:none;
    }
    
    .nav .sub {
    display:table; 
    margin:0 auto; 
    padding:0; 
    list-style:none;
    }
    
    .nav .sub_active .current_sub a, 
    .nav .sub_active a:hover {
    background:transparent; 
    color:#112D45;
    }
    
    .nav .select :hover .select_sub, 
    .nav .current .show {
    display:block;
    width:794px; 
    position:absolute;
    left:235px;
    top:242px;
    margin:0 auto;
    background:url(images/back.gif); 
    padding:0; 
    z-index:100; 
     
    text-align:center;
    }
    
    .nav .current .show {
    z-index:100;
    }
    
    .nav .select :hover .sub li a, 
    .nav .current .show .sub li a {
    display:block; 
    float:left; 
    background:transparent; 
    padding:0 10px 0 10px; 
    margin:0; 
    white-space:nowrap; 
    border:0; 
    color:#ffffff;
    }
    
    .nav .current .sub li.sub_show a {
    color:#ffffff; 
    cursor:default; 
    }
    
    .nav .select .sub li a {
    	font-weight:normal;
    }
    
    .nav .select :hover .sub li a:hover, 
    .nav .current .sub li a:hover {
    visibility:visible; 
    color:#000000;
    }
    Any help really really appreciated!

  • #2
    New to the CF scene
    Join Date
    May 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    can anyone help me...its driving me nuts!

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Trying to be helpful.
    I have put the page here. I will try to understand what the problem is.

    This version with css in the head portion.
    You do not have a Doctype.
    I have added one. Doctypes are vital to ensure cross browser performance

    What exactly do you do to produce the problem?
    What screen resolution?
    What browser?

    Frank
    Last edited by effpeetee; 05-16-2010 at 05:44 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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