PDA

View Full Version : grrr - floating menus


ineedcheese
11-19-2010, 10:58 AM
hi all - need help with a floating menu. all set up lovely, working perfectly, starts exactly where i want it to, but.....
its continuing right to the base of the page, and therefore over the bottom banner.
any suggestions?
ta inc

dubaco
11-19-2010, 11:17 AM
Can we see it please?
Cheers

ineedcheese
11-19-2010, 11:32 AM
<style>
div.floating-menu {border:4px solid #FF9900; width:180px; z-index:100; position:fixed;}
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em;}
</style>
</p> <div class="floating-menu">
<h3 class="style4"><strong>Services Menu</strong></h3>
<ul>
<li><a href="#a">Business Address</a></li>
<li><a href="#b">Call Answering</a></li>
<li><a href="#f">Call Conferencing</a></li>
<li><a href="#c">Call Management</a></li>
<li><a href="#f">Call Marketing</a></li>
<li><a href="#c">Call Routing</a></li>
<li><a href="#g">Domain Registration</a></li>
<li><a href="#g">Email Address</a></li>
<li><a href="#e">Fax to Email</a></li>
<li><a href="#a">Postal Services</a></li>
<li><a href="#d">Phone Numbers</a></li>
<li><a href="#h">Predictive Dialing</a></li>
<li><a href="#h">Telesales Campaigns</a></li>
<li><a href="#g">Web Design &amp; Hosting</a></li>
</ul>
</div></td>

gentleone
11-19-2010, 11:44 AM
It's the position: fixed that's giving you troubles and I see also that you use tables for layout which gives you more troubles along the road.

ineedcheese
11-19-2010, 11:46 AM
It's the position: fixed that's giving you troubles and I see also that you use tables for layout which gives you more troubles along the road.

and your solution would be or is that it?

gentleone
11-19-2010, 12:04 PM
drop the position fixed and the z-index

ineedcheese
11-19-2010, 12:16 PM
drop the position fixed and the z-index

but then the menu will not float down the page surely? i simply want it to do what it is, but stop about 150px from the page bottom

gentleone
11-19-2010, 12:32 PM
but then the menu will not float down the page surely? i simply want it to do what it is, but stop about 150px from the page bottom
Positioning a fixed element is tricky to get it or to stop it where you want, especially with all the different screen resolutions out there. You will always have differences in them and also browser differences.

Anyways you can position a fixed element (just like an absolute positioned element) with top, right, bottom and left in your css and values rather in em's than in pixels.

