View Full Version : Items on bottom of the accordian are being overlayed

08-27-2009, 05:32 PM
1) Script Title: Accordion Content script (v1.7)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm

3) Describe problem:

Items on bottom of the accordian are being overlayed.

I am new to this and am using a product for web site design and creation called Serif Webplus

Any help would be appreciated



Here is the html code that it generates.

<body text="#000000" style="background: #ffffff; text-align:center; height:1000px;">
<div style="background: transparent; position:relative;width:750px;height:1000px;margin-left:auto;margin-right:auto;">
<div id="txt_78" style="position:absolute; left:12px; top:80px; width:738px; height:123px;-moz-box-sizing:border-box;box-sizing:border-box; overflow:hidden;">
<P class="Normal-P"><span class="Normal-C">Through the combination of a </span></P>
<ul class="Normal-P0">
<li class="Normal-P1"><span class="Normal-C">dedicated student desktop</span></li><li class="Normal-P1"><span class="Normal-C">teaching tools that control and monitor students activities</span></li><li class="Normal-P1"><span class="Normal-C">Digital learning tools</span></li><li class="Normal-P1"><span class="Normal-C">Superior educational software suite</span></li><li class="Normal-P1"><span class="Normal-C">packaged in an all-<wbr>in-<wbr>one touch environment </span></li></ul>
<P class="Normal-P"><span class="Normal-C0">The Tech4everone Enabler provides educators with the ultimate learning environment.</span></P>
<div style="position:absolute; left:11px; top:221px; width:665px; height:243px;">
<div id="frag_2" style="text-align:left;">
<h2>Example 1:</h2>
<a href="#" onClick="ddaccordion.expandone('mypets', 0); return false">Expand 1st header</a> | <a href="#" onClick="ddaccordion.collapseone('mypets', 0); return false">Collapse 1st header</a> | <a href="#" onClick="ddaccordion.toggleone('mypets', 1); return false">Toggle 2nd header</a>

<h3 class="mypets">Dogs</h3>
<div class="thepet">
<img src="http://i10.tinypic.com/7xlrga1.jpg" />
The dog is a domestic subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been (and continues to be) one of the most widely-kept working and companion animals in human history, as well as being a food source in some cultures.

<h3 class="mypets">Cats</h3>
<div class="thepet">
The Cat, also known as the Domestic Cat or House Cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.

<h3 class="mypets">Rabbits</h3>
<div class="thepet">
Rabbits are small mammals in the family Leporidae of the order Lagomorpha, found in several parts of the world. There are seven different genera in the family classified as rabbits, including the European rabbit (Oryctolagus cuniculus), cottontail rabbit (genus Sylvilagus; 13 species), and the Amami rabbit (Pentalagus furnessi, endangered species on Amami O-shima, Japan). There are many other species of rabbit, and these, along with cottontails, pikas, and hares, make up the order Lagomorpha. Rabbits generally live between four and twenty years.

<p><a href="currentpage.htm?mypets=2">Reload page and select the 3rd content using a URL parameter</a></p>

<br />

<h2>Example 2:</h2>
<a href="#" onClick="ddaccordion.collapseall('technology'); return false">Collapse all</a> | <a href="#" onClick="ddaccordion.expandall('technology'); return false">Expand all</a>

<div class="technology">What is JavaScript?</div>
<div class="thelanguage">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.

<div class="technology">Difference betwen Java & JavaScript?</div>
<div class="thelanguage">
Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.

<div class="technology">What is Ajax?</div>
<div class="thelanguage">
Ajax is a group of inter-related web development techniques used for creating interactive web applications. A primary characteristic is the increased responsiveness and interactiveness of web pages achieved by exchanging small amounts of data with the server "behind the scenes" so that the entire web page does not have to be reloaded each time the user performs an action. This is intended to increase the web page's interactivity, speed, functionality, and usability.

<p><a href="currentpage.htm?technology=0,1,2">Reload page and select the 1st, 2nd, and 3rd contents using a URL parameter</a></p>
<div style="position:absolute; left:26px; top:877px; width:123px; height:120px;">
<img src="wpimages/wpa2a54447.png" width="123" height="120" border="0" id="art_1" name="art_1" title="" alt="a" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:3px; top:49px; width:370px; height:15px;">
<applet codebase="wpscripts" archive="SerifMarquee.jar" code="SerifMarquee.class" width="370" height="15" id="marq_1" name="marq_1">
<param name="Global" value="FPS:60;BACKGROUND:0,0,0;">
<param name="Event1" value="TYPE:TEXT;SPEED:2;TEXT:A dedicated learning environment.... Enhance learning with engaging computer interaction;FONT:Arial;SIZE:14;STYLE:BOLDITALIC;COLOUR:255,255,255;POSITION:TOP;DIRECTION:LEFTWARDS;">

08-27-2009, 10:47 PM
From the look of it the DIV immediately following the Accordion menu has its CSS position set to "absolute" right? If so, that's why the former overlays the later when expanded. You'll need to remove position:absolute.

08-27-2009, 11:49 PM
Thanks for getting back,

When I remove the position:absolute the image appears ontop of the web page.

08-28-2009, 08:24 AM
Do you have a URL to the problem page?