Hi and sorry for bothering you guys...
I am doing website in wysiwyg editor called xara,which uses absolute positioning...I have a problem,which I need help with.I am using resolution 1920x1080..When I view my website in different resolution ,it just looks terrible... I need some solution...
Maybe some code or script,which would zoom in/zoom out the page depending on the resolution?
Or something which would scale the page across the whole browser window?,or just convert the absolute positioning website to responsive website?... I don't have any idea how I could solve that and I am desperate It's my first to do page like this.. Please,help...

Here is my source code..It includes my fail attempts,while I was trying to solve it...

I will be glad for any help!

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1250"/>
<meta name="Generator" content="Xara HTML filter v.6.0.4.417"/>
<meta name="XAR Files" content="index_htm_files/xr_files.txt"/>
<title>Xara Web Designer - A demo website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="index_htm_files/xr_main.css"/>
<link rel="stylesheet" type="text/css" href="index_htm_files/xr_text.css"/>
<link rel="stylesheet" type="text/css" href="index_htm_files/custom_styles.css"/>
<script type="text/javascript" src="index_htm_files/roe.js"></script>
head
{
background-position: 100%;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">

// ** Write a jquery routine :
<script type="text/javascript">
$( document ).ready(function() {
$("div#xr_xr").css({"height":"100%"});
$("div#xr_xr").css({"width":"100%"});
$("div#xr_xri").css({"clip":""});
$("img.xr_ap").first().css({"height":$(this).height()});
$("img.xr_ap").first().css({"width":$(this).width()});
});
</script>


// ** Each dynamic "placeholder" must have this HTML code (body)
<div id="someid" style="position:absolute; overflow:auto; width:auto; height:auto;">

// ** load some dynamic content

</div>

</head>
<body><!--[if lt IE 9]><style type="text/css">body {background:url('index_htm_files/2808.png') -768px -768px repeat;}</style><![endif]-->
<!--[if gte IE 9]><!--><script type="text/javascript">//<!--
document.write("<canvas id='xr_bcv' style='top:0; left:0; position:absolute;'></canvas>");
function xr_bcvrfr(){var o=xr_bcvrfh();o.width=xr_w;o.height=xr_h;var cx=o.getContext("2d");var gr=cx.createLinearGradient(xr_dx+0,xr_xr.offsetTop+517,xr_dx+0,xr_xr.offsetTop+0);gr.addColorStop(0, "#F1F1F1");gr.addColorStop(1,"#B1B1B1");cx.fillStyle=gr;cx.fillRect(0,0,xr_w,xr_h);};//--></script><!--<![endif]-->
<script language="JavaScript" type="text/javascript">xr_bckgx=-768;xr_bckgy=-768;</script>
<div class="xr_ap" id="xr_xr" style="width: 1920px; height: 952px; top:0px; left:50%; margin-left: -960px;">
<script type="text/javascript">var xr_xr=document.getElementById("xr_xr")</script>
<img class="xr_ap" src="index_htm_files/2809.png" alt="" title="" style="left: -5px; top: -5px; width: 1940px; height: 972px;"/>
<div class="xr_ap" id="xr_xri" style="width: 1920px; height: 952px; overflow:hidden;">
<span class="xr_ar" style="left: 0px; top: 0px; width: 1920px; height: 953px; background-color: #002F59;"></span>
<img class="xr_ap" src="index_htm_files/2811.png" alt="" title="" style="left: 0px; top: -6px; width: 1916px; height: 958px;"/>
<img class="xr_ap" src="index_htm_files/2812.png" alt="" title="" style="left: -32px; top: -27px; width: 1984px; height: 141px;"/>
<img class="xr_ap" src="index_htm_files/2814.png" alt="" title="" style="left: 871px; top: 7px; width: 241px; height: 73px;"/>
<img class="xr_ap" src="index_htm_files/2815.png" alt="" title="" style="left: 892px; top: 679px; width: 178px; height: 53px;"/>
<div style="position: absolute; left: 912px; top: 190px; width: 106px; height: 84px;">
<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-160.swf width=105,6 height=84 wmode=transparent type=application/x-shockwave-flash></embed>
</div>
<img class="xr_ap" src="index_htm_files/2817.png" alt="" title="" style="left: 578px; top: 237px; width: 739px; height: 676px;"/>
<div class="xr_ap" style="left:872px; top:99px; width:185px; height:192px;">
<object class="xr_swf" classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" width="185" height="192">
<param name="movie" value="index_htm_files/animace.swf"/><param name="wmode" value="transparent"/>
<!--[if !IE]>--><object type="application/x-shockwave-flash" data="index_htm_files/animace.swf" width="185" height="192"><param name="wmode" value="transparent" /><!--<![endif]-->
<!--[if !IE]>--></object><!--<![endif]--></object>
</div>
<span class="xr_ar" style="left: 772px; top: 330px; width: 385px; height: 0px; background-color: #FFFFFF;"></span>
<div class="Normal_text" style="position: absolute; left:794px; top:322px;font-family:Palatino Linotype, Palatino, serif;font-size:20px;color:#FFFFFF;">
<span class="xr_tc Normal_text" style="left: 124px; top: -21px; width: 107px;font-family:Palatino Linotype, Palatino, serif;font-size:20px;color:#FFFFFF;">Naše akce</span>
</div>
<a href="./publishing.htm" onclick="return(xr_nn());">
<img class="xr_ap" src="index_htm_files/2821.png" alt="" title="Naše pobočky" onmousemove="xr_mo(this,0,event)" style="left: 633px; top: 520px; width: 126px; height: 126px;"/>
</a>
<img class="xr_ap" src="index_htm_files/2822.png" alt="" title="" style="left: 744px; top: 577px; width: 64px; height: 64px;"/>
<a href="http://seznam.cz" onclick="return(xr_nn());">
<img class="xr_ap" src="index_htm_files/2823.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 1154px; top: 516px; width: 128px; height: 134px;"/>
</a>
<img class="xr_ap" src="index_htm_files/2824.png" alt="" title="" style="left: 243px; top: 7px; width: 669px; height: 609px;"/>
<img class="xr_ap" src="index_htm_files/2825.png" alt="" title="" style="left: 258px; top: 43px; width: 1570px; height: 786px;"/>
<a href="http://seznam.cz" onclick="return(xr_nn());">
<img class="xr_ap" src="index_htm_files/2826.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 859px; top: 95px; width: 211px; height: 70px;"/>
</a>
<a href="http://seznam.cz" onclick="return(xr_nn());">

<img class="xr_ap" src="index_htm_files/2846.png" alt="E-mail" title="" style="left: 1127px; top: 527px; width: 209px; height: 83px;"/>
</a>
</div>
<div style="position: absolute; left: 1331px; top: 851px; width: 133px; height: 68px;">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">

// ** Write a jquery routine :
<script type="text/javascript">
$( document ).ready(function() {
$("div#xr_xr").css({"height":"100%"});
$("div#xr_xri").css({"clip":""});
$("img.xr_ap").first().css({"height":$(this).height()});
});
</script>


// ** Each dynamic "placeholder" must have this HTML code (body)
<div id="someid" style="position:absolute; overflow:auto; width:auto; height:auto;">

// ** load some dynamic content

</div>

</div>
<span class="xr_ar" style="left: 1315px; top: 453px; width: 176px; height: 92px; background-color: #000000;"></span>
<div id="xr_xd0"></div>
</div>
</div>
<!--[if IE]><script type="text/javascript">var xr_swfs=document.getElementsByTagName("object");for(var i=0;i<xr_swfs.length;i++){if(xr_swfs[i].className=="xr_swf")xr_swfs[i].outerHTML=xr_swfs[i].outerHTML;}</script><![endif]-->
<!--[if lt IE 7]><script type="text/javascript" src="index_htm_files/png.js"></script><![endif]-->
<!--[if IE]><script type="text/javascript">xr_aeh()</script><![endif]--><!--[if !IE]>--><script type="text/javascript">window.addEventListener('load', xr_aeh, false);</script><!--<![endif]-->
<style>
body
{
overflow-x:hidden;
overflow-y:hidden;
}
</style>
<iframe scrolling="no" </iframe>
</body>
</html>