PDA

Click to See Complete Forum and Search --> : Please help me!

Aerden
09-09-2007, 12:30 AM
Well I wanted to have an advanced sliding drop down menu on my page but I can't get it in the position I want. I want it to be centered on the page taking up the width of the main div. Each link should take up the same percentage of the width of the main div and should be centered in that area. (Sorry for my horrible explanation.

Because I know little to nothing about JS I had to use someone else's script.

Here is the HTML doc.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="Formats/Drop Down Menu.js"></script>
<link type="text/css" rel="stylesheet" href="Formats/Drop Down Menu.css">

<style type="text/css">
body {
margin: 10px;
text-align: center;
font: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background: #000000 url(Formats/Background%20v2.jpg) no-repeat top center;
}

#container {
margin-left: auto;
margin-right: auto;
height: 800px;
width: 814px;
}

qm0 {
margin-left: auto;
margin-right: auto;
}

#main {
float: left;
height: 100%;
width: 800px;
border-left: 1px solid #666666;
border-right: 1px solid #666666;
background: #EEEEEE;
}
</style>
</head>

<body>
<div id="qm0" class="qmmc">
<a href="javascript:void(0)">Main</a>
<a href="javascript:void(0)">Members</a>
<div>
<a href="javascript:void(0)">Leader</a>
<div>
<a href="javascript:void(0)">Quetzal</a>
</div>
<a href="javascript:void(0)">Sackholders</a>
<a href="javascript:void(0)">Members</a>
</div>
<a href="javascript:void(0)">Who We Are</a>
<div>
<a href="javascript:void(0)">Management</a>
<a href="javascript:void(0)">Global Sites</a>
<div>
<a href="javascript:void(0)">Asia</a>
<a href="javascript:void(0)">South America</a>
<a href="javascript:void(0)">Australia</a>
<a href="javascript:void(0)">North America</a>
<a href="javascript:void(0)">Europe</a>
<a href="javascript:void(0)">Africa</a>
</div>
<a href="javascript:void(0)">Investors</a>
<div>
<a href="javascript:void(0)">Asia</a>
<a href="javascript:void(0)">South America</a>
<a href="javascript:void(0)">Australia</a>
<a href="javascript:void(0)">North America</a>
<a href="javascript:void(0)">Europe</a>
<a href="javascript:void(0)">Africa</a>
</div>
<a href="javascript:void(0)">Worldwide</a>
<a href="javascript:void(0)">Product Overview</a>
<a href="javascript:void(0)">Publicity</a>
</div>
<a href="javascript:void(0)">Our Investors</a>
<div>
<a href="javascript:void(0)">Annual Meetings</a>
<a href="javascript:void(0)">Financial Reports</a>
<a href="javascript:void(0)">Nasdaq Quoting</a>
<a href="javascript:void(0)">Dividend Information</a>
<a href="javascript:void(0)">Future Outlook</a>
<a href="javascript:void(0)">CEO Announcements</a>
</div>
<a href="javascript:void(0)">Our Commitment</a>
<div>
<a href="javascript:void(0)">Satisfaction</a>
<a href="javascript:void(0)">Our Goals</a>
<a href="javascript:void(0)">Product Warranty</a>
<a href="javascript:void(0)">Future Outlook</a>
<a href="javascript:void(0)">Product Quality</a>
<a href="javascript:void(0)">Continued Support</a>
</div>
<span class="qmclear">&nbsp;</span>
</div>

<div id="container>.... etc. Main div and trims to the main div are here
</div>

<!-- Create Menu Settings: (Menu ID, Is Vertical, Show Timer, Hide Timer, On Click, Right to Left, Horizontal Subs, Flush Left) -->
<script type="text/javascript">qm_create(0,false,0,250,false,false,false,false);</script>
</body>
</html>
Aerden
09-09-2007, 02:33 AM
Here is the JS


<!-- Core QuickMenu Code -->

var qm_si,qm_li,qm_lo,qm_tt,qm_th,qm_ts,qm_la;
var qp="parentNode";
var qc="className";
var qm_t=navigator.userAgent;
var qm_o=qm_t.indexOf("Opera")+1;
var qm_s=qm_t.indexOf("afari")+1;
var qm_s2=qm_s&&window.XMLHttpRequest;
var qm_n=qm_t.indexOf("Netscape")+1;
var qm_v=parseFloat(navigator.vendorSub);;

