DIV tag fixed postioning not working

scott_web · 04-15-2012, 07:40 PM

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" />

<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>


<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>

<div class="menuWrapper">
<div id="menuStick"></div>
<div class="menuContents">
<div class="menuBtns"></div></div>
</div>

</div>
</div>

</body>
</html>
[ICODE]

Any help would be hugely appreciated. THANKS.

scott_web · 04-15-2012, 11:47 PM

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

aaronhockey_09 · 04-16-2012, 01:05 AM

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.

scott_web · 04-16-2012, 11:24 PM

Quote:

Originally Posted by aaronhockey_09

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.