ineedcheese
11-19-2010, 01:11 PM
ok, heres the full page, without the content which is being rewritten currently - not the position of the floating menu and what i want it to do....cheers

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>title</title>
<style type="text/css">
<!--
body {
margin-top: 0px;
}
.style1 {
font-family: Calibri;
font-weight: bold;
color: #EA8E08;
font-size: 18px;
}
.style2 {
font-family: Calibri;
font-size: 24px;
color: #434343;
font-weight: bold;
}
.style3 {
color: #434343;
font-size: 14px;
font-family: Calibri;
font-weight: normal;
}
.style4 {
color: #434343;
font-size: 14px;
font-family: Calibri;
font-weight: normal;
}
body,td,th {
font-family: Calibri;
font-size: 14px;
color: #434343;
}
a:link {
color: #E68E08;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #E68E08;
}
a:hover {
text-decoration: none;
color: #CCCCCC;
}
a:active {
text-decoration: none;
color: #E68E08;
}
a {
font-weight: bold;
}
.nav2 {
font-family: Calibri;
font-size: 14px;
font-weight: bold;
a:link {color: #CCCCCC;)
a:visited {color: #CCCCCC;)
a:hover {color: #E68E08;)
a:active {color: #CCCCCC;)
}
.style6 {color: #434343; font-size: 14px; font-family: Calibri; font-weight: bold; }
.style6 {font-weight: bold}
.style6 {font-weight: bold}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
<!-- Begin
oldvalue = "";
function passText(passedvalue) {
if (passedvalue != "") {
var totalvalue = passedvalue+"\n"+oldvalue;
document.number_enquiry.itemsbox.value = totalvalue;
oldvalue = document.number_enquiry.itemsbox.value;
}
}
// End -->
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('images/footer-bg_a_1.jpg')">
<tr>
<td width="3%" height="53">

<table width="1006" height="4250" border="0" align="center">
<!--DWLayoutTable-->
<tr>
<td height="361" colspan="2" valign="top"><img src="images/header-bg_b.jpg" width="1000" height="359" /></td>
</tr>
<tr>
<td height="19" colspan="2" bgcolor="#434343"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td width="808" rowspan="2" valign="top"><table width="99%" border="0">
<!--DWLayoutTable-->
<tr>
<td width="565" height="120" valign="top" class="style1"><p class="style2">&nbsp;</p>
<br /> </td>
<td colspan="2" align="center" valign="middle"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td rowspan="2" valign="top" class="style1"><p align="justify" class="style1">&nbsp;</p>
<br /> </td>
<td height="248" colspan="2" valign="middle" class="style1"><p align="center"><br />
</p></td>
</tr>

<tr>
<td height="57" colspan="2" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td rowspan="2" valign="top" class="style1"><p align="justify" class="style1">&nbsp;</p>
<br /> </td>
<td height="335" colspan="2" align="center" valign="middle" class="style1"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td height="67" colspan="2" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>

<tr>
<td rowspan="2" valign="top" class="style1"><p class="style1"><br />
</p>
</td>
<td height="330" colspan="2" align="center" valign="middle" class="style1"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>

<tr>
<td height="72" colspan="2" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>

<tr>
<td rowspan="2" valign="top"><p>&nbsp;</p>
<br /> </td>
<td height="266" colspan="2" align="center" valign="middle"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td height="26" colspan="2" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td rowspan="2" valign="top"><p class="style1">&nbsp;</p>
<br /></td>
<td height="167" colspan="2" align="center" valign="middle"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>

<tr>
<td height="65" colspan="2" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td rowspan="2" valign="top"><p class="style1">&nbsp;</p>
<br /></td>
<td height="233" colspan="2" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>

<tr>
<td height="50" colspan="2" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>

<tr>
<td rowspan="2" valign="top"><p class="style1">&nbsp;</p>
<br /></td>
<td height="246" colspan="2" align="center" valign="middle"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>

<tr>
<td height="75" colspan="2" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td rowspan="2" valign="top"><p>&nbsp;</p>
<br /></td>
<td height="259" colspan="2" align="center" valign="middle"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>

<tr>
<td width="221" height="54" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
<td width="3"></td>
</tr>
<tr>
<td rowspan="2" valign="top"><p>&nbsp;</p>
</p></td>
<td height="560" colspan="2" align="center" valign="middle"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>

<tr>
<td height="80" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td rowspan="2" valign="top"><p>&nbsp;</p>
<br /></td>
<td height="262" colspan="2" valign="middle"><div align="center"></div></td>
</tr>

<tr>
<td height="53" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table></td>
<td width="188" height="329" valign="default"><p>
<style>
div.floating-menu {border:4px solid #FF9900; width:180px; z-index:100; position:fixed;}
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.2em;}
</style>
</p> <div class="floating-menu">
<h3 class="style4"><strong>Services Menu</strong></h3>
<ul>
<li><a href="#a">Business Address</a></li>
<li><a href="#b">Call Answering</a></li>
<li><a href="#f">Call Conferencing</a></li>
<li><a href="#c">Call Management</a></li>
<li><a href="#f">Call Marketing</a></li>
<li><a href="#c">Call Routing</a></li>
<li><a href="#g">Domain Registration</a></li>
<li><a href="#g">Email Address</a></li>
<li><a href="#e">Fax to Email</a></li>
<li><a href="#a">Postal Services</a></li>
<li><a href="#d">Phone Numbers</a></li>
<li><a href="#h">Predictive Dialing</a></li>
<li><a href="#h">Telesales Campaigns</a></li>
<li><a href="#g">Web Design &amp; Hosting</a></li>
</ul>
</div></td>
</tr>
<tr>
<td height="3401" valign="default"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>



<tr>
<td height="93" colspan="2" valign="top"><img src="images/footer-bg_a.jpg" width="1000" height="90" border="0" usemap="#MapMap" id="Image1" /></td>
</tr>
<tr>
<td height="26" colspan="2" align="center" valign="top" bgcolor="#434343"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="71%">&nbsp;</td>
<td width="14%">&nbsp;</td>
<td width="15%">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
<map name="MapMap" id="MapMap">
<area shape="rect" coords="814,49,984,69" href="mailto:info@mivo.com (info@mivo.com)" onmouseover="MM_swapImage('Image1','','images/footer-bg_a_1.jpg',1)" onmouseout="MM_swapImgRestore()" />
</map>
</form>
<table width="100%">
<map name="Map" id="Map">
<area shape="rect" coords="814,49,984,69" href="mailto:info@mivo.com (info@mivo.com)" />
</map>
<map name="Map2" id="Map2">
<area shape="rect" coords="59,98,170,198" href="http://77.68.54.48/click2dial_Mivo.php" />
</map>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl (https://ssl/)." : "http://www (http://www/).");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7057998-6");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

Corrosive
11-19-2010, 01:19 PM
We don't mind you posting code but would you mind using code tags please? Thanks :)

gentleone
11-19-2010, 02:18 PM
ok, heres the full page, without the content which is being rewritten currently - not the position of the floating menu and what i want it to do....cheers
So? What do you expect from me or someone else to do with that code?

ineedcheese
11-19-2010, 02:39 PM
well, i simpy wanted to know where i was going wrong with this menu as i tried your suggestions previously which didnt work for me. posting the page was to give an idea of the current positioning and where i want it to stop.
but seriously, if its too much frigging hassle for you why dont you butt out. i didnt come on here to get flamed by some ******* - i dont want anyone to do anything with my code thank you very much, just wanted help with the floating menu. you, sir, can piss away off

gentleone
11-19-2010, 02:47 PM
Thanks, have a nice weekend too!

ineedcheese
11-19-2010, 03:22 PM
lol - will do cheers! you too :-)

domedia
11-19-2010, 04:13 PM
Care to share a link?
That will make this sooo much easier.