...
PDA

Playing with table fields to achieve a specified appearance

cesark
09-28-2004, 05:32 PM
Hi,

How can I achieve that the third and fourth column are very closer to the second column? I mean, the ‘Product’, ‘Specify Product’ and ‘Special Name’ labels (with its fields) appear beside of the other fields (Family Product, Type,..)

You will see that when you choose the family ‘3’ from the first select, another row appears. I want to maintain the appearance described above after that row appears.

Here is the complete code sample:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
function other_Fam() {

var family = document.test_form.familyProd.value;


if (family != 2) {
document.getElementById("othersFP").style.display = "none";
document.getElementById("prodTitle").style.visibility = "visible";
document.getElementById("product").style.visibility = "visible";

}
else {
document.getElementById("othersFP").style.display = "inline";
document.getElementById("otherF").style.visibility = "visible";
document.getElementById("specFamily").style.visibility = "visible";
document.getElementById("prodTitle").style.visibility = "hidden";
document.getElementById("product").style.visibility = "hidden";


}

}
</script>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body onLoad="other_Fam();">
<form name="test_form">
<table width="100%" border="0" cellspacing="0" bgcolor="#FFFFCC" id="dades_bas">
<tr>

<td width="118" height="30" align="left" valign="middle" class="lletra4"><span class="astVerm">*</span> Family
Product:</td>
<td align="left" valign="middle">
<select name="familyProd" onchange="return other_Fam();">
<option value="0">Family 1</option>
<option value="1">Family 2</option>
<option value="2">Family 3</option>
</select>
</td>
<td align="left" valign="middle" width="118"><span id="prodTitle">* Product: </span></td>
<td align="left" valign="middle"><select name="product">
<option value="0">Product 1</option>
<option value="1">Product 2</option>
<option value="2">Product 3</option>
<option value="3">Product 4</option>
</select>
</td>
</tr>
<tr id="othersFP">
<td height="30" align="left" valign="middle"><span id="otherF">* Specify Family: </span></td>
<td align="left" valign="middle"><input type="text" name="specFamily"></td>
<td align="left" valign="middle">* Specify Product: </td>
<td align="left" valign="middle"><input type="text" name="other_prod"></td>
</tr>
<tr>
<td height="30" align="left" valign="middle"> Type: </td>
<td height="30" align="left" valign="middle"><input type="text" name="var"></td>
<td height="30" align="left" valign="middle"> Special Name </td>
<td height="30" align="left" valign="middle"><input type="text" name="special"></td>
</tr>
<tr>
<td height="30" align="left" valign="middle">* Offer Title: </td>
<td height="30" colspan="3" align="left" valign="middle"><input type="text" name="title"></td>
</tr>
</table>

</form>
</body>
</html>


Thanks
hemebond
09-28-2004, 11:33 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>Documento sin título</title>
</head>
<body>
<form>
<fieldset>
<legend>Family</legend>
<div>
<label for="family">Family Product</label>
<select id="family">
<option value="1">Family 1</option>
<option value="2">Family 2</option>
<option value="3">Family 3</option>
</select>
</div>
<div>
<label for="family_spec">Specify Family</label>
<input id="family_spec" type="text">
</div>
<div>
<label for="type">Type</label>
<input id="type" type="text">
</div>
<div>
<label for="title">Offer Title</label>
<input id="title" type="text">
</div>
</fieldset>
<fieldset>
<legend>Product</label>
<div>
<label for="product">Product</label>
<select id="product">
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
<option value="4">Product 4</option>
</select>
</div>
<div>
<label for="product_spec">Specify Product</label>
<input id="product_spec" type="text">
</div>
<div>
<label for="special">Special Name</label>
<input id="special" type="text">
</div>
</fieldset>
</form>
</body>
<script type="text/javascript">
document.getElementById("family").addEventListener("change",toggle,true);

function toggle()
{
if(document.getElementById("family").value == 3)
{
document.getElementById("family_spec").parentNode.style.display = "block";
document.getElementById("product_spec").parentNode.style.display = "block";
}
else
{
document.getElementById("family_spec").parentNode.style.display = "none";
document.getElementById("product_spec").parentNode.style.display = "none";
}
}

toggle();
</script>
</html>name attributes removed for readability.
cesark
09-28-2004, 11:52 PM
The only thing that I can do is to change the table width to ‘75%’ or similar in order to join the columns (make the columns closer)? Or I can play with table columns width?

Another question that I have in mind is: What is the sense of ‘width’ in pixels in the table columns when I set the table to (width=”100%”)? I mean, how can I play with the table columns width (in pixels or per cent) so that I can set a specified design when I have the main table width in %?


Thank you
cesark
09-28-2004, 11:57 PM
Oh, I didn' t see your post. Now I have to go, I will examine your answer later

Thank you
cesark
09-29-2004, 05:49 PM
I don' t understand the purpose of the code. This layout is very different.

I am becoming crazy playing with table columns width in pixels after set the table width to 100% or 75% or 80%. And when all seems correct, in another resolution screen some labels are broken, and the page appearance isn’t correct. I am desperate..

I know CSS a little. If I try to change all my tables layout to CSS styles, my pages design will be displayed equal in all the screens resolution?
hemebond
09-29-2004, 10:26 PM
My code is completely different because using tables for layout is semantically incorrect.

You need to learn CSS, and use that to alter the display of my code. For example<style type="text/css">
fieldset {
width:20em;
float:left;
}
label {
float:left;
width:10em;
}
</style>
cesark
09-29-2004, 10:54 PM
Ok, then if I learn CSS, my pages design will be displayed in the same way in all the user screens? Tables are used as well in CSS, or I don' t have to use them anymore? ;)
]|V|[agnus
09-29-2004, 11:29 PM
<html lang="fr">

Barcelona is in Spain, not France, but regardless, the lang and xml:lang attributes are meant to designate the language of the document, which in this case is English, not the author's native tongue.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum