PDA

Click to See Complete Forum and Search --> : Problem using percentages for height/width

buried_alive
03-06-2009, 01:40 PM
<html>

<body style="width:800px;height:800px;border:1px black solid;margin-left:6.3cm;">


<div id="container" style="text-align:center;font-family:serif;">

<div id="main-column" style="font-size:20pt;float:right;"></div>

<div id ="middle-column" style="float:right;">
<div id="left" style="float:left;"></div>
<div id="center" style="float:left;"></div>
<div id="right" style="float:left;"></div>
</div>

<div id ="bottom-column" style="float:right;">
<div id="left2" style="float:left;"></div>
<div id="center1" style="float:left;"></div>
<div id="center2" style="float:left;"></div>
<div id="right2" style="float:left;"></div>
</div>

</div>



<div id="left-column" style="font-size:10pt;text-align:center;font-family:serif;">

</div>




<script type="text/javascript">

var xmlDoc=null;
if (window.ActiveXObject)
{// code for IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{// code for Mozilla, Firefox, Opera, etc.
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}

if (xmlDoc!=null)
{
xmlDoc.async=false;
xmlDoc.load("RSS.xml");


var x=xmlDoc.getElementsByTagName("item");
var sc = new Array(x.length);
var k = new Array(x.length);
var height = new Array(x.length);
var description = new Array(x.length);
var des = new Array(x.length);
var t=0;
var p=0;
var sum1=0;
var sum2=0;
var sum3=0;
var sum4=0;



for (i=0;i<x.length;i++)
{

title = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;

description[i] = x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;

sc[i] = x[i].getElementsByTagName("score")[0].childNodes[0].nodeValue;



}

}








for(i=1;i<x.length;i++)

for(j=(x.length)-1 ; j>=i ; j--){


if(sc[j-1]>sc[j]){

t=sc[j-1];

sc[j-1]=sc[j];

sc[j]=t;


p=description[j-1];

description[j-1]=description[j];

description[j]=p;





}
}







var u=0;

for(i=0;i<x.length-1;i++){


if(sc[i]>=0.65*sc[x.length-2]&& u<3){
sum1 = sum1 + Number(sc[i]) ;
u++;
}


}









var s=0;

for(i=x.length-5;i>=0;i--){


if(sc[i]>=0.50*sc[x.length-2] && (sc[i]<0.65*sc[x.length-2] && s<4)){
sum2 = sum2 + Number(sc[i]) ;
s++;
}


}



sum4 = Number(sc[x.length-1]) + sum2 + sum1;





/* EYRESH TWN 7 EIDHSEWN POU 8A PAROUSIASTOYN STO LEFT-COLUMN */



var j=0;
var q=0;
for(i=x.length-2;i>=0;i--){

if(sc[i]>=0.40*sc[x.length-2] && (sc[i]<0.50*sc[x.length-2] && q<7) ){
k[j]=sc[i];
des[j]=description[i];
sum3 = sum3 + Number(sc[i]) ;
j++;
q++;
}


}



for( j=0; j<7; j++) {

height[j]=(800*k[j]) / sum3;


}




var widthA=0;
var widthB=0;
var widthD1=0;
var widthD2=0;
var widthD3=0;
var widthE1=0;
var widthE2=0;
var widthE3=0;
var widthE4=0;
var heightC=0;
var heightD=0;
var heightE=0;




widthA = (800*sum3)/(sum3 + sum4);
widthB = (800*sum4)/(sum3+sum4);
widthD1 = widthB*sc[x.length-2]/sum1;
widthD2 = widthB*sc[x.length-3]/sum1;
widthD3 = widthB*sc[x.length-4]/sum1;
widthE1 = widthB*sc[x.length-5]/sum2;
widthE2 = widthB*sc[x.length-6]/sum2;
widthE3 = widthB*sc[x.length-7]/sum2;
widthE4 = widthB*sc[x.length-8]/sum2;

heightC = 800*(sc[x.length-1])/sum4;
heightD = 800*sum1/sum4;
heightE = 800*sum2/sum4;


document.getElementById('left-column').innerHTML="<div style = height:"+height[0]+";width:"+widthA+";background-color:#1E90FF;'>"+des[0]+"</div><div style= height:"+height[1]+";width:"+widthA+";background-color:#6495ED;'>"+des[1]+"</div><div style= height:"+height[2]+";width:"+widthA+";background-color:#1E90FF;'>"+des[2]+"</div><div style= height:"+height[3]+";width:"+widthA+";background-color:#00BFFF;'>"+des[3]+"</div><div style= height:"+height[4]+";width:"+widthA+";background-color:#87CEFA;'>"+des[4]+"</div><div style= height:"+height[5]+";width:"+widthA+";background-color:#ADD8E6;'>"+des[5]+"</div><div style= height:"+height[6]+";width:"+widthA+";background-color:#E0FFFF;'>"+des[6]+"</div>";
document.getElementById('main-column').innerHTML="<div style = height:"+heightC+";background-color:yellow;width:"+widthB+";background-color:#F0E68C;'>"+description[x.length-1]+"</div>";
document.getElementById('left').innerHTML="<div style = height:"+heightD+";width:"+widthD1+";background-color:#8B0000;'>"+description[x.length-2]+"</div>";
document.getElementById('center').innerHTML="<div style = height:"+heightD+";width:"+widthD2+";background-color:#FF0000;'>"+description[x.length-3]+"</div>";
document.getElementById('right').innerHTML="<div style = height:"+heightD+";width:"+widthD3+";background-color:#FF6347;'>"+description[x.length-4]+"</div>";
document.getElementById('left2').innerHTML="<div style = height:"+heightE+";width:"+widthE1+";background-color:#32CD32;'>"+description[x.length-5]+"</div>";
document.getElementById('center1').innerHTML="<div style = height:"+heightE+";width:"+widthE2+";background-color:#00FF00;'>"+description[x.length-6]+"</div>";
document.getElementById('center2').innerHTML="<div style = height:"+heightE+";width:"+widthE3+";background-color:#7CFC00;'>"+description[x.length-7]+"</div>";
document.getElementById('right2').innerHTML="<div style = height:"+heightE+";width:"+widthE4+";background-color:#ADFF2F;'>"+description[x.length-8]+"</div>";

</script>

</body>
</html>



the result i get is-->http://img150.imageshack.us/my.php?image=89435236.jpg

The problem is than when i use percentages for the body and all the other divs the divs are not positioned well.
Can somebody help me?
MrLeN
03-07-2009, 10:41 AM
If you let me know what it is you are trying to do, I will show you how with proper CSS.

http://img150.imageshack.us/img150/5024/89435236.jpg

is that the image?

What is the problem?

I can answer you but I don't know what your prblem is.

Please be clear.
buried_alive
03-09-2009, 10:06 AM
yes thats the image.
I want to do the same with percenteges.for example set the body 65% width and 95% height and count the height/width of the other divs using these percentages.The problem is that i cant position the divs well when i use the percentages.I want to have the same result as in the images.