...

View Full Version : Is it possible to control the alignment of <pre>?



abduraooft
07-15-2007, 06:26 PM
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


<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
<pre><? print $Result[0]['address']; ?></pre>

Any help/advice would be appreciated.

Arbitrator
07-16-2007, 10:15 AM
Maybe you should use a table? The data appears to be tabular.

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


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

abduraooft
07-16-2007, 10:53 AM
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.

Why Tables for Layout is Stupid?;)

regards,
art

VIPStephan
07-16-2007, 10:59 AM
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.

abduraooft
07-16-2007, 11:24 AM
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

VIPStephan
07-16-2007, 12:16 PM
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 (http://www.alistapart.com/articles/prettyaccessibleforms) on that subject.

Arbitrator
07-17-2007, 01:20 AM
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.


ALA has a nice article (http://www.alistapart.com/articles/prettyaccessibleforms) 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.

abduraooft
07-17-2007, 08:49 AM
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.

Arbitrator
07-18-2007, 02:28 AM
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.


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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum