Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Playing with table fields to achieve a specified appearance

    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:
    Code:
    <!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

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!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.

  • #3
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, I didn' t see your post. Now I have to go, I will examine your answer later

    Thank you

  • #5
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Last edited by cesark; 09-29-2004 at 05:56 PM.

  • #6
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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
    Code:
    <style type="text/css">
    	fieldset	{
    		width:20em;
    		float:left;
    	}
    	label	{
    		float:left;
    		width:10em;
    	}
    </style>

  • #7
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #8
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hemebond
    <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.
    Last edited by ]|V|[agnus; 09-29-2004 at 11:29 PM. Reason: added quote for clarity


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •