Ridimensionare tabelle adiacenti

**Mastromastello** · 25-03-2008, 14:58

Ciao a tutti,

avrei la necessità di ridimensionare le tabelle presenti in questa pagina :

http://www.matojob.com/

Nel dettaglio dovrei allargare le 3 tabelle nella colonna di sinistra e stringere le 3 tabelle nella colonna di destra in modo che la larghezza totale rimanga invariata, non essendo del campo ho fatto un pò di tentativi empirici ma mi si sballa tutto.

Potete aiutarmi ?

Grazie

riporto il codice della pagina :

codice:

<table style="width:100%;" cellpadding="5" cellspacing="5" border="0">
<tr>
<td style="vertical-align:top;">

    <table style="width:100%;" cellpadding="4" cellspacing="0">
    <tr>
    <td style="vertical-align:top;width:60%;">       
		
	<table width="100%"  border="0" cellspacing="0" cellpadding="5" class="border2" style="background:#FFFFFF;">
  <tr>
    <td>
	{if $bIsSignup}
	<table width="100%"  border="0" cellspacing="0" cellpadding="3">
  <tr>
    <td style="font-size:11pt;" class="mainmenu5">{language text="not_yet_a_member_"} &raquo; {language text="join_now_"}</td>
  </tr>
</table>    
         

        {/if}
	<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td>[img]design/images/magnifer.png[/img]</td>
    <td><div align="center"></div></td>
    <td><form name="frm" method="post" action="{url link='public.browse.index' mode=$sMode}" >
	<div style="padding:5px;">
	{language text="browse"}: 
	


		{language text="username"}:
		<input type="text" name="browse[user]" style="size:22;" value="" />
		<input name="act[browse_show]" type="submit" value="{language text="search_1297"}" />
	    

	</div>
	</form>
	<div style="border-top:1px solid #CCCCCC;padding:5px;">{language text="new_members"} | {language text="updated_profiles"}</div>
	</td>
  </tr>
</table></td>
  </tr>
</table>
 

   {Site::Content dir='language' file='welcome_intro'}
        

			
		     
               {Event::EventsHome}

                   

    {* END left column *}

    {* START right column *}
    <td style="vertical-align:top;width:350px;">

         <table style="width:100%;" cellspacing="0" cellpadding="0">
         <tr>
         <td style="vertical-align:top;width:100%;">

            {Account::Login url_success='public.account' url_error='public.login' url_forgotpass='public.forgotpass'}
            


            <div style="text-align:center;">
                {Ads::ShowAds place=3}
            </div>            
		

		<table style="width: 100%;" cellpadding="4" cellspacing="0" class="border2">
            <tr>
                <td>
                    <table style="width: 100%;" class="mainmenu5" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                    	<td width="7">[img]design/pic/spacer.gif[/img]</td>
                    	<td class="block_header">{language text="news_announcements"}</td>
                    </tr>
                    </table>
                    <div style="padding:8px;font-size:10pt;" class="color">
                    {Site::Content dir='language' file='news'}
                    </div>
                    

                </td>
            </tr>
            </table>
			


		
             </td>
             </tr>
             </table>
         

		{Tag::List type='blog'}
      </td>
     {* END right column *}

    </tr>
    </table>
</td>
</tr>
</table>
{include file='public/_banner-foot.html'}

**Hobby** · 25-03-2008, 16:48

Originariamente inviato da Mastromastello
Ciao a tutti,

avrei la necessità di ridimensionare le tabelle presenti in questa pagina :

http://www.matojob.com/

Nel dettaglio dovrei allargare le 3 tabelle nella colonna di sinistra e stringere le 3 tabelle nella colonna di destra in modo che la larghezza totale rimanga invariata, non essendo del campo ho fatto un pò di tentativi empirici ma mi si sballa tutto.

Potete aiutarmi ?

Grazie

riporto il codice della pagina :

codice:

<table style="width:100%;" cellpadding="5" cellspacing="5" border="0">
<tr>
<td style="vertical-align:top;">

    <table style="width:100%;" cellpadding="4" cellspacing="0">
    <tr>
    <td style="vertical-align:top;width:60%;">       
		
	<table width="100%"  border="0" cellspacing="0" cellpadding="5" class="border2" style="background:#FFFFFF;">
  <tr>
    <td>
	{if $bIsSignup}
	<table width="100%"  border="0" cellspacing="0" cellpadding="3">
  <tr>
    <td style="font-size:11pt;" class="mainmenu5">{language text="not_yet_a_member_"} &raquo; {language text="join_now_"}</td>
  </tr>
