View Full Version : Cannot place anything to right of Accordian script

04-25-2009, 01:54 AM
1) Script Title: Accordian
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm
3) Describe problem:
Hi. I have a startup site that I am testing at http://deon.gotdns.com/preondemo/indexdemo1.php. The page has a horizontal menu and a vertical menu (on left side). I cannot get anytihng to appear on the right hand side of the vertical menu. I've tried creating div's with "margin-left: auto; margin-right: auto;". The flash (3 electricity picture at the bottom left) is supposed to appear in the center to the right of the vertical menu. I cannot get it there.

CSS code:
body { color: #01355d; background-color:white; font-size:14px; font-family:Lucida Grande, Trebuchet MS, Verdana, Helvetica, sans-serif; }
div.header { height:137px; width:800px; margin-left: auto; margin-right: auto; }
div.content { margin-left: auto; margin-right: auto; padding: 5px; }
div.footer { clear:both; padding:0px; color:black; text-decoration: none; margin-left:0px; margin-right:0px; font-size:11px; font-family:Lucida Grande, Trebuchet MS, Verdana, Helvetica, sans-serif; text-align: center; }

a:link {color:#01355D; text-decoration:none; }
a:visited {color:#01355D; text-decoration:none; }
a:hover {color:#0f4164; text-decoration:underline; }
a:active {color:#01355D; text-decoration:none; }
img.center { margin-left:auto; margin-right:auto; }
img.left { float:left; padding:10px; }
img.right { float:right; padding:10px; }
div.imageright { float:right; margin: 10px; padding:5px; border:1px solid gray; text-align:center; }

width: 180px; /*width of accordion menu*/

.arrowlistmenu .menuheader{
font: bold 14px Arial;
color: white;
background: black url(titlebar.png) repeat-x center left;
margin-bottom: 10px;
text-transform: uppercase;
padding: 4px 0 4px 10px;
cursor: hand;
cursor: pointer;

.arrowlistmenu .openheader{
background-image: url(titlebar-active.png);

.arrowlistmenu ul{ list-style-type: none;
margin: 0; padding: 0; margin-bottom: 8px;

.arrowlistmenu ul li{
padding-bottom: 2px; }

.arrowlistmenu ul li a{ color: #A70303;
background: url(arrowbullet.png) no-repeat center left;
display: block;
padding: 2px 0;
padding-left: 19px;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;

.arrowlistmenu ul li a:visited{
color: #A70303;

.arrowlistmenu ul li a:hover{
color: #A70303;
background-color: #F3F3F3;

Web Page Code:
<!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">

<title>Preon Power, Inc. Integrating Energy for a New World.</title>
<meta name="Description" content="Preon Power, Inc. Integrating Energy for a New World through microturbine and CHP" />
<meta name="Keywords" content="Preon Power integrating energy engineering tim tawoda micro turbine microturbine DG CHP Power green energy CTA Chicago Transport Authority
Chicago Police Chicago schools methane fields Reflectasite" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="www.reflectasite.com" />
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" />

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

<div class="header">
<OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
ID=demoflash1 WIDTH=800 HEIGHT=130>
<PARAM NAME="wmode" value="transparent">
<PARAM NAME=movie VALUE="demoflash1.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=loop VALUE=false>
<EMBED src="demoflash1.swf" loop=false quality=high WIDTH=800 HEIGHT=130 wmode="transparent" TYPE="application/x-shockwave-flash"

<!-- Top Horizontal Menu-->
<div id="ddtopmenubar" class="matttabs">
<li><a href="index.php?content=finance">Finance</a></li>
<li><a href="index.php?content=service">Service</a></li>
<li><a href="index.php?content=engineering">Engineering</a></li>
<li><a href="index.php?content=pq" rel="ddsubmenu2">Power Quality Sales</a></li>
<li><a href="index.php?content=dg" rel="ddsubmenu1">Distribution Generation Sales</a></li>

<script type="text/javascript">ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar")

<!-- Top Drop Down Menu 1 HTML-->
<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="index.php?content=microturbines">Micro Turbines</a></li>
<li><a href="index.php?content=chp">CHP</a></li>

<!-- Top Drop Down Menu 2 HTML-->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="index.php?content=ups">UPS</a></li>
<li><a href="index.php?content=gensets">Gensets</a></li>
<li><a href="index.php?content=switchgear">Switchgear</a></li>
<li><a href="index.php?content=monitoring">Monitoring</a></li>
<li><a href="index.php?content=control">Control</a></li>

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

<script type="text/javascript">
headerclass: "expandable",
contentclass: "categoryitems",
revealtype: "click",
mouseoverdelay: 200,
collapseprev: true,
defaultexpanded: [0],
onemustopen: false,
animatedefault: false,
persiststate: true,
toggleclass: ["", "openheader"],
togglehtml: ["prefix", "", ""],
animatespeed: "fast",
oninit:function(headers, expandedindices){ },
onopenclose:function(header, index, state, isuseractivated){ }

<!-- Left Menu Starts Here -->
<div class="arrowlistmenu">
<h3 class="menuheader" style="cursor: default">Home</h3>
<h3 class="menuheader expandable">About Preon</h3>
<ul class="categoryitems">
<li><a href="index.php?content=strategic">Strategic Differentiator</a></li>
<li><a href="index.php?content=mission">Mission</a></li>
<li><a href="index.php?content=management">Management</a></li>
<li><a href="index.php?content=history">History</a></li>
<h3 class="menuheader expandable">Company Info</h3>
<ul class="categoryitems">
<li><a href="index.php?content=mission">Business Units</a></li>
<li><a href="index.php?content=requestinfo">Request Information</a></li>
<h3 class="menuheader expandable">Projects</h3>
<ul class="categoryitems">
<li><a href="index.php?content=chicago">Chicago Police Station</a></li>
<li><a href="index.php?content=wyoming">Wyoming Gas Fields</a></li>
<li><a href="index.php?content=savanna">Savanna Army Depot</a></li>
<li><a href="index.php?content=ravallo">Ravallo Resort</a></li>
<h3 class="menuheader expandable">News</h3>
<ul class="categoryitems">
<li><a href="index.php?content=press">Press Releases</a></li>
<li><a href="index.php?content=newsletters">Newsletters</a></li>

<div class="content">
<p> just putting text here </p>

<?php if (!isset($_REQUEST['content']))
$content = $_REQUEST['content'];
if (substr($content, 0, 4) == "http")
echo "Invalid page code\n";
} else
$nextpage = $content . ".inc";

<div class="footer">
<?php include("footer.inc");


And the content code (appears in file called "main.inc")
<h3>Providing Tommorrow's Solutions Today</h3>

<OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000"
ID=demoflash2 WIDTH=390 HEIGHT=340>
<PARAM NAME="wmode" value="transparent">
<PARAM NAME=movie VALUE="demoflash2.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=loop VALUE=true>
<EMBED src="demoflash2.swf" loop=true quality=high wmode="transparent" WIDTH=390 HEIGHT=340 TYPE="application/x-shockwave-flash"

<p>As an Energy Integrator, Preon provides the most comprehensive and highest quality product
and service offerings to critical and on-site power generation industries. The focus is with
commercially viable technologies but with segue for tomorrow’s solution – including renewable energy.

Any help will be much appreciated. Issue is in IE7 and FF.

Thank you.

04-25-2009, 04:01 AM
For what it is worth, I put the whole menu in another enclosing div. At least I get info to the right of my verticle menu but I am still unable to center my content. For now, this is tomorrow's problem.