eliminare spazio vuoto

**stiffa** · 22-11-2005, 17:04

Purtroppo , ho riciclato codice trovato sulla rete.
Questo codice e' composto da un menu a linguette fatto in javascipt e css...
Il mio problema e' lo spazio bianco che si forma da solo dopo il mio tabellone a lingetta. Questo fa si che appare una scrollbar abb lunga.

Come posso eliminare questo fastidioso spazio mantenendo il mio menu cosi?
grazie

ecco il codice

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SimplytheBest DHTML tabbed notes script</title>
<link rel="stylesheet" href="../scripts.css" type="text/css">
<style type="text/css">

.conts { visibility: hidden }
.tab { font-family: Verdana; font-size: 8pt; font-weight: normal; text-align: center;
border-left: thin solid #e0e0e0; border-right: thin solid gray;
border-top: thin solid #e0e0e0;
cursor

ointer;
}
.selTab { font-family: Verdana; font-size: 8pt; font-weight: bold; text-align: center;
border-left: thin solid #000080;
border-right: thin solid #000080;
border-top: thin solid #000080;
cursor

ointer;
}

</style>

<script language = "javascript" type="text/javascript">

function cleanInput()
{
document.getElementById("theForm").hostName.value = "";
document.getElementById("theForm").ipAddress.value = "";
document.getElementById("theForm").gateway.value = "";
document.getElementById("theForm").dns1.value = "";
document.getElementById("theForm").dns2.value = "";
document.getElementById("theForm").subnet.value = "";

}

function change()
{

var dhcp = document.getElementById("theForm").dhcp.options[document.getElementById("theForm").dhcp.selectedIn dex].value ;

if(dhcp=="true")
{

document.getElementById("theForm").ipAddress.disab led = true;
document.getElementById("theForm").gateway.disable d = true;
document.getElementById("theForm").dns1.disabled = true;
document.getElementById("theForm").dns2.disabled = true;
document.getElementById("theForm").macAdd.disabled = true;
document.getElementById("theForm").subnet.disabled = true;
}
else
{
document.getElementById("theForm").hostName.disabl ed = false;
document.getElementById("theForm").ipAddress.disab led = false;
document.getElementById("theForm").gateway.disable d = false;
document.getElementById("theForm").dns1.disabled = false;
document.getElementById("theForm").dns2.disabled = false;
document.getElementById("theForm").subnet.disabled = false;
document.getElementById("theForm").macAdd.disabled = false;
}
}

//a public function that the container uses to pass in values for the card containers
function public_Contents(contents1, contents2, contents3, contents4, contents5, contents6, contents7){
document.getElementById("t1Contents").innerHTML = contents1;
document.getElementById("t2Contents").innerHTML = contents2;
document.getElementById("t3Contents").innerHTML = contents3;
document.getElementById("t4Contents").innerHTML = contents4;
document.getElementById("t5Contents").innerHTML = contents5;
document.getElementById("t6Contents").innerHTML = contents6;
document.getElementById("t7Contents").innerHTML = contents7;
init();
}
//sets the default display to tab 1
function init(){
document.getElementById("tabContents").innerHTML = document.getElementById("t1Contents").innerHTML;
}
//this is the tab switching function
var currentTab;
var tabBase;
var firstFlag = true;

function changeTabs(tabID){
if(firstFlag == true){
currentTab = document.getElementById("t1");
tabBase = document.getElementById("t1base");
firstFlag = false;
}
if(document.getElementById(tabID).className == "tab"){
currentTab.className = "tab";
tabBase.style.backgroundColor = "white";
currentTab = document.getElementById(tabID);
tabBaseID = currentTab.id + "base";
tabContentID = currentTab.id + "Contents";
tabBase = document.getElementById(tabBaseID);
tabContent = document.getElementById(tabContentID);
currentTab.className = "selTab";
tabBase.style.backgroundColor = "";
document.getElementById("tabContents").innerHTML = tabContent.innerHTML;
}
}
</SCRIPT>
<link rel = "stylesheet" type = "text/css" href = "../css/hyperlife.css">
</head>
<body onload="init();change();" text="#000000" link="#0000A0" vlink="#0000A0" alink="#0000A0">