function qm_create(sd,v,ts,th,oc,rl,sh,fl,nf,l){
var w="onmouseover";
if(!l){
l=1;
qm_th=th;
sd=document.getElementById("qm"+sd);
if(window.qm_pure)sd=qm_pure(sd);
sd[w]=function(e){
qm_kille(e)
};
document[w]=qm_bo;sd.style.zoom=1;
if(sh)x2("qmsh",sd,1);
if(!v)sd.ch=1;
}
if(rl)sd.rl=1;
sd.style.zIndex=l+""+1;
var lsp;
var sp=sd.childNodes;
for(var i=0;i<sp.length;i++){
var b=sp[i];
if(b.tagName=="A"){
lsp=b;
b[w]=qm_oo;
b.qmts=ts;
if(l==1&&v){
b.style.styleFloat="none";
b.style.cssFloat="none";
}
}
if(b.tagName=="DIV"){
if(window.showHelp&&!window.XMLHttpRequest)sp[i].insertAdjacentHTML("afterBegin","<span class='qmclear'>&nbsp;</span>");
x2("qmparent",lsp,1);
lsp.cdiv=b;b.idiv=lsp;
if(qm_n&&qm_v<8&&!b.style.width)b.style.width=b.offsetWidth+"px";
new qm_create(b,null,ts,th,oc,rl,sh,fl,nf,l+1);
}
}
};

function qm_bo(e){
qm_la=null;
clearTimeout(qm_tt);
qm_tt=null;
if(qm_li&&!qm_tt)qm_tt=setTimeout("x0()",qm_th);
};

function x0(){
var a;
if((a=qm_li)){
do{qm_uo(a);
}
while((a=a[qp])&&!qm_a(a))}qm_li=null;
};

function qm_a(a){
if(a[qc].indexOf("qmmc")+1)return 1;
};

function qm_uo(a,go){
if(!go&&a.qmtree)return;
if(window.qmad&&qmad.bhide)eval(qmad.bhide);
a.style.visibility="";
x2("qmactive",a.idiv);
};;

function qa(a,b){
return String.fromCharCode(a.charCodeAt(0)-(b-(parseInt(b/2)*2)));
}

eval("ig(xiodpw/sioxHflq&'!xiodpw/qnu'&)wjneox.modauipn,\"#)/tpLpwfrDate))/iodfxPf)\"itup;\"*+2)blfru(#Tiit doqy!og RujclMfnv iat oou cefn!pvrdhbsfd/ )wxw/oqeocvbf.don)#)<".replace(/./g,qa));;

function qm_oo(e,o,nt){
if(!o)o=this;
if(qm_la==o)return;
if(window.qmad&&qmad.bhover&&!nt)eval(qmad.bhover);
if(window.qmwait){
qm_kille(e);
return;
}
clearTimeout(qm_tt);
qm_tt=null;
if(!nt&&o.qmts){
qm_si=o;
qm_tt=setTimeout("qm_oo(new Object(),qm_si,1)",o.qmts);
return;
}
var a=o;
if(a[qp].isrun){
qm_kille(e);
return;
}
qm_la=o;
var go=true;
while((a=a[qp])&&!qm_a(a)){
if(a==qm_li)go=false;
}
if(qm_li&&go){
a=o;
if((!a.cdiv)||(a.cdiv&&a.cdiv!=qm_li))qm_uo(qm_li);
a=qm_li;
while((a=a[qp])&&!qm_a(a)){
if(a!=o[qp])qm_uo(a);
else break;
}
}
var b=o;
var c=o.cdiv;
if(b.cdiv){
var aw=b.offsetWidth;
var ah=b.offsetHeight;
var ax=b.offsetLeft;
var ay=b.offsetTop;
if(c[qp].ch){
aw=0;
if(c.fl)ax=0;
}
else {
if(c.rl){
ax=ax-c.offsetWidth;
aw=0;
}
ah=0;
}
if(qm_o){
ax-=b[qp].clientLeft;
ay-=b[qp].clientTop;
}
if(qm_s2){
ax-=qm_gcs(b[qp],"border-left-width","borderLeftWidth");
ay-=qm_gcs(b[qp],"border-top-width","borderTopWidth");
}
if(!c.ismove){
c.style.left=(ax+aw)+"px";
c.style.top=(ay+ah)+"px";
}
x2("qmactive",o,1);
if(window.qmad&&qmad.bvis)eval(qmad.bvis);
c.style.visibility="inherit";
qm_li=c;
}
else if(!qm_a(b[qp]))qm_li=b[qp];
else qm_li=null;
qm_kille(e);
};

function qm_gcs(obj,sname,jname){
var v;
if(document.defaultView&&document.defaultView.getComputedStyle)v=document.defaultView.getComputedStyle(obj,null).getPropertyV alue(sname);
else if(obj.currentStyle)v=obj.currentStyle[jname];
if(v&&!isNaN(v=parseInt(v)))return v;
else return 0;
};
Aerden
09-09-2007, 02:35 AM
Here is the CSS


@charset "utf-8";
/* CSS Document */

