Use DW writes catalog tree with ASP+ACCESS

Use ACCESS to found database ListBase.mdb:
Data table: ListTable
Data field: ListId   ListName   ListInfo   ParentId

Join method:

<%Dim SConn, SConnStr, SSqlSConnStr="DRIVER={Microsoft Access Driver (*.mdb)};dbq=" & Server.mappath("listBase.mdb" )Set SConn=server.createobject("adodb.connection" )SConn.open SConnStr %>

Save above code into the file: Initialize.asp

Code of this paragraph of program uses indication catalog tree below, save a file: Inc.asp

< ! - - #include File="initialize.asp "- - > <script Language=jscript> < ! - - / / this function is used show with what shut it child of menu, and switch the little picture before itsFunction ShowMenu(menuObj, isSub){If(menuObj.style.display=="None"){MenuObj.style.display="";If(isSub==1){Event.srcElement.src="images/open.gif"; } }Else{MenuObj.style.display="none";If(isSub==1){Event.srcElement.src="images/close.gif"; } } } / /- - > </script> < ! - - below the area of this paragraph of blue, it is the root that installs catalog tree, among them content is not the data inside data, the data inside the database adheres to in it below / /- - > <%Response.write("<table Width='100%' Border='0' Cellspacing='0' Cellpadding='0'> "&Chr(13) )Response.write("<tr> "&Chr(13)&"<td> "&Chr(13)&"<table Width='100%' Border='0' Cellspacing='0' Cellpad ding='0'>" )Response.write("<tr> "&Chr(13)&"<td Width='18' ><img Src='images/root.gif' Onclick='jscript:sHowMenu(subMenu0, 0)' Style='cursor:hAnd' Alt=' cannot revise '></td> "&Chr(13)&"</td> of node of root of <td Width='100' Class='menuPro' Id='listName0'> "&Chr(13) )Response.write("<td Width='40' Class='menuFont' Align='center' Style='cursor:hAnd' Onclick=""jscript:sHowForm('add' , 0)""> adds </td> "&Chr(13) )Response.write("<td Width='40' Class='menuFont' Align='center' Onclick=''></td> "&Chr(13) )Response.write("<td> </td></tr></table></td></tr> "&Chr(13) )Response.write("<tr Id='subMenu0'> "&Chr(13)&"<td Colspan='2'> "&Chr(13) ) What ' here calls indication catalog to cultivate is recursive functionListChild(0)Respo nse.write("</td> "&Chr(13)&"</tr> "&Chr(13)&"</table> "&Chr(13) ) Code cultivates the most crucial function to show list below ' , used recursive method (a lot of elephants of such types is to use recursive will do. )Function ListChild(id)Dim SRec, SSql, SNum, STmpSet SRec=server.createobject("adodb.recordset" )SSql="select ListId, listName, listInfo, parentId From ListTable Where ParentId= "&IdSRec.open SSql, SConn, 3, 1If Not SRec.eof ThenSNum=1Response.write("<table Width='100%' Border='0' Cellspacing='0' Cellpadding='0'> "&Chr(13) )While Not SRec.eofSTmp=sConn.execute("select Count(listId) As CountSub From ListTable Where ParentId= "&SRec("listId") )If STmp("countSub")>0 ThenResponse.write("<tr> "&Chr(13) )If SNum=sRec.recordcount ThenResponse.write("<td Width='18' Valign='top'><img Src='images/angel.gif'></td> "&Chr(13) )ElseResponse.write("<td Width='18' Background='images/eline.gif' Valign='top'><img Src='images/t.gif' &g t;</td> "&Chr(13) )End IfResponse.write("<td> "&Chr(13)&"<table Width='100%' Border='0' Cellspacing='0' Cellpadding='0'> "&Chr(13) )Response.write("<tr> "&Chr(13)&"<td Width='118' Class='menuPro' Id='listName "&SRec("listId" )&"'><img Id='img "&SRec("listId" )&"' Style='cursor:hAnd' Src='images/close.gif' Align='absMiddle' Onclick='jscript:sHowMenu(subMenu "&SRec("listId" )&", 1)' Alt=' "&SRec("listInfo" )&"'> "&Server.HTMLEncode(sRec("listName") )&"</td> "&Chr(13)&"<td Width='40' Class='menuFont'><div Align='center' Style='cursor:hAnd' Onclick=""jscript:sHowForm('add' , howForm('add' ,, &SRec("listId" )&") ""> adds </div></td><td Width='40' Class='menuFont'><div Align='center' Style='cursor:hAnd' Onclick=""jscript:sHowForm('edit ' , howForm('edit' ,, &SRec("listId" )&") ""> edits </div></td> "&Chr(13) )Response.write("<td Width='40' Class='menuFont'><div Align='center' Style='cursor:hAnd' Onclick=""jscript:wIndow.location='disp.asp? Disp=del&parentId= "&SRec("listId" )&"'""> deletes </div></td> "&Chr(13)&"<td> </td> "&Chr(13)&"</tr> "&Chr(13)&"</table> "&Chr(13)&"</td> "&Chr(13)&"</tr> "&Chr(13) )Response.write("<tr Id='subMenu "&SRec("listId") &"' Style='display:nOne'>" )If SNum=sRec.recordcount ThenResponse.write("<td Width='18' Valign='top'" )Response.write("<img Src='images/angel.gif' >" )Response.write("</td> "&Chr(13) )ElseResponse.write("<td Width='1 8' Valign='top' Background='images/eline.gif'>" )Response.write("</td> "&Chr(13) )End IfResponse.write("<td> "&Chr(13) )ListChild(sRec("listid") )Response.write("</td> "&Chr(13)&"</tr> "&Chr(13) )ElseResponse.write("<tr> "&Chr(13) )If SNum=sRec.recordcount ThenResponse.write("<td Width='18' Valign='top'><img Src='images/angel.gif'></td> "&Chr(13) )ElseResponse.write("<td Width='18' Background='images/eline.gif' Valign='top'><img Src='images/t.gif' ></td> "&Chr(13) )End IfResponse.write("<td> "&Chr(13)&"<table Width='100%' Border='0' Cellspacing='0' Cellpadding='0'> "&Chr(13) )Response.write("<tr> "&Chr(13)&"<td Width='118' Class='menuPro' Id='listName "&SRec("listId" )&"'><img Id='img "&SRec("li stId" )&"' Src='images/file.gif' Align='absMiddle' Alt=' "&SRec("listInfo" )&"'> "&Server.HTMLEncode(sRec("listName") )&"</td> "&Chr(13)&"<td Width='40' Class='menuFont'><div Align='center' Style='cursor:hAnd' Onclick=""jscript:sHowForm('add' , howForm('add' ,, &SRec("listId" )&") ""> adds </div></td><td Width='40' Class='menuFont'><div Align='center' Style='cursor:hAnd' Onclick=""jscript:sHowForm('edit' , howForm('edit' ,, &SRec("listId" )&") ""> edits </div></td> "&Chr(13) )Response.write("<td Width='40' Class='menuFont'><div Align='center' Style='cursor:hAnd' Onclick=""jscript:wIndow.location='disp.asp? Disp=del&parentId= "&SRec("listId" )&"'""> deletes </div></td> "&Chr(13)&"<td> </td> "&Chr(13)&" </tr> "&Chr(13)&"</table> "&Chr(13)&"</td> "&Chr(13)&"</tr> "&Chr(13) )End IfSRec.movenextSNum=sNum+1WendResponse.write("</table> "&Chr(13) )End IfSRec.close ' closes record marketSet SRec=nothing ' closes record marketEnd FunctionSConn.close ' closes database linkSet SConn=nothing ' closes database link %>

