Far sovrapporre degli elementi per evitare una nuova riga

[Prince_Odd]

Salve a tutti,
nel titolo mi sono spiegato molto male ma non è una questione breve da spiegare in un titolo.
Allora.
In questo script:

 
<script type="text/javascript"> 
function visualizza(id){ 
if (document.getElementById){ 
if(document.getElementById(id).style.display == 'none'){ 
document.getElementById(id).style.display = 'block'; 
}else{ 
document.getElementById(id).style.display = 'none'; 
} 
} 
} 
</script> 
 


 
 
<div class="table"><table class="skin_tbl" align="left" cellpadding="0" cellspacing="0"><tr><td class="mleft_top"></td><td><table class="mback" width="100%" cellpadding="0" cellspacing="0"><tr><td class="mback_left"></td><td class="mback_center"> 
 
<div class="mtitle">FF Fast Graphic Service</div> 
 
</td><td class="mback_right"></td></tr></table></td><td class="mright_top"></td></tr><tr><td class="mleft"></td><td><table class="mainbg" style="text-align:center;width:100%" cellpadding="4" cellspacing="1"> 
 
<tr> 
<td class="title top" colspan="1">[b]Amministrazione[b]</td> 
<td class="title top" colspan="1">Targhette</td> 
</tr> 
 
<tr> 
<td class="ww" width="25%" rowspan="2"><div style="overflow:auto; height:330px;" width="100%"><div align="left"><div class="info">Benvenuto nel pannello amministrativo per inserire questo servizio nel prorpio forum/blog. 
Segui i seguenti Passaggi: 
<ul type="square"> [*]Scegli quale versione vuoi (come Grafica) di questo servizio (per Targhette). [*]Clicca sul pulsante corrispondente. 
 [*]Inserisci <u>tutti i codici</u> nel tuo forum/blog [*]Contatta in privato (MP) Prince William indicando il forum in cui è stato inserito. (OBBLIGATORIO) [/list]</div>

<div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center">Opzioni per l'incorporamento:

<div align="left"><ul type="disc">[*]<u>Vecchio Layout:</u>[/list]</div><a href="http://codelyokoitaly.forumcommunity.net/?t=51173404&p=355887550" target="_blank"><button>Clicca qui per Stile del Proprio Forum con il 
Vecchio Layuot.</button></a>

<a href="http://codelyokoitaly.forumcommunity.net/?t=51173540&p=355888504" target="_blank"><button>Clicca qui per Stile Code Lyoko con il 
Vecchio Layout.</button></a>

<hr><div align="left"><ul type="disc">[*]<u>Nuovo Layout:</u>[/list]
</div><a href="http://codelyokoitaly.forumcommunity.net/?t=51173578&p=355888944" target="_blank"><button>Clicca qui per Stile del Proprio Forum con il 
Nuovo Layout.</button></a>

<a href="http://codelyokoitaly.forumcommunity.net/?t=51173572&p=355888850" target="_blank"><button>Clicca qui per Stile Code Lyoko con il 
Nuovo Layout.</button></a></div></div></div> </td> 
<td class="aa" width="75%"><table align="left">> 
 
<tr> 
<tr> 
<td colspan="2" class="info">Doppio click per aprire un'anteprima; un click per chiuderla; un click per aprire un'anteprima già aperta in precedenza (non valido se si ricarica la pagina)</td> 
</tr> 
 <td class="aa"><select size="15" style="width:153px;height:230px;font-size:1em;"> 
 
<option onclick="visualizza('founder_hover');" selected>Founder - verde</option> 
 
<option onclick="visualizza('admin_hover');">Amministratore - blu
 </option> 
 
<option onclick="visualizza('mod_hover');">Mod Globale - blu
 </option> 
 
<option onclick="visualizza('warned_hover');">Warned - rossa
 </option> 
 
<option onclick="visualizza('banned_hover');" >Bannato - rossa
 </option> 
 
<option onclick="visualizza('skinner_hover');" >Skinner - celeste
 </option> 
 
<option onclick="visualizza('plus_hover');" >Plus - arancio
 </option> 
 
<option onclick="visualizza('premium_hover');" >Premium - verde
 </option> 
 
<option onclick="visualizza('famoso_hover');">Celebrità - gialla
 </option> 
 
<option onclick="visualizza('ulrich_hover');">Ulrich - arancio
 </option> 
 
<option onclick="visualizza('gatto_hover');">Odd - viola
 </option> 
 
<option onclick="visualizza('yumi_hover');">Yumi - viola
 </option> 
 
<option onclick="visualizza('jeremy_hover');">Jeremy - azzurra
 </option> 
 
<option onclick="visualizza('aelita_hover');">Aelita - rosa
 </option> 
 
<option onclick="visualizza('william_hover');">William - grigia
 </option></select> 