</table>    
         

        {/if}
	<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td>[img]design/images/magnifer.png[/img]</td>
    <td><div align="center"></div></td>
    <td><form name="frm" method="post" action="{url link='public.browse.index' mode=$sMode}" >
	<div style="padding:5px;">
	{language text="browse"}: 
	


		{language text="username"}:
		<input type="text" name="browse[user]" style="size:22;" value="" />
		<input name="act[browse_show]" type="submit" value="{language text="search_1297"}" />
	    

	</div>
	</form>
	<div style="border-top:1px solid #CCCCCC;padding:5px;">{language text="new_members"} | {language text="updated_profiles"}</div>
	</td>
  </tr>
</table></td>
  </tr>
</table>
 

   {Site::Content dir='language' file='welcome_intro'}
        

			
		     
               {Event::EventsHome}

                   

    {* END left column *}

    {* START right column *}
    <td style="vertical-align:top;width:350px;">

         <table style="width:100%;" cellspacing="0" cellpadding="0">
         <tr>
         <td style="vertical-align:top;width:100%;">

            {Account::Login url_success='public.account' url_error='public.login' url_forgotpass='public.forgotpass'}
            


            <div style="text-align:center;">
                {Ads::ShowAds place=3}
            </div>            
		

		<table style="width: 100%;" cellpadding="4" cellspacing="0" class="border2">
            <tr>
                <td>
                    <table style="width: 100%;" class="mainmenu5" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                    	<td width="7">[img]design/pic/spacer.gif[/img]</td>
                    	<td class="block_header">{language text="news_announcements"}</td>
                    </tr>
                    </table>
                    <div style="padding:8px;font-size:10pt;" class="color">
                    {Site::Content dir='language' file='news'}
                    </div>
                    

                </td>
            </tr>
            </table>
			


		
             </td>
             </tr>
             </table>
         

		{Tag::List type='blog'}
      </td>
     {* END right column *}

    </tr>
    </table>
</td>
</tr>
</table>
{include file='public/_banner-foot.html'}

Così a naso perchè per analizzare tutto il codice di tabelle annidate mi vorrebbe troppo tempo prova a fare così:
Cambia

codice:

<td style="vertical-align:top;width:350px;">

Con

codice:

<td style="vertical-align:top;width:100%;">

e

codice:

<td style="vertical-align:top;">

con

codice:

<td style="vertical-align:top;width: 40%;">

ancora

codice:

<td style="vertical-align:top;width:60%;">

con

codice:

<td style="vertical-align:top;width:40%;">

**Mastromastello** · 25-03-2008, 20:29

Ciao Hobby,

ho apportato le modifiche che mi hai consigliato e non ho ottenuto proprio quello che volevo; in compenso mi hai fatto capire come funziona.

Ho fatto il resize di tutte le tabelle nella colonna di destra a 180px che è la larghezza che
mi serve.

L' unica tabella che rimane più grossa contiene una funzione che rimanda ad un' altra pagina html, devo riuscire a fare il resize anche di questa a 180px, ci ho provato utilizzando lo stesso metodo ma senza successo.

Ti allego il codice della pagina sperando che tu mi possa aiutare ancora una volta :

codice:

<table style="width:100%;" cellspacing="0" cellpadding="0">
<tr>
    <td style="width:2%;">
    	[img]{$sStylePath}line5.gif[/img]
    </td>
    <td style="width:98%;font-size:8pt;vertical-align:middle;" class="mainmenu3">
    	<div style="padding-left:10px;">
    	<span style="vertical-align:middle;"> {language text="members_login"} </span>
    	</div>
    </td>
</tr>
</table>

