div problem - expand by content
hello
I'm am trying to make a php page, the uneasy thing for me now is to make the main div expandable by the content. I tried a lot of things but not even one worked for me.
And the next problems is that when i put a footer, the footer is not going down after the menu and content, it goes up.
The content is loaded on the page automatic through ajax, and are running two javascripts, one for ajax and one for menu.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript" src="menu_produse/jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="menu_produse/ddaccordion.js"></script>
<script type="text/javascript">
ddaccordion.init({ //top level headers initialization
headerclass: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
ddaccordion.init({ //2nd level headers initialization
headerclass: "subexpandable", //Shared CSS class name of sub headers group that are expandable
contentclass: "subcategoryitems", //Shared CSS class name of sub contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["opensubheader", "closedsubheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
<script type="text/javascript">
/***********************************************
* Dynamic Ajax Content- © 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
***********************************************/
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>
<style type="text/css">
.hide {
display: none;
}
a:link
{
text-decoration: none;
color: white;
}
a:visited
{
color: white;
text-decoration: none;
}
a:hover
{
color: black;
text-decoration: none;
}
a:active
{
color: black;
text-decoration: none;
}
body
{
background-color: rgb(170,179,255);
}
#pagina
{
width: 1000px;
height: 1000px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
#pag
{
width: 1000px;
}
#menu_produse
{
background-color: rgb(170,179,255);
position: relative;
margin-top: 250px;
width: 250px;
height: auto;
}
.arrowlistmenu{
float: left;
background-color: rgb(100,158,204);
width: 250px; /*width of accordion menu*/
border: 1px solid rgb(4,51,79);
}
#arrowlistmenuhead{
height: 50px;
color: black;
font-size: 20px;
font-family: arial;
text-align: center;
}
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
width: 230px;
font: bold 14px Arial;
color: white;
text-align: center;
background: black url(menu_produse/titlebar.png) repeat-x center left;
margin-bottom: 5px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
margin-left: 5px;
margin-right: 5px;
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .menuheader a{ /*CSS class for menu headers in general (expanding or not!)*/
color: white;
text-decoration: none;
}
.arrowlistmenu .menuheader a:visited{ /*CSS class for menu headers in general (expanding or not!)*/
color: white;
text-decoration: none;
}
.arrowlistmenu .menuheader a:hover{ /*CSS class for menu headers in general (expanding or not!)*/
color: white;
text-decoration: none;
}
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(menu_produse/titlebar-active.png);
}
.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 5px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
text-align: center;
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li .opensubheader{ /*Open state CSS for sub menu header*/
background: lightblue !important;
}
.arrowlistmenu ul li .closedsubheader{ /*Closed state CSS for sub menu header*/
background: lightgreen !important;
}
.arrowlistmenu ul li a{
color: #000000;
background-color: rgb(100,158,204);
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: normal;
font-size: 90%;
}
.arrowlistmenu ul li a:visited{
color: #404040;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: white;
background-color: rgb(100,158,204);
}
.arrowlistmenu ul li a.subexpandable:hover{ /*hover state CSS for sub menu header*/
background: lightblue;
}
TABLE.MYTABLE
{
font-family:arial;
font-size:20pt;
background-color:rgb(100,158,204);
width:742px;
border-style:solid;
border-color:rgb(4,51,79);
border-width:1px;
}
TH.MYTABLE
{
font-size:14pt;
background-color:rgb(4,51,79);
color:white;
border-style:solid;
border-width:1px;
border-color:rgb(4,51,79);
text-align:center;
}
TR.MYTABLE
{
height:23;
}
#meniu_pagina
{
width: 740px;
height: auto;
margin-right: 0px;
margin-top: 0px;
position: relative;
float: right;
}
#navigation
{
width: 740px;
background-color: rgb(4,51,79);
height: 30px;
font: bold 23px arial;
text-align: center;
}
#content_panel
{
width: 738px;
position: relative;
min-height: 400px;
margin-top: 12px;
float: right;
border: 1px solid rgb(4,51,79);
background-color: rgb(100,158,204);
}
#content
{
width: 680px;
min-height: 340px;
margin-top: 30px;
margin-right: auto;
margin-left: 30px;
margin-bottom: 30px;
}
#container
{
position: relative;
float: right;
}
#footer
{
margin-top: 50px;
width: 1000px;
height: 50px;
background-color: rgb(4,51,79);
}
</style>
</head>
<body>
<div id="pagina">
<div id="menu_produse">
<div class="arrowlistmenu">
<div id="arrowlistmenuhead">
<br />
Produsele BIG DD
<br />
</div>
<h3 title="Extinde meniu" class="menuheader expandable">Showroom</h3>
<ul class="categoryitems">
<li><a href="javascript:ajaxpage('showroom/servicii.php', 'content');">Servicii</a></li>
<li><a href="javascript:ajaxpage('showroom/vanzari.php', 'content');">Vanzari</a></li>
</ul>
<h3 title="Extinde meniu" class="menuheader expandable">Copiere</h3>
<ul class="categoryitems">
<li><a href="javascript:ajaxpage('copiere/documente.php', 'content');">Documente</a></li>
<li><a href="javascript:ajaxpage('copiere/carti.php', 'content');">Carti</a></li>
<li><a href="javascript:ajaxpage('copiere/fluturasi.php', 'content');">Fluturasi</a></li>
<li><a href="javascript:ajaxpage('copiere/brosuri.php', 'content');">Brosuri</a></li>
<li><a href="javascript:ajaxpage('copiere/pliante.php', 'content');">Pliante</a></li>
<li><a href="javascript:ajaxpage('copiere/afise.php', 'content');">Afise</a></li>
<li><a href="javascript:ajaxpage('copiere/cataloage_de_prezentare.php', 'content');">Cataloage de prezentare</a></li>
<li><a href="javascript:ajaxpage('copiere/foi_cu_antet.php', 'content');">Foi cu antet</a></li>
</ul>
<h3 title="Extinde meniu" class="menuheader expandable">Printare</h3>
<ul class="categoryitems">
<li><a href="javascript:ajaxpage('printare/documente.php', 'content');">Documente</a></li>
<li><a href="javascript:ajaxpage('printare/carti.php', 'content');">Carti</a></li>
<li><a href="javascript:ajaxpage('printare/fluturasi.php', 'content');">Fluturasi</a></li>
<li><a href="javascript:ajaxpage('printare/brosuri.php', 'content');">Brosuri</a></li>
<li><a href="javascript:ajaxpage('printare/pliante.php', 'content');">Pliante</a></li>
<li><a href="javascript:ajaxpage('printare/afise.php', 'content');">Afise</a></li>
<li><a href="javascript:ajaxpage('printare/cataloage_de_prezentare.php', 'content');">Cataloage de prezentare</a></li>
<li><a href="javascript:ajaxpage('printare/foi_cu_antet.php', 'content');">Foi cu antet</a></li>
<li><a href="javascript:ajaxpage('printare/carti_de_vizita.php', 'content');">Carti de vizita</a></li>
<li><a href="javascript:ajaxpage('printare/ecusoane.php', 'content');">Ecusoane</a></li>
<li><a href="javascript:ajaxpage('printare/legitimatii.php', 'content');">Legitimatii</a></li>
<li><a href="javascript:ajaxpage('printare/calendare.php', 'content');">Calendare</a></li>
<li><a href="javascript:ajaxpage('printare/plicuri.php', 'content');">Plicuri</a></li>
<li><a href="javascript:ajaxpage('printare/programe_de_activitati.php', 'content');">Programe de activitati</a></li>
<li><a href="javascript:ajaxpage('printare/liste_meniu.php', 'content');">Liste meniu</a></li>
<li><a href="javascript:ajaxpage('printare/diplome.php', 'content');">Diplome</a></li>
<li><a href="javascript:ajaxpage('printare/felicitari.php', 'content');">Felicitari</a></li>
<li><a href="javascript:ajaxpage('printare/invitatii.php', 'content');">Invitatii</a></li>
<li><a href="javascript:ajaxpage('printare/etichete_plastic.php', 'content');">Etichete plastic</a></li>
<li><a href="javascript:ajaxpage('printare/etichete_hartie.php', 'content');">Etichete hartie</a></li>
</ul>
<h3 title="Extinde meniu" class="menuheader expandable">Prelucrare</h3>
<ul class="categoryitems">
<li><a href="javascript:ajaxpage('prelucrare/imagini.php', 'content');">Imagini</a></li>
<li><a href="javascript:ajaxpage('prelucrare/text_documente.php', 'content');">Text si documente</a></li>
<li><a href="javascript:ajaxpage('prelucrare/productie_grafica.php', 'content');">Productie grafica</a></li>
</ul>
<h3 title="Extinde meniu" class="menuheader expandable">Transfer termic</h3>
<ul class="categoryitems">
<li><a href="javascript:ajaxpage('transfer_termic/tricouri.php', 'content');">Tricouri</a></li>
</ul>
<h3 title="Extinde meniu" class="menuheader expandable">Printuri de mari dimensiuni</h3>
<ul class="categoryitems">
<li><a href="javascript:ajaxpage('printuri/autocolant.php', 'content');">Autocolant</a></li>
<li><a href="javascript:ajaxpage('printuri/banner.php', 'content');">Banner</a></li>
<li><a href="javascript:ajaxpage('printuri/poliplan.php', 'content');">Poliplan</a></li>
<li><a href="javascript:ajaxpage('printuri/backlite.php', 'content');">Backlite</a></li>
<li><a href="javascript:ajaxpage('printuri/steag.php', 'content');">Steag</a></li>
<li><a href="javascript:ajaxpage('printuri/mesh.php', 'content');">Mesh</a></li>
<li><a href="javascript:ajaxpage('printuri/hartie_blueback.php', 'content');">Hartie blueback</a></li>
<li><a href="javascript:ajaxpage('printuri/window_graphics.php', 'content');">Window graphics</a></li>
</ul>
<h3 title="Extinde meniu" class="menuheader expandable">Litere volumetrice</h3>
<ul class="categoryitems">
<li><a href="javascript:ajaxpage('litere_volumetrice/poliplan.php', 'content');">Polistiren extrudat</a></li>
</ul>
<h3 title="Extinde meniu" class="menuheader expandable">Stampila</h3>
<ul class="categoryitems">
<li><a href="javascript:ajaxpage('stampila/dreptunghiulara.php', 'content');">Dreptunghiulara</a></li>
<li><a href="javascript:ajaxpage('stampila/dreptunghiulara_datata.php', 'content');">Dreptunghiulara datata</a></li>
<li><a href="javascript:ajaxpage('stampila/rotunda.php', 'content');">Rotunda</a></li>
<li><a href="javascript:ajaxpage('stampila/rotunda_datata.php', 'content');">Rotunda datata</a></li>
<li><a href="javascript:ajaxpage('stampila/ovala.php', 'content');">Ovala</a></li>
<li><a href="javascript:ajaxpage('stampila/portabila_rotunda.php', 'content');">Portabila rotunda</a></li>
<li><a href="javascript:ajaxpage('stampila/portabila_dreptunghiulara.php', 'content');">Portabila dreptunghiulara</a></li>
</ul>
</div>
</div>
<div id="meniu_pagina">
<TABLE CLASS="MYTABLE">
<THEAD>
<TR CLASS="MYTABLE">
<TH CLASS="MYTABLE"><a href="javascript:location.reload(true);" target="_self">Acasa</a></TH>
<TH CLASS="MYTABLE"><a href="javascript:ajaxpage('contact.php', 'content');">Contact</a></TH>
<TH CLASS="MYTABLE"><a href="javascript:ajaxpage('promotii.php', 'content');">Promotii</a></TH>
<TH CLASS="MYTABLE"><a href="javascript:ajaxpage('comanda.php', 'content');">Comanda</a></TH>
<TH CLASS="MYTABLE"><a href="javascript:ajaxpage('mod_de_plata.php', 'content');">Mod de plata</a></TH>
<TH CLASS="MYTABLE"><a href="javascript:ajaxpage('livrare.php', 'content');">Livrare</a></TH>
</TR>
</THEAD>
</TABLE>
</div>
<div id="content_panel">
<div id="content">
<FONT style="FONT-SIZE:28pt" color="#000000" face="arial"><B>BIG DD</B></FONT><FONT style="FONT-SIZE:11pt" color="#000000" face="Arial">
<BR>
<BR>
<BR>
Activitati de printare, multiplicare si prelucrare.
<BR>
<BR>
Calendare de perete, buzunar, birou, carti de vizita, pliante, brosuri, cataloage de prezentare, afise A3, inscriptionari materiale textile si ceramice, printuri de mari dimensiuni (bannere, autocolant, mesh-uri etc).
<BR>
<BR>
Distribuitor folii de laminat A4 si A3 de 80 microni, coperti de plastic transparente si carton imitatie de piele, spirale de plastic</FONT>
</div>
</div>
</div>
</body>
</html>
see it in action
If anybody knows how to help me, many thanks... 
|