<table bgcolor="#FFA500" border = "2" cellpadding="0" cellspacing="0" style="HEIGHT: 500px; WIDTH: 850px" class="body" ID="Table1">
<tbody>
<tr>
<td class="selTab" onclick="changeTabs('t1')" height="25" id="t1">TwineXp</td>
<td class="tab" onclick="changeTabs('t2')" id="t2">Network</td>
<td class="tab" onclick="changeTabs('t3')" id="t3">Emulatore</td>
<td class="tab" onclick="changeTabs('t4')" id="t4">Utenti</td>

</tr>
<tr>
<td id="t1base" style="BORDER-LEFT: gray thin solid; HEIGHT: 1px"></td>
<td id="t2base" style="BACKGROUND-COLOR: white; HEIGHT: 1px"></td>
<td id="t3base" style="BACKGROUND-COLOR: white; HEIGHT: 1px"></td>
<td id="t4base" style="BACKGROUND-COLOR: white; HEIGHT: 1px"></td>

</tr>
<tr>
<td colspan="7" height="*" id="tabContents" style="BORDER-BOTTOM: gray thin solid; BORDER-LEFT: gray thin solid; BORDER-RIGHT: gray thin solid"> </td>
</tr>
</tbody>
</table>

<div class="conts" id="t1Contents" style="width: 500; height: 10">
<table cellspacing="5" cellpadding="5" border = "2" align = "center" width = "380" bgcolor="#ffffff">

<tr>
<td width = "150" align = "center">[img]web/../TMimages/bmp32x32/iconet.bmp[/img]</td>
<td>Ip config</td>
</tr>
<tr>
<td>Host Name:</td>
<td><input type = "text" name = "hostName" value = "carlo
" readonly></td>
</tr>
<tr>
<td>IP Address:</td>
<td><input name="ipAddress" type="text" value = "192.168.0.175 " readonly></td>
</tr>
<tr>
<td>Subnet Mask :</td>
<td><input name="subnet" type="text" value = "255.255.255.0 "readonly></td>
</tr>
<tr>
<td>Gateway :</td>
<td><input name="gateway" type="text" value = "192.168.0.1 "readonly></td>
</tr>
<tr>
<td>Dns primary :</td>
<td><input name="gateway" type="text" value = "195.110.96.66 "readonly></td>
</tr>
<tr>
<td>Dns secondary :</td>
<td><input name="gateway" type="text" value = "195.110.96.67 "readonly></td>
</tr>
<tr>
<td colspan = "2">
<table cellspacing="5" cellpadding="5" align ="center" border = "2" >

</table>

</td>

</tr>
</table>
</div>
<div class="conts" id="t2Contents" style="width: 459; height: 120">
<form action = "do_netConfig.php" method = "post" name = "theForm" id="theForm">
<table cellspacing="5" cellpadding="5" border = "2" align = "center" width = "380" bgcolor="#ffffff">

<tr>
<td width = "150" align = "center">[img]web/../TMimages/bmp32x32/iconet.bmp[/img]</td>
<td>Ip config</td>
</tr>
<tr>
<td>Dhcp :</td>
<td> <select name = "dhcp" onChange = "change();" >
<option value = "true">yes</option>
<option value = "false">no</option>

</select>

</td>
</tr>

<tr>
<td>Host Name:</td>
<td><input type = "text" name = "hostName" value = "carlo
" ></td>
</tr>
<tr>
<td>IP Address:</td>
<td><input name="ipAddress" type="text" value = "192.168.0.175 " ></td>
</tr>
<tr>
<td>Subnet Mask :</td>
<td><input name="subnet" type="text" value = "255.255.255.0 "></td>
</tr>
<tr>
<td>Gateway :</td>
<td><input name="gateway" type="text" value = "192.168.0.1 "></td>
</tr>
<tr>
<td>Mac Address :</td>
<td><input name="macAdd" type="text" value = "00-13-8F-1B-F3-C7 "disabled ></td>
</tr>

