View Full Version : Positioning problem

Sep 21st, 2010, 04:10 PM
Hi there

I have a menu which sits at the bottom of my page and I've tried the following codes:

valign: 'bottom'

and when that didn't work:

position: 'absolute',
bottom: '20px'

They both work fine until you scoll down the page. Then the menu stays in the same place rather than staying at the bottom. i.e. once you start scrolling down the page, the menu ends up in the middle of the page.

Can anyone help?



Sep 21st, 2010, 04:56 PM
Sounds like you want position:fixed, rather than position:absolute.

Sep 21st, 2010, 05:30 PM
OK, tried that - same thing!! :confused:

Sep 21st, 2010, 06:10 PM
I have the same problem... help :(

Sep 21st, 2010, 06:28 PM
OK, tried that - same thing!! :confused:

Need a link to your page then, preferably, or failing that your complete html and css.

Sep 22nd, 2010, 12:46 PM
OK, I don't know if this is helpful or not, but here is the code I'm struggling with. The problem is that the menu dock itself is now staying at the bottom of the page as it should be, however the fisheye effect doesn't stay at the bottom of the screen.

css file:
/* dock2 - bottom */
#dock2 {
width: 100%;
bottom: 0px;
position: fixed;
left: 0px;
.dock-container2 {
position: fixed;
bottom: 0px;
height: 50px;
background: url(images/dock-bg.gif);
padding-left: 20px;
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #4F2700;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
font-weight: bold;
.dock-item2 span {
display: none;
padding-left: 20px;
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;

html file:
<link href="style.css" rel="stylesheet" type="text/css" />
<body bgcolor="#FFFFFF">
<!--bottom dock -->
<div class="dock" id="dock2">
<div class="dock-container2">
<a class="dock-item2" href="discover.htm"><span>discover</span><img src="images/d.png" alt="discover" /></a>
<a class="dock-item2" href="play.htm"><span>play</span><img src="images/p.png" alt="play" /></a>
<a class="dock-item2" href="watch.htm"><span>watch</span><img src="images/w.png" alt="watch" /></a>
<a class="dock-item2" href="stare.htm"><span>stare</span><img src="images/s.png" alt="stare" /></a>
<a class="dock-item2" href="laugh.htm"><span>laugh</span><img src="images/l.png" alt="laugh" /></a>
<a class="dock-item2" href="browse.htm"><span>browse</span><img src="images/b.png" alt="browse" /></a>
<a class="dock-item2" href="explore.htm"><span>explore</span><img src="images/e.png" alt="explore" /></a>
<a class="dock-item2" href="find.htm"><span>find</span><img src="images/f.png" alt="find" /></a>
<a class="dock-item2" href="find.htm"><span>home</span><img src="images/h.png" alt="home" /></a>

<!--dock menu JS options -->
<script type="text/javascript">

maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
bottom: '0px',
position: 'fixed',
halign : 'center'

Is that enough info?



Sep 22nd, 2010, 01:36 PM
Not familiar with Fisheye, but are you saying that the menu is in the right place, but the fisheye effect is triggered when the mouse is not over the menu?
If so I wonder if your Fisheye settings are conflicting with your css. For example, you have #dock2 positioned at the bottom and left, but a center setting applied to the Fisheye code.

I'd also suggest removing position:fixed from .dock-container2 - it should be sufficient on #dock2.

Tricky without seeing the page...

Sep 22nd, 2010, 05:09 PM
OK, here's a link to a test page I've uploaded. Ignore the rest of the site - it's a mess and has been updated in part in the past, hence why I'm re-doing it.


The fisheye thing works fine before scrolling down, but then once you scroll down, the trigger for the fisheye effect is in the middle of the screen. (The original position I guess).

Any clues? Thanks again for looking.

Sep 22nd, 2010, 07:07 PM
Been playing around with this to no effect, I'm afraid. Doesn't look like Fisheye sits well with position:fixed.:(

You could perhaps use javascript/jQuery to force that div to be always at the bottom of the viewport, and thus dodge the (apparent) position:fixed problem.

Sep 22nd, 2010, 07:42 PM
Isn't "valign" depreciated now? If not, I must be mistaken.

I found these:



You could perhaps use javascript/jQuery to force that div to be always at the bottom of the viewport, and thus dodge the (apparent) position:fixed problem.

I don't agree with resorting to Javascript to get layout. I believe layout should be clean and robust without complication and a given layout is either possible or it isn't. To me, it's like fixing a broken aeroplane with gaffa tape.

Dr. V

Sep 22nd, 2010, 08:45 PM
The Fisheye effect relies upon jQuery so I see no harm in using it if it helps here. I agree with you in general terms about javascript and layout.

valign is deprecated but here is used as a parameter for Fisheye, not as a styling attribute.

Sep 23rd, 2010, 10:58 AM
So is the general consensus that I don't pursue this? :(

Sep 23rd, 2010, 11:40 AM
I think I'm just saying I can't see any way of having a position fixed menu like this working with the fisheye effect. There may be others that can. Is there any support from wherever you got the fisheye plugin?