This is to call page code below, save Index.asp

<%@LANGUAGE='VBSCRIPT' CODEPAGE='936'%> <html> <head> <meta Http-equiv='Content-Type' Content='text/html; Charset=gb2312'> <title> catalog cultivates </title> <script Language='JavaScript' Type='text/JavaScript'> < ! - -Function MM_reloadPage(init) {//reloads The Window If Nav4 ResizedIf (init==True) With (navigator) {if ((appName=='Netscape')&&(parseInt(appVersion)==4)) {Document.MM_pgW=innerWidth; Document.MM_pgH=innerHeight; Onresize=MM_reloadPage; }}Else If (innerWidth! =document.MM_pgW | | InnerHeight! =document.MM_pgH) Location.reload(); } MM_reloadPage(true); / /- - > </script> <script Language="JScript"> < ! - - / / the content with simple table of processing of this function setting / / when be being added for instance, watch sheet is empty, show why node is added child node / / when be being revised for instance, express the content that co rresponding node is inside sheet, show revising what node Function ShowForm(disp, parentId){AddNodeDiv.style.display="";Document.all.addNodeForm.disp.value=disp;Document.all.addNodeForm.parentId.value=parentId;If(disp=="Edit"){Document.all.addNodeForm.listInfo.value=eval("img"+parentId+".alt");Document.all.addNodeForm.listName.value=eval("listName"+parentId+".innerText");InfoValue.innerText=" edits ["+eval("listName"+parentId+".innerText")+"] node "; }Else{Document.all.addNodeForm.listInfo.value="";Document.all.addNodeForm.listName.value="";InfoValue.innerText=" gives node ["+eval("listName"+parentId+".innerText")+"] is added child node "; } } < ! - - this is brown the part expresses odd code for shift, need not want. / /- - >Function MM_findObj(n, d) {//v4.01Var 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_dragLayer(objName, x, HL, HT, HW, HH, toFront, dropBack, CU, CD, CL, CR, targL, targT, tol, dropJS, et, dragJS) {//v4.01 / / Copyright 1998 Macromedia, inc. All Rights Reserved. Var I, j, ALayer, retVal, curDrag=null, curLeft, curTop, IE=document.all, NS4=document.layers;Var NS6=(! IE&&document.getElementById) , NS=(NS4 | | NS6); If (! IE &&! NS) Return False;RetVal = True; If(IE &&Event) Event.returnValue = True;If (MM_dragLayer.arguments.length>1) {CurDrag = MM_findObj(objName); If (! CurDrag) Return False;If (! Document.allLayers) {Document.allLayers = New Array();With (document) If (NS4) {For (i=0; I<layers.length; I++) AllLayers[i]=layers[i];For (i=0; I<allLayers.length; I++) If (allLayers[i].document &&AllLayers[i].document.layers)With (allLayers[i].document) For (j=0; J<layers.length; J++) AllLayers[allLayers.length]=layers[j]; } Else {If (NS6) {Var Spns = GetElementsByTagName("span"); Var All = GetElemen tsByTagName("div");For (i=0;i<spns.length;i++) If (spns[i].style&&spns[i].style.position) AllLayers[allLayers.length]=spns[i];}For (i=0;i<all.length;i++) If (all[i].style&&all[i].style.position) AllLayers[allLayers.length]=all[i]; } }CurDrag.MM_dragOk=true; CurDrag.MM_targL=targL; CurDrag.MM_targT=targT;CurDrag.MM_tol=Math.pow(tol, 2); CurDrag.MM_hLeft=hL; CurDrag.MM_hTop=hT;CurDrag.MM_hWidth=hW; CurDrag.MM_hHeight=hH; CurDrag.MM_toFront=toFront;CurDrag.MM_dropBack=dropBack; CurDrag.MM_dropJS=dropJS;CurDrag.MM_everyTime=et; CurDrag.MM_dragJS=dragJS;CurDrag.MM_oldZ = (NS4) ? CurDrag.zIndex:cUrDrag.style.zIndex;CurLeft= (NS4) ? CurDrag.left:(NS6) ? ParseInt(curDrag.style.left):cUrDrag.style.pixelLeft;If (String(curLeft)=="NaN") CurLeft=0; CurDrag.MM_startL = CurLeft;CurTop = (NS4) ? CurDrag.top:(NS6) ? ParseInt(curDrag.style.top):cUrDrag.style.pixelTop;If (String(curTop)=="NaN") CurTop=0; CurDrag.MM_startT = CurTop;CurDrag.MM_bL=(cL<0) ? Null:cUrLef t-cL; CurDrag.MM_BT=(cU<0) ? Null:cUrTop-cU;CurDrag.MM_bR=(cR<0) ? Null:cUrLeft+cR; CurDrag.MM_bB=(cD<0) ? Null:cUrTop+cD;CurDrag.MM_LEFTRIGHT=0; CurDrag.MM_UPDOWN=0; CurDrag.MM_SNAPPED=false; //use In Your JS! Document.onmousedown = MM_dragLayer; Document.onmouseup = MM_dragLayer;If (NS) Document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP); } Else {Var TheEvent = ((NS) ? ObjName.type:eVent.type);If (theEvent=='mousedown') {Var MouseX = (NS) ? ObjName.pageX: Event.clientX + Document.body.scrollLeft;Var MouseY = (NS) ? ObjName.pageY: Event.clientY + Document.body.scrollTop;Var MaxDragZ=null; Document.MM_maxZ = 0;For (i=0; I<document.allLayers.length; I++) {ALayer = Document.allLayers[i];Var ALayerZ = (NS4) ? ALayer.zIndex:pArseInt(aLayer.style.zIndex);If (aLayerZ>Document.MM_maxZ) Document.MM_maxZ = ALayerZ;Var IsVisible = (((NS4) ? ALayer.visibility:aLayer.style.visibility).indexOf('hid' )==- 1);If (aLayer.MM_dragOk! = Null &&IsVisible) With (aLa yer) {Var ParentL=0; Var ParentT=0;If (NS6) {ParentLayer = ALayer.parentNode;While (parentLayer! = Null &&ParentLayer.style.position) {ParentL += ParseInt(parentLayer.offsetLeft); ParentT += ParseInt(parentLayer.offsetTop);ParentLayer = ParentLayer.parentNode; } } Else If (IE) {ParentLayer = ALayer.parentElement;While (parentLayer! = Null &&ParentLayer.style.position) {ParentL += ParentLayer.offsetLeft; ParentT += ParentLayer.offsetTop;ParentLayer = ParentLayer.parentElement; } }Var TmpX=mouseX-(((NS4) ? PageX:((NS6) ? ParseInt(style.left):sTyle.pixelLeft)+parentL)+MM_hLeft);Var TmpY=mouseY-(((NS4) ? PageY:((NS6) ? ParseInt(style.top):sTyle.pixelTop) +parentT)+MM_hTop);If (String(tmpX)=="NaN") TmpX=0; If (String(tmpY)=="NaN") TmpY=0;Var TmpW = MM_hWidth; If (tmpW <= 0) TmpW += ((NS4) ? Clip.width:oFfsetWidth);Var TmpH = MM_hHeight; If (tmpH <= 0) TmpH += ((NS4) ? Clip.height:oFfsetHeight);If ((0 <= TmpX &&TmpX<TmpW &&0 <= Tmp Y &&TmpY<TmpH) &&(MaxDragZ==Null | | MaxDragZ <= ALayerZ)) {CurDrag = ALayer; MaxDragZ = ALayerZ; } } }If (curDrag) {Document.onmousemove = MM_dragLayer; If (NS4) Document.captureEvents(Event.MOUSEMOVE);CurLeft = (NS4) ? CurDrag.left:(NS6) ? ParseInt(curDrag.style.left):cUrDrag.style.pixelLeft;CurTop = (NS4) ? CurDrag.top:(NS6) ? ParseInt(curDrag.style.top):cUrDrag.style.pixelTop;If (String(curLeft)=="NaN") CurLeft=0; If (String(curTop)=="NaN") CurTop=0; MM_oldX = MouseX - CurLeft; MM_oldY = MouseY - CurTop;Document.MM_curDrag = CurDrag; CurDrag.MM_SNAPPED=false;If(curDrag.MM_toFront) {Eval('curDrag. '+((NS4) ? '':'Style. ')+'zIndex=document.MM_maxZ+1');If (! CurDrag.MM_dropBack) Document.MM_maxZ++; }RetVal = False; If(! NS4&& ! NS6) Event.returnValue = False; } } Else If (theEvent=='mousemove') {If (document.MM_curDrag) With (document.MM_curDrag) {Var MouseX = (NS) ? ObjName.pageX: Event.clientX + Document.body.scrollLeft;Var MouseY = (NS) ? ObjName.pageY: Event.clientY + Document.body.scrollTop;NewLeft = MouseX-MM_oldX; NewTop = MouseY-MM_oldY;If (MM_bL! =null) NewLeft = Math.max(newLeft, MM_bL);If (MM_bR! =null) NewLeft = Math.min(newLeft, MM_bR);If (MM_bT! =null) NewTop = Math.max(newTop, MM_BT);If (MM_bB! =null) NewTop = Math.min(newTop, MM_bB); MM_LEFTRIGHT = NewLeft-MM_startL; MM_UPDOWN = NewTop-MM_startT;If (NS4) {left = NewLeft; Top = NewTop;}Else If (NS6){style.left = NewLeft; Style.top = NewTop;}Else {style.pixelLeft = NewLeft; Style.pixelTop = NewTop;}If (MM_dragJS) Eval(MM_dragJS);RetVal = False; If(! NS) Event.returnValue = False; } } Else If (theEvent=='mouseup') {Document.onmousemove = Null;If (NS) Document.releaseEvents(Event.MOUSEMOVE);If (NS) Document.captureEvents(Event.MOUSEDOWN); //for Mac NSIf (document.MM_curDrag) With (document.MM_curDrag) {If (typeof MM_targL=='number' &&Typeof MM_targT=='number' && (Math.pow(MM_targL-((NS4) ? Left:(NS6) ? ParseInt(style.l eft):sTyle.pixelLeft) , 2)+ Math.pow(MM_targT-((NS4) ? Top:(NS6) ? ParseInt(style.top):sTyle.pixelTop) , 2))<=MM_tol) {If (NS4) {left = MM_targL; Top = MM_targT;}Else If (NS6) {style.left = MM_targL; Style.top = MM_targT;}Else {style.pixelLeft = MM_targL; Style.pixelTop = MM_targT;} MM_SNAPPED = True; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }If (MM_everyTime | | MM_SNAPPED) Eval(MM_dropJS);If(MM_dropBack) {if (NS4) ZIndex = MM_oldZ; Else Style.zIndex = MM_oldZ;}RetVal = False; If(! NS) Event.returnValue = False; }Document.MM_curDrag = Null; }If (NS) Document.routeEvent(objName); } Return RetVal; } / /- - > </script> <link Href='css/css.css' Rel='stylesheet' Type='text/css'> </head> <body Bgcolor="#4A8CCE" Leftmargin="0" Topmargin="0" Marginwidth="0" Marginheight="0"> <div Id="addNodeDiv" Style="position:aBsolute; Left:400; Top:300; Width:300; Height:135; Z-index:1;display:nOne;" Class="formDiv" OnMouseDown="MM_dragLayer('addNodeDiv' , '' , 1, 1, 300, 30, true, false, - 1, - 1, - 1, - 1, false, false, 0, '' , false, '') "> <form Action="disp.asp" Method="get" Name="addNodeForm" Id="addNodeForm"> <table Width="300" Border="0" Cellspacing="0" Cellpadding="3"> <tr Style="cursor:hAnd "> <td> <table Width="100%" Border="0" Cellspacing="0" Cellpadding="0"> <tr> <td><div Id="infoValue" Class="menuFont"></div></td> <td><div Align="right" > <input Name="parentId" Type="hidden" Id="parentId"> <input Name="disp" Type="hidden" Id="disp"> <img Src="images/close2.gif" Alt=" is clicked shut " Width="13" Height="13" Style="cursor:hAnd" Onclick="jscript:aDdNodeDiv.style.display='none';"></div></td> </tr> </table> </td> </tr> <tr> <td> <table Width="100%" Border="0" Cellpadding="0" Cellspacing="0"> <tr> <td Width="70" Class="menuFont "> Name of <div Align="right"> node: </div></td> <td Width="120"><input Name="listName" Type="text" Class="text1" Id="listName"></td> <td Class="menuFont">10 characterBR> ;</tr> <tr> <td Width="70 "> Node of <div Align="right" Class="menuFont"> explains: </div></td> <td><textarea Name="listInfo" Cols="19" Rows="3" Class="text1" Id="listInfo"></textarea></td> <td Class="menuFont">50 character </td> </tr> <tr> <td Colspan="2"><table Width="100%" Border="0" Cellspacing="0" Cellpadding="5"> <tr> <td Width="80"> </td> <td Width="40 "><input Name="SubmitBut" Type="submit" Class="DivBut" Id="SubmitBut" Value=" refers " Onclick="jscript:aDdNodeForm.submit();this.disabled='disabled' "> </td> <td Width="10"> </td> <td Width="40 &qu ot;><input Name="cancelBut" Type="button" Class="DivBut" Id="cancelBut" Onclick="jscript:aDdNodeDiv.style.display='none';" Value=" cancels "> </td> <td> </td> </tr> </table></td> <td> </td> </tr> </table> </td> </tr> </table> </form> </div> <table Width="100%" Height="100%" Border="0" Cellpadding="0" Cellspacing="0"> <tr> <td> < ! - - it is here include a file / /- - > <div Id="Layer1" Class="treeDiv "> < ! - - #include File="inc.asp "- - > </div> </td> </tr> </table> </body> </html>

The code that submits information processing page is below, save for Disp.asp

< ! - - #include File="initialize.asp "- - > <%Function Checkstr(str)Str=replace(str, "'" , "''" , 1, - 1, 1)Checkstr=strEnd Function Dim Disp, parentId, listName, listInfoDisp=request.QueryString("disp" )ParentId=request.QueryString("parentId" )Select Case DispCase "add "ListName=checkstr(left(request.QueryString("listName") , 10) )ListInfo=checkstr(left(request.QueryString("listInfo") , 50) )Blank node of If ListName="" Then ListName=" "This node of If ListInfo="" Then ListInfo=" is being added join did not fill in content "SSql="insert Into ListTable (listName, listInfo, parentId) Values(' "&ListName&"' , ' "&ListInfo&"' , "' ,, &parentId&") "Case "edit "ListName=checkstr(left(request.QueryString("listName") , 10) )ListInfo=checkstr(left(request.QueryString("listInfo") , 50) )Blank node of If ListName="" Then ListName=" "This node of If ListInfo="" Then ListInfo=" is being added join did not fill in co ntent "SSql="update ListTable Set ListName=' "&ListName&"' , listInfo=' "&ListInfo&"' Where ListId= "&ParentIdCase "del "SSql="delete From ListTable Where ListId= "&ParentId&"Or ParentId= "&ParentIdEnd SelectSConn.execute SSql, , 1Response.redirect("index.asp" ) %>

The file that above code saves is put below same catalog (here we call a list) .
List of a CSS is built below root catalog.
CSS definition is below, save Css.css file, put below CSS catalog. Note: Having 9 types do not want, I do not have cutout
.menuPro {Border-top:&Nbsp;1px Dotted #A5BBE0;Border-right:&Nbsp;1px Dotted #31548E;Border-bottom:&Nbsp;1px Dotted #31548E;Border-left:&Nbsp;1px Dotted #A5BBE0;Overflow:&Nbsp;visible;Font-family:&Nbsp;"Verdana" , "Arial" , "Helvetica" , "Sans-serif";Font-size:&Nbsp;12px;

}
.menuGro {Border-top:&Nbsp;2px Outset #31548E;Border-right:&Nbsp;2px Outset #A5BBE0;Border-bottom:&Nbsp;2px Outset #A5BBE0;Border-left:&Nbsp;2px Outset #31548E;Overflow:&Nbsp;visible;Font-family:&Nbsp;"Verdana" , "Arial" , "Helvetica" , "Sans-serif";Font-size:&Nbsp;12px;

}
.menuFont {Font-family:&Nbsp;"Verdana" , "Arial" , "Helvetica" , "Sans-serif";Font-size:&Nbsp;12px;
}
.showDiv {Display:'';
}
.hiddenDiv {Display:nOne;
}
.treeDiv {Background-color:&Nbsp;#A8D5EA;Height:&Nbsp;100%;Width:&Nbsp;100%;Border-top-width:&Nbsp;2px;Border-right-width:&Nbsp;2px;Border-bottom-width:&Nbsp;2px;Border-left-width:&Nbsp;2px;Border-top-style:&Nbsp;inset;Border-right-style:&Nbsp;inset;Border-bottom-style:&Nbsp;inset;Border-left-style:&Nbsp;inset;Border-top-color:&Nbsp;#3680C9;Border-right-color:&Nbsp;#BCD5ED;Border-bottom-color:&Nbsp;#BCD5ED;Border-left-color:&Nbsp;#3680C9;Overflow:&Nbsp;auto;Paddi ng:&Nbsp;20px;

}Body {Overflow:&Nbsp;hidden;
}
.formDiv {Font-family:&Nbsp;"Verdana" , "Arial" , "Helvetica" , "Sans-serif";Font-size:&Nbsp;12px;Font-weight:&Nbsp;normal;Background-color:&Nbsp;#7ABDDE;Height:&Nbsp;200px;Width:&Nbsp;300px;Border-top:&Nbsp;1px Outset #B9DCFF;Border-right:&Nbsp;1px Outset #004488;Border-bottom:&Nbsp;1px Outset #004488;Border-left:&Nbsp;1px Outset #B9DCFF;Overflow:&Nbsp;hidden;

}
.text1 {Width:&Nbsp;160px;
}
.DivBut {Font-family:&Nbsp;"Verdana" , "Arial" , "Helvetica" , "Sans-serif";Font-size:&Nbsp;12px;Font-weight:&Nbsp;normal;Background-color:&Nbsp;#3399CC;Height:&Nbsp;20px;Width:&Nbsp;40px;Border:&Nbsp;1px Outset;

}

An IMAGES list is built additionally below root catalog. With the small plan that will put those folder appearance.

Bale download [use pleaseWINRAR3.0Solution presses] : Little picture