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 9 of 9
  1. #1
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts

    Question Is it possible to control the alignment of <pre>?

    Hi friends,

    I have a user-profile page,which may contains information like someone's Name, Email, Gender etc.

    I would like to keep this page also tableless.
    (Have some sort of confusion as table rows can easily display them and all are saying about removing tables unless its a tabular item. I'm not sure under which category this would likely to fall. Expecting some advice... )

    Anyway now I'm trying to display then in divs.
    A sample code looks like
    Code:
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    .row {
      padding-top: 10px;
      vertical-align:middle;
      border:1px solid red;
      }
    
    span.label {
      float:left;
      width: 250px;
      text-align: right;
      margin-right:10px;
      }
    
      pre{
      font-size:16px;
      }
    
    </style>
    </head>
    <body >
    	<div id="wrap">
    		<div class="row"><span class="label">Email:</span><span class="value">something@something.com</span></div>
    		  <div class="row" ><span class="label">Contact Address:</span> 
                               <pre>House No,
    				  Streat,
    				  PB No,
    				  State
    				  ...
    				  </pre>
    		  </div>
    		<div class="row">
    			These are some notes!<br/>
    			These are some notes!<br/>
    			These are some notes!<br/>
    		</div>
    
    	</div>
          
    </body>
    Here, I want to keep the address(received at the time of registration from a textarea and stored in DB) inside a <pre></pre> since the user should get his address as he typed, and it should be aligned well in a row


    The corresponding php code is just
    Code:
    <pre><? print $Result[0]['address']; ?></pre>
    Any help/advice would be appreciated.
    Last edited by abduraooft; 07-16-2007 at 09:46 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Maybe you should use a table? The data appears to be tabular.

    Example: http://www.jsgp.us/demos/CF118830.html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en-Latn-US">
    	<head>
    
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>Demo CF118830</title>
    		<meta name="Author" content="Patrick Garies">
    		<meta name="Created" content="2007-07-16">
    		<meta name="Revised" content="2007-07-16">
    		<style type="text/css">
    			* { margin: 0; padding: 0; }
    			html { padding: 1em; background: white; color: black; font: 16px/1.2 sans-serif; }
    			table, caption { margin: 0 auto; } /* Application to the caption element counters a Firefox bug. */
    			caption, th, td { padding: 0.5em; line-height: 1; vertical-align: top; }
    			caption, th { font-weight: bolder; }
    			th { background: beige; text-align: right; }
    			td { background: #f7f7ee; }
    			address { font-style: normal; }
    			address span { display: block; }
    		</style>
    
    	</head>
    	<body>
    
    		<table>
    			<caption>United Nations Contact Information</caption>
    			<tbody>
    				<tr>
    					<th scope="row">Electronic Mailing Address</th>
    					<td>
    						<address>inquiries@un.org</address>
    					</td>
    				</tr>
    				<tr>
    					<th scope="row">Physical Mailing Address</th>
    					<td>
    						<address>
    							<span>United Nations Headquarters</span>
    							<span>First Avenue at 46th Street</span>
    							<span>New York, New York 10017</span>
    						</address>
    					</td>
    				</tr>
    			</tbody>
    		</table>
    
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Thanks Arbitrator,

    I'll consider this as an advice. Now I can enclose my block of data having address information inside a <pre> without any problems in alignment.

    I had been using a lot of tables allover my page and now I think twice on using a table anywhere in my page. In fact Aero's signature influenced me deeply.
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Why Tables for Layout is Stupid?


    regards,
    art
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,929
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    This “tables are bad and CSS is good” talk is distracting from one important fact: only tables for layout are stupid. Tables by themselves are still allowed and actually the best and only option to display real tabular data. And they can be styled with CSS, too, so it’s a little wrong to say either tables or CSS because either one without the other one wouldn’t get a desired result.

    Always think of how the page would look like without styles. If it doesn’t make sense then the markup is wrong.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote Originally Posted by VIPStephan View Post
    This “tables are bad and CSS is good” talk is distracting from one important fact: only tables for layout are stupid.
    Could you please comment on using table inside a form having a number of controls to display, labels at left and control at right? Is it tabular or laying out different html elements with help of a table?

    thanks,
    art
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,929
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Well, there’s room for discussion but I would say no, this isn’t tabular data. You can use Label elements and inputs, put in a list or divs, and then you can style those elements to your desire. ALA has a nice article on that subject.

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by abduraooft View Post
    Could you please comment on using table inside a form having a number of controls to display, labels at left and control at right? Is it tabular or laying out different html elements with help of a table?
    I would also say that laying out a form via a table is not correct. While it’s true that you are associating a label with a form control, you are not associating (tabular) data; form controls are an input method, not data. Semantic association of a label to a form control is already taken care of by the for attribute of the label element or by wrapping the label element around a form control element.

    Quote Originally Posted by VIPStephan View Post
    ALA has a nice article on that subject.
    Interesting article, but it’s a bit dated. It seems to work fine in the latest versions of Firefox (2), Internet Explorer (7), and Safari (3) (beta), but it looks messy in Opera 9.21.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Thanks guys..

    Now shall I ask one more question..

    I know the open-source products like phpBB, Oscommerce are built with contributions from allover the world, but I think they all are excessively depend on tables for layout. This forum also has a lot of tables, especially on the left hand side of User-CP.
    I didn’t find any forum or area which always talks about the web semantics as like here (I love and agree).

    Please help me to conclude …(Any scope to say that they all are displaying tabular data?)

    regards,
    art.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by abduraooft View Post
    I know the open-source products like phpBB, Oscommerce are built with contributions from allover the world, but I think they all are excessively depend on tables for layout. This forum also has a lot of tables, especially on the left hand side of User-CP.
    I’m not sure what your point is here. I don’t believe that vBulletin or other non‐semantic table‐based forums are open source. If your contention is that even open source products do not use semantic code, I wouldn’t be surprised if you were correct.

    Quote Originally Posted by abduraooft View Post
    Please help me to conclude …(Any scope to say that they all are displaying tabular data?)
    It should be possible to construct a very simple table‐based forum while retaining semantically correct code. I don’t think that you could do it with a layout like that of vBulletin though since correctly written tables will have a pretty constrained layout. In particular, all of the posts would be contained within a single table, all of the information and links about the author would need to be located in one place (vBulletin has them on the left, bottom (signature), and top right), and the layout would probably require nested tables or lists.

    You’d have to go further than layout to get a semantic forum though. Additionally, you would need to offer access to HTML or HTML‐equivalent markup. For example, in most forums, it’s not possible to use the p, em, strong, code, q, blockquote, or kbd elements directly or indirectly. That’s not even considering semantic attributes such as lang or alt.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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