<table style="width:100%;" class="border2" cellspacing="0" cellpadding="10">
<tr>
    <td style="font-size:7pt;" class="color">

    	<div id="formhide1">
    	{include file="`$sRootPath`/_blocks/errors.html"}
    	{messages block="LoginForm"}
    	{if pluginInstalled('vbulletin')}
    	<form method="post" style="margin:0px;" action="{php}echo conf_vb_dir;{/php}/login.php?do=login">
    	<script type="text/javascript" src="{php}echo conf_vb_dir;{/php}/clientscript/vbulletin_md5.js?v=364"></script>
		<input type="hidden" name="cookieuser" value="1" id="cb_cookieuser_navbar" />
		<input type="hidden" name="url" value="{url link=$sRedirectUrl}" />
    	<input type="hidden" name="s" value="" />
		<input type="hidden" name="do" value="login" />
		<input type="hidden" name="vb_login_md5password" />
		<input type="hidden" name="vb_login_md5password_utf" />
    	<table style="width:100%;" cellspacing="0" cellpadding="5">
    	<tr>
    	<td style="width:20%;font-size:8pt;text-align:right;" class="color">
    		<label for="login1">{language text="username"}:</label>
    	</td><td style="width:80%;font-size:8pt;" class="color">
    		<input id="login1" type="text" name="vb_login_username" id="navbar_username" size="30" class="input" onfocus="this.className='input2';" onblur="this.className='input';" />
    	</td>
    	</tr>
    	<tr>
    	<td style="width:20%;font-size:8pt;text-align:right;" class="color">
    		<label for="login2">{language text="password"}:</label>
    	</td><td style="width:80%;font-size:8pt;" class="color">
    		<input id="login2" type="password" name="vb_login_password" id="navbar_password" size="30" class="input" onfocus="this.className='input2';" onblur="this.className='input';" />
    	</td>
    	</tr>
    	</table>
    	{else}
    	<form method="post" style="margin:0px;" action="{$sUrl}">
    	<table style="width:100%;" cellspacing="0" cellpadding="5">
    	<tr>
    	<td style="width:20%;font-size:8pt;text-align:right;" class="color">
    		<label for="login1">{language text="username"}:</label>

    	</td><td style="width:80%;font-size:8pt;" class="color">
    		<input id="login1" type="text" name="login" size="30" class="input" onfocus="this.className='input2';" onblur="this.className='input';" />
    	</td>
    	</tr>
    	<tr>
    	<td style="width:20%;font-size:8pt;text-align:right;" class="color">
    		<label for="login2">{language text="password"}:</label>

    	</td><td style="width:80%;font-size:8pt;" class="color">
    		<input id="login2" type="password" name="pass" size="30" class="input" onfocus="this.className='input2';" onblur="this.className='input';" />
    	</td>
    	</tr>
    	<tr>
        	<td style="width:20%;font-size:8pt;text-align:right;" class="color">
        	</td>
        	<td style="width:80%;font-size:8pt;" class="color">
        		<input type="checkbox" name="remember_me" style="vertical-align:middle;border:0px;" /> {language text="remember_me"}
        	</td>
        </tr>
    	</table>
		{/if}

    	


    	<div style="padding:5px;" class="border">
    	<input type="submit" name="act[login]" value="{language text="login"}" onclick="document.getElementById('formhide1').style.display='none';document.getElementById('formhide2').style.display='';" class="button2" onmouseover="this.className='button';" onmouseout="this.className='button2';" />
    	</div>

    	


    	<div style="text-align:right;font-size:7pt;" class="color">
    		[ {language text='Mod_Account.register_now'} ] 
    		[ {language text="lost_your_password"} ]
    	</div>

    	</form>

    	</div>

    	<div style="display:none;" id="formhide2">
    	<div style="font-size:10pt;" class="color">
    	{language text="logging_in"}
    	</div>

    	<table class="pbar3" cellpadding="0" cellspacing="0">
    	<tr>
    	<td>
    		<span id="progress1"> </span>
    		<span id="progress2"> </span>
    		<span id="progress3"> </span>
    		<span id="progress4"> </span>
    		<span id="progress5"> </span>
    		<span id="progress6"> </span>
    		<span id="progress7"> </span>
    		<span id="progress8"> </span>
    		<span id="progress9"> </span>
    	</td>
    	</tr>
    	</table>

    	<script type="text/javascript">do_prog(9,200);</script>

    	</div>
    </td>
</tr>
</table>

grazie in anticipo.

Mastromastello

**Hobby** · 25-03-2008, 23:02

Se mi fai un disegnetto di come vuoi le tabelle e le misure faccio prima a fartela che modificare un codice così

**Mastromastello** · 26-03-2008, 18:15

Ho risolto.

Grazie cmq.

Mastromastello

Discussione: Ridimensionare tabelle adiacenti

Strumenti discussione

Ricerca discussione

Visualizza

Ridimensionare tabelle adiacenti

Re: Ridimensionare tabelle adiacenti

Permessi di invio