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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy CSS Help: Menu moves in relation to browser window

    I'm a beginner with CSS, and any help would be appreciated!

    I'm building a site using a Joomla template, and the main navigation menu (#navr) just won't stay in one place.

    Here's the site: http://www.mcsnewyork.com/

    And all code pertaining to the navigation, some commented out because I didn't like it but didn't want to delete it. As you can see... there's a lot.

    Code:
    #navr {background: height:30px; background-position:center; //background:url(../images/nav.jpg); width: 65%; overflow: hidden; margin-top:-30px; position:relative;  margin-bottom:-20px;}
    #navr .menu li a{list-style-type: none; float: right; display:inline; overflow: hidden;}
    #navr ul {list-style-type:none; float:right;  width:700px; /*overflow: hidden;*/ font-family: verdana, georgia, sans-serif; display:block; border-right: 4px; padding-top: 20px;}
    #navr ul li a {list-style-type: none; float: right; padding:0 5px; line-height:30px;color:#fff;font-weight:100;text-decoration:none;font-size:14px; overflow: hidden; text-shadow:1px 1px #000}
    #navr ul li.active {}
    #navr ul li.active a {color:#fff; background:url(../images/nav-a.jpg) 0 0 repeat-x}
    #navr ul li a:hover{color:#fff;text-decoration:none !important;background:url(../images/nav-a.jpg) 0 0 repeat-x}
    #navr ul li:hover ul li a {text-shadow:none;}
    #navr ul li:hover ul li { background:none;}
    
    
    /*#navr {z-index:10; position:relative;}*/
    /*#mnav .menu li a{list-style-type:none;float:right; display:inline;overflow: hidden;}
    #mnav ul {list-style-type:none; float:right; overflow: hidden; font-family: verdana, georgia, sans-serif; display:inline;}*/
    /*#navr ul li {height:30px;}*/
    
    /*#mnav ul li:hover {}*/
    
    /*#navr ul li ul {position:absolute;width:180px;left:-999em;}*/
    /*#mnav ul li:hover ul, #menu ul li.parent  ul {left:0;}*/
    /*#navr ul li ul li {padding:0;height:auto;width:180px; margin:0; border:none;}*/
    
    /*#navr ul li:hover ul li a, #mnav ul li ul li a, #mnav ul li.active ul li a{margin:0; padding:0 0 0 10px;height:30px;line-height:30px; background:#484848;border-bottom:1px solid #3a3a3a;color:#d1d1d1; font-size:11px;font-weight:normal;text-shadow:none;}*/
    /*#navr ul li ul li a:hover, #mnav ul li ul li.active a, #mnav ul li.active ul li a:hover, #mnav ul li.active ul li.active a {margin:0; padding:0 0 0 10px;height:35px;line-height:35px;background:#343434;color:#fff; font-size:11px;text-shadow:none;}*/
    /*#navr ul li ul ul, #mnav ul li:hover ul ul, #mnav ul li:hover ul ul ul, #mnav ul li:hover ul ul ul ul, #mnav ul li.sfHover ul ul, #mnav ul li.sfHover ul ul ul, #mnav ul li.sfHover ul ul ul ul {left:-999em;}*/
    /*#mnav ul.menu li a
    {
    }*/

    THANK YOU!
    Last edited by VIPStephan; 10-24-2012 at 11:55 PM. Reason: added code BB tags

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Hey, theres alot of weird coding going on.

    its floating the <a> tag in the navigation but not the individual LI's.

    What you need to do is set the width of the #navr and then center it
    #navr { width:1000px; margin:0 auto; }

    then im not sure if you want things on the left, right or centered.
    So we are just going to put it on the left.

    ul.menu { float:left; }

    That should atleast get you started, again, not 100% sure what your trying to do, and the styling is pretty messy.


  •  

    Tags for this Thread

    Posting Permissions

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