<tr>
<td>Dns primary :</td>
<td><input name="dns1" type="text" value = "195.110.96.66 "></td>
</tr>
<tr>
<td>Dns secondary :</td>
<td><input name="dns2" type="text" value = "195.110.96.67 "></td>
</tr>

<tr>
<td align = "center" colspan ="2">
<table cellspacing="5" cellpadding="5" align ="center" border = "2" >

<tr>
<td><input type="submit" value="OK"></td>
<td><input type="button" value="Cancel" onClick="cleanInput();"></td>
<td><input type="submit" value="Help"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
<div class="conts" id="t3Contents" style="width: 460; height: 38" border = "3">
<table align = "center" width = "700" border = "2" >
<tr>
<td width = "150" colspan ="2">
<img src = "TMimages/spacer.gif" height = "20" alt="">

<table align = "center" cellspacing = "10" width = "300" border = "2" >
<tr>
<td><a href = "http://www.google.it" target = "pippo">Open</a></td>
<td><a href = "http://www.google.it" target = "pippo">Close</a></td>
<td><a href = "addConnTw.php?type=C" target = "pippo"><img src ="web/../TMimages/bmp32x32/addTwinet.bmp" alt = "add connection Twinet" border = "0"></a></td>
<td><a href = "addConnHost.php?type=D" target = "pippo"><img src ="web/../TMimages/bmp32x32/addHost.bmp" alt = "add connection Tn5250e" border = "0"></a></td>
<td><a href = "addConnHost.php?type=E" target = "pippo"><img src ="web/../TMimages/bmp32x32/addHost.bmp" alt = "add connection Tn3270e" border = "0"></a></td>
<td><a href = "addSessionDisp.php" target = "pippo"><img src ="web/../TMimages/bmp32x32/addDisplaySess.bmp" alt = "add Display session" border = "0"></a></td>
<td><a href = "addSessionPrinter.php" target = "pippo"><img src ="web/../TMimages/bmp32x32/addPrinterSess.bmp" alt = "add Printer session" border = "0"></a></td>
<td><a href = "http://www.google.it" target = "pippo"><img src ="TMimagesAlt/delete.bmp" alt = "delete" border = "0"></a></td>
<td><a href = "http://www.google.it" target = "pippo"><img src ="TMimagesAlt/proprieties.bmp" alt = "proprieties" border = "0"></a></td>
<td><a href = "userList.php" target = "pippo"><img src ="web/../TMimages/bmp32x32/usersser.bmp" alt = "user list" border = "0"></a></td>

</tr>

</table>
</td>
</tr>
<tr>
<td valign = "top" align = "left">
sdfsfd
</td>
<td valign = "top">
mnhmnb
</td>
</tr>
</table>
</div>
<div id="t4Contents" style="width: 460; height: 88" >
<table align = "center" width = "700" border = "2" >
<tr>
<td width = "150" colspan ="2">
<img src = "TMimages/spacer.gif" height = "20" alt="">

