PDA

View Full Version : Positioning problem



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

Thanks

C

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

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

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

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

geezawolf
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" />
</head>
<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>
</div>
</div>

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

$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
bottom: '0px',
position: 'fixed',
halign : 'center'
}
)
}
);

Is that enough info?

Thanks

C

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

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

http://www.thedenweston.org.uk/test

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.

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

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

I found these:

http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

http://css-tricks.com/what-is-vertical-align/


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

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

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

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