PDA

View Full Version : Drop Down Panel Overlapping Issues in Dreamweaver


Chrisreardon
03-15-2009, 03:08 AM
I have a dropdown panel on my page and for some reason when I activate it to drop down, it moves behind other elements on my page.

Does anyone know how to help me bring it above.

Heres the testing page currently.

http://www.cccsumter.com/beta/homea.html

edbr
03-15-2009, 04:21 AM
it looks ok in ff but you must sort your page out. you have 2 doctypes and <html> tags. also it is better to put yout javasript in the <head>

Chrisreardon
03-17-2009, 02:15 AM
When I look at it in FF my top dropdown panel goes behind my menu and middle transitioning jpegs.
I'm new with html and coding, and trying to straighten all this out, but I'm just trying to make sense of it all.
Any more suggestions?
Mainly for fixing that top section?
thx

edbr
03-17-2009, 02:51 AM
i checked again in ff3 still works also in safari
lokk sort your page out as i mentioned that in itselff will create problems. you have 2 doctypes 2 instances ot <html> tag this is important
<!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=UTF-8" />
<title>Christ Community Church</title>
<script type="text/javascript">
<!--
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>
<script type="text/javascript" src="js/jquery-1.2.2.pack.js"></script>

<style type="text/css">

#dropdownpanel{ /*Outermost Panel DIV*/
position: absolute;
width: 100%;
left: 0;
top: 0;
visibility: hidden;
}

#dropdownpanel .contentdiv{ /*Div containing Ajax content*/
background: transparent url("pics/dropdownb.png") center center no-repeat;
color: none;
padding: 0px;
}

#dropdownpanel .control{ /*Div containing panel button*/
border-top: 0px solid black;
color: white;
font-weight: bold;
text-align: center;
background: transparent url("pics/dropdowna.png") center center no-repeat; /*change panel.gif to your own if desired*/
padding-bottom: 0px; /* 21px + 3px should equal height of "panel.gif" */
height: 21px; /* 21px + 3 px should equal height of "panel.gif" */
line-height: 21px; /* 21px + 3px should equal height of "panel.gif" */
}

.center p {
font-family: Verdana, Geneva, sans-serif;
}
.center p {
font-size: 9px;
}
.center p {
font-size: 10px;
}
.center p {
color: #333;
}
.center p {
color: #666;
font-family: Verdana, Geneva, sans-serif;
}
#center {
text-align: center;
}
</style>

<script type="text/javascript" src="js/jkpanel.js">

/***********************************************
* Drop Down Panel script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/

</script>
THIS PART IS A MISTAKE


<!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" lang="en" xml:lang="en">

////////////////////////////////////////////////



<link rel="stylesheet" type="text/css" href="js/ddsmoothmenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js">

/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

THE </HEAD> CLOSING TAG SHOULD BE HERE