Ciao a tutti, sto usando uno javascript per visualizzare delle immagini, il problema è che con la risoluzione dello schermo a 1280x800 si vede perfetto mentre con altre risoluzioni diventa troppo grande, come posso fare? Ho provato semplicemente a convertire tutte le distanze da px a % usando la proporzione tra la grandezza della tabella e dello schermo come riferimento ma non funziona

Codice PHP:
<head>  <style type="text/css"> #featured{       width:31.25%;       padding-right:31.25%;       position:relative;       border:5px solid #7DBEDF;       height:60%;       background:#fff;  }  #featured ul.ui-tabs-nav{       position:absolute;       top:0; left:400px;       list-style:none;       padding:0; margin:0;       width:250px;   }  #featured ul.ui-tabs-nav li{       padding:1px 0; padding-left:13px;        font-size:12px;       color:#666;   }  #featured ul.ui-tabs-nav li img{       float:left; margin:2px 5px;       background:#fff;       padding:2px;       border:1px solid #eee;  }  #featured ul.ui-tabs-nav li span{       font-size:11px; font-family:Verdana;       line-height:18px;   }  #featured li.ui-tabs-nav-item a{       display:block;       height:60px;       color:#333;  background:#fff;       line-height:20px;  }  #featured li.ui-tabs-nav-item a:hover{       background:#f2f2f2;   }  #featured li.ui-tabs-selected{       background:url('images/selected-item3.gif') top left no-repeat;    }  #featured ul.ui-tabs-nav li.ui-tabs-selected a{       background:#7DBEDF;   }  #featured .ui-tabs-panel{       width:400px; height:250px;       background:#999; position:relative;  }  #featured .ui-tabs-panel .info{       position:absolute;       top:180px; left:0;       height:70px;       background: url('images/transparent-bg.png');   }  #featured .info h2{       font-size:18px; font-family:Georgia, serif;       color:#fff; padding:5px; margin:0;      overflow:hidden;   }  #featured .info p{       margin:0 5px;       font-family:Verdana; font-size:11px;       line-height:15px; color:#f0f0f0;  }  #featured .info a{       text-decoration:none;       color:#fff;   }  #featured .info a:hover{       text-decoration:underline;   }  #featured .ui-tabs-hide{       display:none;   } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> <script type="text/javascript">     $(document).ready(function(){         $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 10000, true);     }); </script>      </head>  <div id="featured" >            <ul class="ui-tabs-nav">              <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1">[url="#fragment-1"][img]images/image1-small.jpg[/img]<span>15+ Excellent High Speed Photographs</span>[/url]              <li class="ui-tabs-nav-item" id="nav-fragment-2">[url="#fragment-2"][img]images/image2-small.jpg[/img]<span>20 Beautiful Long Exposure Photographs</span>[/url]              <li class="ui-tabs-nav-item" id="nav-fragment-3">[url="#fragment-3"][img]images/image3-small.jpg[/img]<span>35 Amazing Logo Designs</span>[/url]              <li class="ui-tabs-nav-item" id="nav-fragment-4">[url="#fragment-4"][img]images/image4-small.jpg[/img]<span>Create a Vintage Photograph in Photoshop</span>[/url]      [/list]                  <div id="fragment-1" class="ui-tabs-panel" style="">              [img]images/variatore.jpg[/img]               <div class="info" >                  <h2>[url="#"]15+ Excellent High Speed Photographs[/url]</h2>                  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....[url="#"]read more[/url]</p>               </div>          </div>                      <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">              [img]images/image2.jpg[/img]               <div class="info" >                  <h2>[url="#"]20 Beautiful Long Exposure Photographs[/url]</h2>                  

Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....[url="#"]read more[/url]</p>               </div>          </div>                      <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">              [img]images/image3.jpg[/img]               <div class="info" >                  <h2>[url="#"]35 Amazing Logo Designs[/url]</h2>                  

liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....[url="#"]read more[/url]</p>               </div>          </div>                      <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">              [img]images/image4.jpg[/img]               <div class="info" >                  <h2>[url="#"]Create a Vintage Photograph in Photoshop[/url]</h2>                  

Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....[url="#"]read more[/url]</p>               </div>          </div>            </div>