<table align = "center" cellspacing = "10" width = "300" border = "2" >
<tr>
<td><a href = "http://www.google.it" target = "pippo">Open</a></td>
<td><a href = "http://www.google.it" target = "pippo">Close</a></td>
<td><a href = "addConnTw.php?type=C" target = "pippo"><img src ="web/../TMimages/bmp32x32/addTwinet.bmp" alt = "add connection Twinet" border = "0"></a></td>
<td><a href = "addConnHost.php?type=D" target = "pippo"><img src ="web/../TMimages/bmp32x32/addHost.bmp" alt = "add connection Tn5250e" border = "0"></a></td>
<td><a href = "addConnHost.php?type=E" target = "pippo"><img src ="web/../TMimages/bmp32x32/addHost.bmp" alt = "add connection Tn3270e" border = "0"></a></td>
<td><a href = "addSessionDisp.php" target = "pippo"><img src ="web/../TMimages/bmp32x32/addDisplaySess.bmp" alt = "add Display session" border = "0"></a></td>
<td><a href = "addSessionPrinter.php" target = "pippo"><img src ="web/../TMimages/bmp32x32/addPrinterSess.bmp" alt = "add Printer session" border = "0"></a></td>
<td><a href = "http://www.google.it" target = "pippo"><img src ="TMimagesAlt/delete.bmp" alt = "delete" border = "0"></a></td>
<td><a href = "http://www.google.it" target = "pippo"><img src ="TMimagesAlt/proprieties.bmp" alt = "proprieties" border = "0"></a></td>
<td><a href = "userList.php" target = "pippo"><img src ="web/../TMimages/bmp32x32/usersser.bmp" alt = "user list" border = "0"></a></td>

</tr>

</table>
</td>
</tr>
<tr>
<td valign = "top">
jhg
</td>
<td valign = "top">
jhg
</td>
</tr>
</table>
</div>
<div class="conts" id="t5Contents" style="width: 460; height: 37">
<p align="center" class="body">And so on..</p>
</div>
<div class="conts" id="t6Contents" style="width: 460; height: 37">
<p align="center" class="body">And so on..</p>
</div>

<div class="conts" id="t7Contents" style="width: 460; height: 37">
<p align="center" class="body">
Scroll a little down the page for instructions!</p>
</div>

</table>

</body>
</html>

**floyd46** · 22-11-2005, 17:06

ciao
con questo kilometro di codice... è un pò difficile darti aiuto, non credi?
Posta l'url della pagina, se è in rete.
Floyd

**stiffa** · 22-11-2005, 17:11

la pagina non e' in rete....ma basta un copia incolla non credi?
Non e' complicata.....a ogni linguetta e' associato un div con un id e il js fa si che quando clikki visualizza il div giusto.

cmq ...io sto facendo test e ho notato che se tolgo i css dai div, i pezzi delle linguette me li mette uno sopra l'altro.

non so che dire...prob sono i div...mi servirebbe un trucchetto per eliminarlo

Ah....se vuoi ti taglio il codice il piu possibile per dimostrarti che sto spazio e' invisibile ma c'e'...

**stiffa** · 22-11-2005, 17:26

non capisco.....cosi Ho tagliato piu che potevo, facendo diventare vuoti i div del menu a linguette... Ora la scroll bar e' sparita.

ecco il codice pulito

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SimplytheBest DHTML tabbed notes script</title>
<link rel="stylesheet" href="../scripts.css" type="text/css">
<style type="text/css">

.conts { visibility: hidden }
.tab { font-family: Verdana; font-size: 8pt; font-weight: normal; text-align: center;
border-left: thin solid #e0e0e0; border-right: thin solid gray;
border-top: thin solid #e0e0e0;
cursor

ointer;
}
.selTab { font-family: Verdana; font-size: 8pt; font-weight: bold; text-align: center;
border-left: thin solid #000080;
border-right: thin solid #000080;
border-top: thin solid #000080;
cursor

ointer;
}

</style>

<script language = "javascript" type="text/javascript">

//a public function that the container uses to pass in values for the card containers
function public_Contents(contents1, contents2, contents3, contents4, contents5, contents6, contents7){
document.getElementById("t1Contents").innerHTML = contents1;
document.getElementById("t2Contents").innerHTML = contents2;
document.getElementById("t3Contents").innerHTML = contents3;
document.getElementById("t4Contents").innerHTML = contents4;
document.getElementById("t5Contents").innerHTML = contents5;
document.getElementById("t6Contents").innerHTML = contents6;
document.getElementById("t7Contents").innerHTML = contents7;
init();
}
//sets the default display to tab 1
function init(){
document.getElementById("tabContents").innerHTML = document.getElementById("t1Contents").innerHTML;
}
//this is the tab switching function
var currentTab;
var tabBase;
var firstFlag = true;

