www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Scaling size of website for different resolutions

  1. #1
    Join Date
    Dec 2013
    Posts
    2

    resolved [RESOLVED] Scaling size of website for different resolutions

    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>

  2. #2
    Join Date
    Mar 2012
    Posts
    1,340
    Absolute positioning is a bit of a misnomer, it is fine for building responsive web sites. I use it myself. As to why it is not working in your case, I have no idea, the code you have posted is too complex to easily see what is going on...

  3. #3
    Join Date
    Mar 2011
    Posts
    1,137
    Always keep in mind that absolute positioning is performed with respect to the element's parent block-level positioned element. I didn't try to decipher your code either, but when things go wrong, it's almost certain that the containing element of the element you're trying to position has been left to it's default position property setting of 'static'. So then the browser walks up the document tree until it finds a positioned element or ends up at the top of the document and everything looks crazy.

    Set the containing block-level element(s) to "position:relative; top:0; left:0" and there's an excellent chance that the element(s) you want to set to "position:absolute" will perform as intended.
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles