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

    Unhappy DIV tag fixed postioning not working

    Hey there,

    I'm having trouble with some div tag position for a menu I'm working on. It was working correctly but then decided to not work.

    The menu is meant to sit at the bottom of the screen and then when scrolled past, sit at the top.

    Here's the reduced code.
    CSS code
    [CODE]
    body {
    margin-left:0px;
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    width:100%;
    }
    .contents{
    margin-top:2px;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
    }
    .menuHolder{
    float:left;
    }
    .menuWrapper{
    float:left;
    height:60px;
    width:100%;
    padding-top:0px;
    background-color:#000;
    text-align:center;
    margin-left: auto;
    margin-right: auto;
    bottom:0px;
    }
    .menuContents {
    background-color:#000;
    color:#FFF;
    padding-top:0px;
    left: 0px;
    height:60px;
    width:100%;
    margin-left: auto;
    margin-right: auto;
    }
    .menuBtns{
    border:none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    .menuContents.sticky {
    position: fixed;
    top: 0px;
    box-shadow:0pt 1px rgb(0, 0, 0) inset, 0pt 1px 3px rgba(34, 25, 25, 0.4);
    }
    .menuHolder {
    background-color:#000;
    }
    [ICODE]

    And the page;
    php/html
    [CODE]
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>giroygente.org</title>
    <link href="stylegiroygente.css" rel="stylesheet" type="text/css" />
    <!-- java script conetents-->
    <script type="text/javascript">

    google.load("jquery", "1");

    function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#menuStick').offset().top;
    if (window_top > div_top)
    $('.menuContents').addClass('sticky')
    else
    $('.menuContents').removeClass('sticky');
    }
    google.setOnLoadCallback(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
    });

    </script>
    </head>
    <body>
    <!-- start of contentsHollder div-->
    <!-- start of menu div-->
    <div class="contentHolder">
    <div class="logo"><a name="Giro Y Gente" href="index.php"><img name="Giro Y Gente" src="images/logo.png" width="295" height="94" alt="Giro Y Gente" /></a></div>
    <div class="menuHolder">
    <div class="colageFlash"><img src="images/backeg.jpg" width="1278" height="692" alt="Giro Y Gente" /></div>
    <!-- end of flash div -->
    <div class="menuWrapper">
    <div id="menuStick"></div>
    <div class="menuContents">
    <div class="menuBtns"></div></div>
    </div>
    <!-- end of menu div -->
    </div>
    </div>
    <!-- end of contentsHolder div -->
    </body>
    </html>
    [ICODE]

    Any help would be hugely appreciated. THANKS.

  • #2
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question update

    update on this post,

    have solved the problem, but now instead of postioning center when fixed to the top, the menu postions left. Have tried to realign the div the fixed the menu but no luck, any ideas welcome.

    http://scottalexanderrobertson.com/c...u=QuienesSomos

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    This is what i would do to try and fix the problem.
    First, i would set a width for class .menuButtons.
    So id make it something like

    .menubuttons { margin:0 auto; width:1000px; }

    Then i would float the a tags left.

    .menubuttons a { float:left; }

    Let me know if thats any help.

  • Users who have thanked aaronhockey_09 for this post:

    scott_web (04-17-2012)

  • #4
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by aaronhockey_09 View Post
    This is what i would do to try and fix the problem.
    First, i would set a width for class .menuButtons.
    So id make it something like

    .menubuttons { margin:0 auto; width:1000px; }

    Then i would float the a tags left.

    .menubuttons a { float:left; }

    Let me know if thats any help.
    Have fixed the problem, thanks for your reply though.


  •  

    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
    •