</td> 
<td class="ww" style="height: 10px"> 
 
 
<div id="founder_hover"><div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><div class="quote">Link immagine: <input size="30" onclick = "this.focus(); this.select();" value='http://i54.tinypic.com/2ljkopu.gif'></div> 
</div></div> 
 
 
<div id="admin_hover"><div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><div class="quote">Link immagine:<input size="30" onclick = "this.focus(); this.select();" value='http://i53.tinypic.com/23r0kz5.gif'></div> 
</div></div> 
 
 
<div id="mod_hover"><div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><div class="quote">Link immagine: <input size="30" onclick = "this.focus(); this.select();" value='http://i56.tinypic.com/28uu2b9.gif'></div> 
</div></div> 
 
 
<div id="warned_hover"><div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><div class="quote">Link immagine: <input size="30" onclick = "this.focus(); this.select();" value='http://i52.tinypic.com/2870im1.gif'></div> 
</div></div> 
 
 
<div id="banned_hover"><div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><div class="quote">Link immagine: <input size="30" onclick = "this.focus(); this.select();" value='http://i52.tinypic.com/2mn57d3.gif'></div> 
</div></div> 
 
 
<div id="skinner_hover"><div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><div class="quote">Link immagine:<input size="30" onclick = "this.focus(); this.select();" value='http://i53.tinypic.com/oisjo5.gif'></div> 
</div></div> 
 
 
<div id="plus_hover"><div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><div class="quote">Link immagine: <input size="30" onclick = "this.focus(); this.select();" value='http://i55.tinypic.com/idwx8y.gif'></div> 
</div></div> 
 
 
<div id="premium_hover"><div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><div class="quote">Link immagine: <input size="30" onclick = "this.focus(); this.select();" value='http://i56.tinypic.com/256g1f6.gif'></div> 
</div></div> 
 
 
<div id="famoso_hover"><div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><div class="quote">Link immagine: <input size="30" onclick = "this.focus(); this.select();" value='http://i52.tinypic.com/2q3rvpv.gif'></div> 
</div></div> 
 
 
<div id="ulrich_hover"><div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><div class="quote">Link immagine: <input size="30" onclick = "this.focus(); this.select();" value='http://i53.tinypic.com/21bq9le.gif'></div> 
</div></div> 
 
 
<div id="gatto_hover"><div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><div class="quote">Link immagine: <input size="30" onclick = "this.focus(); this.select();" value='http://oi54.tinypic.com/wvsbqt.jpg'></div> 
</div></div> 
 
 
<div id="yumi_hover"><div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><div class="quote">Link immagine: <input size="30" onclick = "this.focus(); this.select();" value='http://oi53.tinypic.com/2e3zxux.jpg'></div> 
</div></div> 
 
 
<div id="jeremy_hover"><div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><div class="quote">Link immagine:<input size="30" onclick = "this.focus(); this.select();" value='http://i51.tinypic.com/nlq0cj.gif'></div> 
</div></div> 
 
 
<div id="aelita_hover"><div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><div class="quote">Link immagine:<input size="30" onclick = "this.focus(); this.select();" value='http://i55.tinypic.com/fu26ih.gif'></div> 
</div></div> 
 
 
<div id="william_hover"><div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><div class="quote">Link immagine: <input size="30" onclick = "this.focus(); this.select();" value='http://i56.tinypic.com/35c0w8z.gif'></div> 
</div></div> </td> 
</tr></table> 
 
 
<tr> 
<td class="ww"> 


<div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center">ForumFree Fast Graphic Service 
Ideato e Realizzato da Prince William del CodeLyokoForum.it, Grazie all'immenso aiuto di Bored del ForumFree Magazine. 
</div> 
 
</td></tr> 
</td> 
</tr> 
 
 
</table></td><td class="mright"></td></tr><tr><td class="mleft_bottom"></td><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tr><td class="msub_left"></td><td class="msub_center"></td><td class="msub_right"></td></tr></table></td><td class="mright_bottom"></td></tr></table> </div>

Mi scuso per la lunghezza del codice ma il mio problema è che quando apro un'anteprima essa non si sovrappone all'altra coprendola, ma crea una nuova riga .
C'è qualcuno che mi saprebbe aiutare a risolvere questo fastidioso problema?

per capire meglio vi metto il link di dove ho "installato" questo affare:

Cliccami
Spero che non venga considerato come spam...


spero che riusciate a darmi un'aiuto
Grazie anticipatamente
Prince_Odd

ps.= lasciate perdere il box verde con scritto 2 click 3 click 10 click per quel problema sono riuscito a sistemare da solo

[willybit]

Ciao Prince_Odd,
la tua funzione visualizza dovrebbe visualizzare e nascondere? Visto che il display iniziale è impostato da css e non sullo style ti conviene farti 2 funzioni: una per visualizzare e una per nascondere. Ti tieni una variabile globale per ricordare qual'è l'ultimo id visualizzato per poterlo nascondere quando visualizzi altro

var idPrecedente='founder_hover';
function visualizza(id){ 
  nascondi(idPrecedente+'');
  idPrecedente=id+'';
  if (document.getElementById(id)){ 
    document.getElementById(id).style.display = 'block'; 
  } 
} 
function nascondi(id){
  if (document.getElementById(id)){ 
    document.getElementById(id).style.display = 'none'; 
  }  
}

[Prince_Odd]

Ciao willybit,
la prontezza e soprattuto l'efficacia della risposta mi stupiscono!
Sicuramente mi rivolgerò di nuovo al HTML.it
Però vorrei approfittare per chiederti.
C'è un modo di far sì che quando si apre un opzione ci sia un'animazione graduata e non di scatto?
tipo un transition
c'è un modo?
Grazie ancora
Prince_Odd