SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 37 of 37
  1. #26
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Shadow,
    Here is a sample page but unforturnately I build it using tables it is a .php page http://183.78.169.56/test/addClient.php. So how do you think my html should look like if I want to have 3 columns like this? Thank you.

  2. #27
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    You can put the content into three divs, give them a width of 33% or less, and float them left. That's just one possible way.

  3. #28
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in this case, to provide a better user experience, i would not resort to having 3cols. one column is more than enough to confuse the user, let alone three


  4. #29
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Noon,
    Why I resort to 3 column is because the user wants it that way if the form is too length with many input to be done. So they dont want to keep scrolling up and down. Well you know different users have different taste.

  5. #30
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I'm with noonnope on that -- it's too wide... sure if the user has a 1920x1200 display it's "nice" to go that wide, but you show that to a netbook user and they're gonna boot you in the crotch.

    THOUGH, I would probably stack them as floats and lose all the fixed width nonsense. That way on narrow displays it would drop down, while on wide displays it's all there going across. Best of both worlds.

    As to the code, the two side-by-side sections I'd wrap in DIV's inside the fieldset....

    Code:
    		<div>
    	  	<label for="clientName">
    	  		Name<b>*</b>
    			  <input id="clientName" name="clientName" value="" />
    			</label>  
    			<span id="clientNameError"></span>
      		<br />
    			
    			<label for="clientContactPerson">
    				Contact Person<b>*</b>
    		  	<input id="clientContactPerson" name="clientContactPerson" value="" /> 
    		  </label>
    			<span id="clientContactPersonError" ></span>
    			<br />
    		</div>
    Later, rinse, repeat on the second one. I changed the 'required' to a bold tag to free up span for use as the error text (which shouldn't be enough text to qualify as a paragraph IMHO)... again throwing away all those pointless tables and classes.

    You DO have one section that is tabular data -- but apparently you are unfamiliar with THEAD, TBODY and TH, all of which would let you throw those pointless classes away!

    Oh, and you are aware you cannot use the same ID more than once in the markup, right? (see "gridrow") and you also seem to be closing DIV that don't exist and in modern code there is no such thing as a 'border' attribute.... and there's no reason for FORM to have a name unless you still care about supporting netscape 4. (which nobody does!)... and if the value is the same as the contents of a OPTION, you don't need a value attribute.

    Really big problem is the placement of #form2 -- the only thing that can go after a TR is a TD or </TR> -- putting the form around the two TD inside the TR is invalid markup... to do that the form has to go around the entire table!

    Which is why my approach would look something like this:

    Code:
    <form id="form2" method="post" action="">
    
    	<table>
    		<colgroup>
    			<col width="8&#37;" />
    			<col width="32%" />
    			<col width="15%" />
    			<col width="15%" />
    			<col width="15%" />
    			<col width="15%" />
    		</colgroup>
    		<thead>
    			<tr>
    				<th>No.</th>
    				<th>Name</th>
    				<th>Contact Person</th>
    				<th>Contact Number</th>
    				<th>Edit</th>
    				<th>Delete</th>
    			</tr>
    		</thead><tbody>
    			<tr>
    				<td>1</td>
    				<td>test1</td>
    				<td>wessss</td>
    				<td>017</td>
    				<td>
    					<a href="addClient.php?editVal=1">
    						<img src="images/editIcon.gif" alt="Edit Client" />
    					</a>
    				</td><td>
    					<a href="addClient.php?deleteVal=1">
    						<img src="images/deleteIcon.gif" alt="Delete Client" />
    					</a>
    				</td>
    			</tr><tr>
    				<td>2</td>
    				<td>test2</td>
    				<td>mr</td>
    				<td>017</td>
    				<td>
    					<a href="addClient.php?editVal=8">
    						<img src="images/editIcon.gif" alt="Edit Client" />
    					</a>
    				</td><td>
    					<a href="addClient.php?deleteVal=8">
    						<img src="images/deleteIcon.gif" alt="Edit Client" />
    					</a>
    				</td>
    			</tr><tr>
    				<td>3</td>
    				<td>test3</td>
    				<td>mr</td>
    				<td>018</td>
    				<td>
    					<a href="addClient.php?editVal=6">
    						<img src="images/editIcon.gif" alt="Edit Client" />
    					</a>
    				</td><td>
    					<a href="addClient.php?deleteVal=6">
    						<img src="images/deleteIcon.gif" alt="Edit Client" />
    					</a>
    				</td>
    			</tr><tr>
    				<td>4</td>
    				<td>test4</td>
    				<td>mobil</td>
    				<td>017</td>
    				<td>
    					<a href="addClient.php?editVal=5">
    						<img src="images/editIcon.gif" alt="Edit Client" />
    					</a>
    				</td><td>
    					<a href="addClient.php?deleteVal=5">
    						<img src="images/deleteIcon.gif" alt="Edit Client" />
    					</a>
    				</td>
    			</tr><tr>
    				<td colspan="5">
    					<label for="searchcm">Search</label>
    					<input
    						type="text"
    						name="searchcm"
    						id="searchcm"
    						onKeyPress="checkEnter(event)"
    						value=""
    					/>
    				</td><td>
    					<select
    						onchange="this.form.submit();"
    						name="selectpage"
    						id="selectpage"
    					>
    						<option selected="selected">1</option>
    					</select>
    					<input type="hidden" name="driverID" id="driverID" value="" />
    				</td>
    			</tr>
    		</tbody>
    	</table>
    </form>
    Which provides all the hooks you need for that same styling.

    There's an example I use about badly coded tables that goes thus:

    Code:
    <table cellpadding="2" cellspacing="4" border="1" class="myTable">
    	<tr>
    		<td colspan="4" class="bigHeading">
    			<strong>
    				<font size="+1">
    					Table Title
    				</font>
    			</strong>
    		</td>
    	</tr><tr>
    		<td>&nbsp;</td>
    		<td align="center" class="heading"><strong>Col 1</strong></td>
    		<td align="center" class="heading"><strong>Col 2</strong></td>
    		<td align="center" class="heading"><strong>Col 3</strong></td>
    	</tr><tr>
    		<td align="left" class="sideHeading"><strong>Row 1</strong></td>
    		<td align="center" class="data">Data 1-1</td>
    		<td align="center" class="data">Data 1-2</td>
    		<td align="center" class="data">Data 1-3</td>
    	</tr><tr>
    		<td align="left" class="sideHeading"><strong>Row 2</strong></td>
    		<td align="center" class="data">Data 2-1</td>
    		<td align="center" class="data">Data 2-2</td>
    		<td align="center" class="data">Data 2-3</td>
    	</tr><tr>
    		<td align="left" class="sideHeading"><strong>Row 3</strong></td>
    		<td align="center" class="data">Data 3-1</td>
    		<td align="center" class="data">Data 3-2</td>
    		<td align="center" class="data">Data 3-3</td>
    	</tr>
    </table>
    Which is really bad, but you'll see nonsense like that all over the Internet from the people who slap a modern HTML 4 doctype on their HTML 3.2.

    So what's wrong with that? NONE of the classes should even be neccessary, or the align attributes, or the strong tags for that matter! This is because there are tags for tables called TH and CAPTION... as well as the grouping tags THEAD and TBODY (there's also TFOOT, but I advise against it's use as it's unreliable)... even the non-breaking space isn't needed since you could just say empty-cells:show;

    Written properly, even under HTML 3.2 the markup should be more like this:

    Code:
    <table cellspacing="4" class="myTable">
    	<caption>Table Title</caption>
    	<thead>
    		<tr>
    			<td></td>
    			<th>Col 1</th>
    			<th>Col 2</th>
    			<th>Col 3</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<th>Row 1</th>
    			<td>Data 1-1</td>
    			<td>Data 1-2</td>
    			<td>Data 1-3</td>
    		</tr>
    		<tr>
    			<th>Row 2</th>
    			<td>Data 2-1</td>
    			<td>Data 2-2</td>
    			<td>Data 2-3</td>
    		</tr>
    		<tr>
    			<th>Row 3</th>
    			<td>Data 3-1</td>
    			<td>Data 3-2</td>
    			<td>Data 3-3</td>
    		</tr>
    	</tbody>
    </table>
    ... and we could ditch the cellspacing if FF and IE weren't total idiots about the supporting border-spacing property properly! (Yeah!!! WOHHOO!!! add all that CSS3 when CSS2 doesn't even work right!)

    It's part of why I often say the problem with tables in people's code isn't always the use of tables so much as many people programming them are unaware of TH, CAPTION, THEAD and TBODY... or an understanding of specificity, semantics or inheritance.

  6. #31
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Noon,
    Why I resort to 3 column is because the user wants it that way if the form is too length with many input to be done. So they dont want to keep scrolling up and down. Well you know different users have different taste.
    having designed a lot of input forms in my time, starting from dos days, in order to ensure a safe way for the user to get correct processing results, the best way is to show less not more.

    yes, you can cram all the info in one screen, but that will be tiring and overwhelming.

    if scrolling is what scares you, you can make tabs or screens. it's easier for the user to follow a vertical logic and it's easier for him to overlook horizontally strung info.

    trust me, less is more in this case.

  7. #32
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Shadow,
    Thank you for you information. So if I use your table method then how can I get the styling done I dont see you apply any of the css into it? So about the arrangement first I have one div say is left then div center and then div right. So just put the div or must I do something with the float etc settings.

  8. #33
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Noonnope,
    Any good sample describing your tab method and representing the data grid? Thank you.

  9. #34
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Noonnope,
    Any good sample describing your tab method and representing the data grid? Thank you.
    i'd be happy too

    the basic concept behind it is the use of anchors paired up with other elements' id attribute.

    it can be done only by css or combined with js also.

    i'm a at work now, but in a few hours i will use your page http://183.78.169.56/test/addClient.php and make an example with tabs.

  10. #35
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i tried. i mean i tried to revamp your tables markup but gone crazy and had to drop that. you have </div> appearing out of the blue. you have a whole lot of wrongs going on. so i just had to give up. sorry.

    you'll have to manage that by your own, rewriting a decent markup for your page. if you manage to do so, i'll be more than happy to revisit this matter then.


    but i did manage to somewhat use your markup to demonstrate tabs. it's crude and simple but you'll get the idea.

    addClient.html
    HTML Code:
    <html><head>
      <title>Get rid of tables, please!</title>
      <link rel="stylesheet" type="text/css" href="my1.css" media="all"> 
    </head><body>
    
    <div id="main"> 
      <div id=logo>
        <table width=1000>
          <tr>
            <td width=300><img src="images/logo.html"></td>
            <td width=350 align=center><label class=description for=element_1>Admin Page</label></td>
            <td width=350 align=right></td>	
          </tr>
          </table>
        </div>
    
        <div id="nav"> 
          <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Solutions</a></li>
          <li><a href="#">Customer</a></li>
          <li><a href="#addclient">Add Client</a></li>
          <li><a href="#clients">Clients</a></li>
          </ul>
        </div> 
    
        <div id="tabs">
          <h2 id="addclient" class="form_desicription">AddClient</h2>
    
          <table id="tab1">
          <tr>
            <td width=350 valign="top">
            
              <table>
                <tr>
                  <td>				
                  <label class=description for=element_1>Name<font color="red">*</font></label> 
                  </td>
                  <td>
                  <input class="text"  id="clientName" name="clientName" value="">  
                  </td>
                </tr>
                
                <tr>
                  <td><p class=error id="clientNameError" ></p></td>
                  <td></td>
                </tr>
    
                <tr>
                <td>				
                  <label class="description">Contact Person<font color="red">*</font></label>
                  </td>
                  <td>
                  <input class="text" id="clientContactPerson" name="clientContactPerson" value=""> 
                  </td>
                </tr>	
                <tr>
                  <td><p class=error id="clientContactPersonError" ></p></td>
                  <td></td>
                </tr>
              </table>
            
            </td>	
            
            <td width=350 valign="top">		
              <table>	
                <tr>
                <td>				
                <label class=description for=element_1>Address<font color="red">*</font></label> 
                </td>
                <td>
                <input class="text" id="clientAddress" name="clientAddress" value=""> 	  
                </td>
                </tr>	
                <tr>
                <td><p class=error id="clientAddressError" ></p></td>
                <td></td>
                </tr>
    
                <tr>
                <td>				
                <label class=description for=element_1>Contact Number<font color="red">*</font></label> 
                </td>
                <td>
                <input class="text" id="clientContactNumber" name="clientContactNumber" value=""> 	  
                </td>
                </tr>	
                <tr>
                <td><p class=error id="clientContactNumberError" ></p></td>
                <td></td>
                </tr>
    
                <tr>
                <td>		
                  <input type=hidden value= name=clientID>	
                  <input type=hidden value= name=editVal>	
                  <input class="buttons" type="Submit" name="Add" value="Add">
                </td>
                <td><input class="buttons" type="Reset" name="Reset" value="Reset" onclick="location.href='addClient.php'">
                </td>
                </tr>	
              </table>
            </td>
          </table>
     
          <h2 id="clients" class="form_desicription">Clients</h2>
          
            <table id="tab2">
            <tr id="gridHeader">
              <td width="5&#37;">No.</td>                
              <td width="20%">Name</td>               
              <td width="10%">Contact Person</td>
              <td width="10%">Contact Number</td>
              <td width="10%">Edit</td>
              <td width="10%">Delete</td>
            </tr>
    
            <tr id='gridRow'>
              <td>1</td>
              <td>test1</td>
              <td>wessss</td>
              <td>017</td>
              <td><a href="addClient4204.html?editVal=1"><img src="images/editIcon.gif" alt="Edit Client" width="16" height="16" border="0"></a></td>
              <td> <a href="addClient589e.html?deleteVal=1"><img src="images/deleteIcon.gif" alt="Edit Client" width="16" height="16" border="0"></a></td>
            </tr>
            
            <tr id='gridRow'>
              <td>2</td>
              <td> test2</td>
              <td> mr</td>
              <td> 017</td>
              <td> <a href="addClient9bbb.html?editVal=8"><img src="images/editIcon.gif" alt="Edit Client" width="16" height="16" border="0"></a></td>
              <td> <a href="addClient86c2.html?deleteVal=8"><img src="images/deleteIcon.gif" alt="Edit Client" width="16" height="16" border="0"></a></td>
            </tr>
            
            <tr id='gridRow'>
              <td >3</td>
              <td> test3</td>
              <td> mr</td>
              <td> 018</td>
              <td> <a href="addClient2023.html?editVal=6"><img src="images/editIcon.gif" alt="Edit Client" width="16" height="16" border="0"></a></td>
              <td> <a href="addClient24fd.html?deleteVal=6"><img src="images/deleteIcon.gif" alt="Edit Client" width="16" height="16" border="0"></a></td>
            </tr>
            
            <tr id='gridRow'>
              <td >4</td>
              <td> test4</td>
              <td> mobil</td>
              <td> 017</td>
              <td> <a href="addClient543a.html?editVal=5"><img src="images/editIcon.gif" alt="Edit Client" width="16" height="16" border="0"></a></td>
              <td> <a href="addClient71fd.html?deleteVal=5"><img src="images/deleteIcon.gif" alt="Edit Client" width="16" height="16" border="0"></a></td>
            </tr>
            
            <tr>
              <form id="form2" name="form2" method="post" action="#">
              <td colspan="5" id="gridHeader">
                <label>
                <span class="style17">Search</span> 
                <input type="hidden" name="driverID" id="driverID">
                <input type="text" name="searchcm" id="searchcm"  onKeyPress="checkEnter(event)">
              </label> 
    
              </td>
              <td width="11%" bordercolor="#999999" id="gridHeader" >
                <div align="center">
                  <select onchange="this.form.submit();"  name="selectpage" id="selectpage">
                    <option  selected="selected"  value="1">1 </option>
                  </select>
                </div>
              </td>
            </tr>
            </table>
        </div>
    
      <div id="nav"> 
        <ul>
        <li><a href="#">Main Page</a></li>
        <li><a href="#">Print Page</a></li>
        <li><a href="#">Log Out</a></li>
        </ul>
      </div> 
    
    </div>
    
    </body></html>

    my1.css
    Code CSS:
    * { 
    padding:0px; 
    margin:0px; 
    } 
    body 
    { 
    background:#ffffff; 
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; 
    font-size:small; 
    margin:8px 0 16px; 
    margin: 0; 
    padding:0; 
     
    } 
     
    #nav 
    { 
    background-color:#ccc; 
    height:19px; 
    width:1024px; 
    font-family:Calibri;
    }
     
    #nav ul {
    list-style-type: none;
    }
     
    #nav li {
        float: left; position: relative;
    }
     
    #nav li a {
    padding-right: 20px;
    padding-left: 15px;
    display: block;
    line-height: 20px;
    text-decoration: none;
    font-family: Calibri;
    font-size: 15px;
    color: #371C1C;
    }
     
    #nav a:hover,
    #nav a:focus {
        text-decoration:none;
    }
     
    h2.form_desicription
    {
    	clear:left;
    	font-family: Calibri;
      font-size: 18px;
      color: #371C1C;
     
    }
     
     
    input.text
    {
    	background:#fff url(../images/shadow.html) repeat-x top;
    	border-bottom:1px solid #ddd;
    	border-left:1px solid #c3c3c3;
    	border-right:1px solid #c3c3c3;
    	border-top:1px solid #7c7c7c;
    	color:#333;
    	font-family: Calibri;
    	font-size:15px;
    	font-weight:700;
    	line-height:normal;
    	padding:2px 0;
    }
     
    label.description
    {
    	border:none;
    	color:#222;
    	display:block;
    	font-family: Calibri;
    	font-size:15px;
    	font-weight:700;
    	line-height:150%;
    	padding:0 0 1px;
    }
     
    input.file
    {
    	color:#333;
    	font-family: Calibri;
    	font-size:13px;
    	font-weight:700;
    	line-height:150%;
    	margin:0;
    	padding:2px 0;
    }
     
    select.select
    {
    	color:#333;
    	font-family: Calibri;
    	font-size:15px;
    	font-weight:700;
    	margin:1px 0;
    	padding:1px 0 0;
    	background:#fff url(../images/shadow.html) repeat-x top;
    	border-bottom:1px solid #ddd;
    	border-left:1px solid #c3c3c3;
    	border-right:1px solid #c3c3c3;
    	border-top:1px solid #7c7c7c;
    }
     
    textarea.textarea
    {
    	background:#fff url(../images/shadow.html) repeat-x top;
    	border-bottom:1px solid #ddd;
    	border-left:1px solid #c3c3c3;
    	border-right:1px solid #c3c3c3;
    	border-top:1px solid #7c7c7c;
    	color:#333;
    	font-family: Calibri;
    	font-size:15px;
    	font-weight:700;
    	margin:0;
    	width:99%;
    }
     
    input.button_text
    {
    	overflow:visible;
    	padding:0 7px;
    	width:auto;
    }
     
    .buttons input
    {
    	font-family: Calibri;
    	font-size:13px;
    	font-weight:700;
    	margin-right:5px;
    }
     
    span.required
    {
    	border:none;
    	color:red;
    	display:block;
    	font-family: Calibri;
    	font-size:15px;
    	font-weight:700;
    	line-height:150%;
    	padding:0 0 1px;
    }
     
    #gridHeader 
    { 
    background-color:#ccc; 
    font-size:12px;
    font-color:#ffffff;
    font-family:Calibri;
    }
     
    #gridRow 
    { 
    background-color:#EFEEEE; 
    font-size:12px;
    font-family:Calibri;
    }
     
    p.error
    {
    	border:none;
    	color:red;
    	display:block;
    	font-family: Calibri;
    	font-size:12px;
    	font-weight:700;
    	line-height:150%;
    	padding:0 0 1px;
    }
    span.clearSearch
    {
    	font-family: Calibri;
    	font-size:12px;
    	font-weight:700;
    	line-height:150%;
    }
    span.statusOk
    {
    	color: blue;
    	font-family: Calibri;
    	font-size:14px;
    	font-weight:700;
    	line-height:150%;
     
    }
    span.statusFailed
    {
    	color:red;
    	font-family: Calibri;
    	font-size:14px;
    	font-weight:700;
    	line-height:150%;
     
    }
     
    #tabs 
    {
      height:200px;
      overflow:hidden;
    }
     
    #tab1, #tab2
    {
      padding-bottom:100px;
    }

  11. #36
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Noonnope,
    Can you tell me which is the </div> appearing out of the blue? I would like to research further on it. I tried your code in the above I fail to see the tab? Where it suppose to appear ?

  12. #37
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <td> 
     <a href="addClient4204.html?editVal=1">
      <img src="images/editIcon.gif" alt="Edit Client" width="16" height="16" border="0">
     </a>
    </div>
    </td>

    try clicking Add Client, Clients links, see what happens.



Bookmarks

Posting Permissions

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