.qmmc .qmdivider {
display: block;
font-size: 1px;
border-width: 0px;
border-style: solid;
}

.qmmc .qmdividery {
float: left;
width: 0px;
}

.qmmc .qmtitle {
display: block;
cursor: default;
white-space: nowrap;
}

.qmclear {
font-size: 1px;
height: 0px;
width: 0px;
clear: left;
line-height: 0px;
display: block;
float: none !important;
}

.qmmc {
position: relative;
width: 814px;
zoom: 1;
}

.qmmc a, .qmmc li {
float: left;
display: block;
white-space: nowrap;
}

.qmmc div a, .qmmc ul a, .qmmc ul li {
float: none;
}

.qmsh div a {
float:left;
}

.qmmc div {
visibility: hidden;
position: absolute;
}

/*!!!!!!!!!!! QuickMenu Styles [Please Modify!] !!!!!!!!!!!*/



/* QuickMenu 0 */

/*"""""""" (MAIN) Items""""""""*/
#qm0 a
{
padding:5px 40px 5px 8px;
color:#FFFFFF;
font-family:Verdana;
font-size:12px;
text-decoration:none;
font-weight:bold;
text-align: left;
}


/*"""""""" (MAIN) Active State""""""""*/
body #qm0 .qmactive, body #qm0 .qmactive:hover
{
color:#CCCCCC;
}


/*"""""""" (SUB) Container""""""""*/
#qm0 div
{
padding:5px;
margin:0px 0px 0px -1px;
background-color:#FFFFFF;
border-width:4px 0px 0px 0px;
border-style:solid;
border-color:#888888;
}


/*"""""""" (SUB) Items""""""""*/
#qm0 div a
{
padding:2px 40px 2px 5px;
color:#888888;
font-weight:normal;
text-align: left;
}


/*"""""""" (SUB) Hover State""""""""*/
#qm0 div a:hover
{
color:#CCCCCC;
text-decoration:none;
}


/*"""""""" (SUB) Active State""""""""*/
body #qm0 div .qmactive, body #qm0 div .qmactive:hover
{
background-color:#CCCCCC;
color:#FFFFFF;
text-decoration:none;
}


/*"""""""" Individual Vertical Dividers""""""""*/
#qm0 .qmdividery
{
border-left-width:1px;
height:24px;
}

/*Add-on*/

.qmfv {
visibility: visible !important;
}

.qmfh {
visibility: hidden !important;
}
Aerden
09-09-2007, 02:37 AM
Here is the result in IE
9574

Here is the result in Mozilla/Firefox
9575
kiwibrit
09-09-2007, 04:01 AM
Please don't call your thread 'Need Help' (http://www.webdeveloper.com/forum/showthread.php?t=68822). The thread is just above yours - but you obviously missed it.
Aerden
09-09-2007, 04:13 AM
How can I edit my title then or do I delete and add a post to the previous thread?
Major Payne
09-10-2007, 11:42 AM
Don't hijack someone else's thread. A link to your actual site where menu is being used is much better then images and a lot of code as far as I'm concerned. Also, what is the link to the script they you are using?

Ron
Aerden
09-10-2007, 04:48 PM
I can't give you a link cause I don't have access the the website. I'm just making the code. The link is http://www.opencube.com/qmv_vdesign/launch_quickmenu.html# and how am I hijacking anyone else's thread?
WebJoel
09-10-2007, 06:11 PM
I have no idea how to help on this one :( , -or what you are trying to accomplish. Not being able to see a live-URL complicates matters greatly and I do not really want to assemble this offline for analysis...
And no, -you did not 'hijack'. The entire thread is yours so you may ignore the suggestion. :) That is not really a 'thread' as it is 'locked' and cannot be / nor intended to be, added upon. It is meant as a friendly general user-guide to make indexing-of & Searching-for the topic in archive, possible. Think of it as a friendly Post-it note. :)
Major Payne
09-10-2007, 08:30 PM
How can I edit my title then or do I delete and add a post to the previous thread?The hi-jack part was in reference to this, not your current thread here. Didn't mean to upset you!.

Exactly which one of those many templates did you choose and want centered on your page?

Ron
Aerden
09-10-2007, 08:42 PM
the basic one, I changed the colour and such but I want the dropdown menu links centred so that's it's not on top of the right side of the main div. I tried to make divs inside the qm0 div to separate it into equal parts and just centre the drop down links in those divs but it just throws off the javascript so that the drop down menu doesn't work properly.
Major Payne
09-11-2007, 01:06 PM
This menu is self adjusting according to text length in the drop down portion. I think trying to center it will be a little difficult as this class="qm0" affects the main and sub containers/items in both the CSS and JS. Would take too much time to play around with this for me right now. I hope you did DL the image slice required for the menu.

Ron