function changeTabs(tabID){
if(firstFlag == true){
currentTab = document.getElementById("t1");
tabBase = document.getElementById("t1base");
firstFlag = false;
}
if(document.getElementById(tabID).className == "tab"){
currentTab.className = "tab";
tabBase.style.backgroundColor = "white";
currentTab = document.getElementById(tabID);
tabBaseID = currentTab.id + "base";
tabContentID = currentTab.id + "Contents";
tabBase = document.getElementById(tabBaseID);
tabContent = document.getElementById(tabContentID);
currentTab.className = "selTab";
tabBase.style.backgroundColor = "";
document.getElementById("tabContents").innerHTML = tabContent.innerHTML;
}
}
</SCRIPT>
<link rel = "stylesheet" type = "text/css" href = "../css/hyperlife.css">
</head>
<body onload="init();" text="#000000" link="#0000A0" vlink="#0000A0" alink="#0000A0">

<table bgcolor="#FFA500" border = "2" cellpadding="0" cellspacing="0" style="HEIGHT: 500px; WIDTH: 850px" class="body" ID="Table1">
<tbody>
<tr>
<td class="selTab" onclick="changeTabs('t1')" height="25" id="t1">TwineXp</td>
<td class="tab" onclick="changeTabs('t2')" id="t2">Network</td>
<td class="tab" onclick="changeTabs('t3')" id="t3">Emulatore</td>
<td class="tab" onclick="changeTabs('t4')" id="t4">Utenti</td>

</tr>
<tr>
<td id="t1base" style="BORDER-LEFT: gray thin solid; HEIGHT: 1px"></td>
<td id="t2base" style="BACKGROUND-COLOR: white; HEIGHT: 1px"></td>
<td id="t3base" style="BACKGROUND-COLOR: white; HEIGHT: 1px"></td>
<td id="t4base" style="BACKGROUND-COLOR: white; HEIGHT: 1px"></td>

</tr>
<tr>
<td colspan="7" height="*" id="tabContents" style="BORDER-BOTTOM: gray thin solid; BORDER-LEFT: gray thin solid; BORDER-RIGHT: gray thin solid"> </td>
</tr>
</tbody>
</table>

<div class="conts" id="t1Contents" style="width: 500; height: 10">

</div>
<div class="conts" id="t2Contents" style="width: 459; height: 120">
linguetta2
</div>
<div class="conts" id="t3Contents" style="width: 460; height: 38" border = "3">
linguetta3
</div>
<div class="conts" id="t4Contents" style="width: 460; height: 88" >
linguetta4
</div>

</table>

</body>
</html>

N.B. se solo in un div metto questo sghitto di tabella....

<table border = "1" height = "100">
<tr>
<td>dsddadas
</td>
</tr>
</table>

il risultato e' una scroll bar a destra.....aiuto....pls

**Angarat** · 22-11-2005, 18:02

Se ho ben capito quello che vuoi prova queste modifiche:

nei div:

codice:

<div class="conts" id="t1Contents">

nello stile css:

codice:

.conts {
	visibility: hidden;
	left: 0px;
	top: 0px;
	position: absolute;
}

fammi sapere....

**stiffa** · 23-11-2005, 17:44

Anche te entri a far parte del mio museo dei grossi di web.
Lo sto allestendo e ti sei guadagnato una statua pure te.
Complimentoni ....hai capito benissimo cosa volevo ottenere....

Grazieeeee milllllleeeeeee.

Discussione: eliminare spazio vuoto

Strumenti discussione

Ricerca discussione

Visualizza

eliminare spazio vuoto

Re: eliminare spazio vuoto

Permessi di invio