473,320 Members | 1,914 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Indent text in the middle of a line

Hi all,

I'm trying to figure out how to indent text in the middle of a line.

For example:

Name: John Smith
Addres: 1234 Main St.
City: New York, NY

The only way I have found that I can do this is with the <pre> tag,
but then I can't make any links inside the tag. I need to be able to
clink on content and get something else. For example: click on the
words "John Smith" and to John Smith's website.

Because of this the <pre> tag won't work. Can anyone think of a way
that I can get my text to line up the way I need it to?

Thanks to all,
Tammy
Jul 23 '05 #1
14 6126
rf
Tammy wrote:
Hi all,
Er, G'day.
I'm trying to figure out how to indent text in the middle of a line.

For example:

Name: John Smith
Addres: 1234 Main St.
City: New York, NY


This looks like tabular data to me. Colums, 2, description and value. Rows,
3, line items of an address.

Use a table.

--
Cheers
Richard.
Jul 23 '05 #2
rf wrote:
Tammy wrote:
Name: John Smith
Addres: 1234 Main St.
City: New York, NY

Use a table.


I agree, table is best here. There's another tricky way which uses
absolute positioning, for those cases where a table would not be
semantically appropriate.

<div id="columns">
<div class="row">
<span class="item1">Tic</span>
<span class="item2">Tac</span>
<span class="item3">Toe</span>
</div>
<div class="row">
<span class="item1">Tac</span>
<span class="item2">Toe</span>
<span class="item3">Tic</span>
</div>
<div class="row">
<span class="item1">Toe</span>
<span class="item2">Tic</span>
<span class="item3">Tac</span>
</div>
</div>

with CSS:

#columns .row {position: relative; height: 1.5em;}
#columns .item1, #columns .item2, #columns .item3 {position: absolute;
top: 0; left: 0;}
#columns .item2 {left: 8em;}
#columns .item3 {left: 16em;}

Jul 23 '05 #3
ta*****@yahoo.com (Tammy) wrote:
I'm trying to figure out how to indent text in the middle of a line.
As rf wrote, it's tabular data and best marked up as a table.
The only way I have found that I can do this is with the <pre> tag,
but then I can't make any links inside the tag.


Actually you _can_ have links inside a <pre> element. It just gets
awkward, since you need to type in the data as such, to see that things
line up, then add the <a ...> and </a> markup, without caring too much
about having the stuff odd-looking in the HTML source.

Sometimes links inside <pre> make sense. For example, then presenting a
sample of a computer source program, <pre> is usually the practical
solution, and you might wish to make some words in the program code
links to explanations of functions, etc.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Jul 23 '05 #4
Neal wrote:
rf wrote:
Tammy wrote:
Name: John Smith
Addres: 1234 Main St.
City: New York, NY


Use a table.

I agree, table is best here. There's another tricky way which uses
absolute positioning, for those cases where a table would not be
semantically appropriate.

<div id="columns">
<div class="row">
<span class="item1">Tic</span>
<span class="item2">Tac</span>
<span class="item3">Toe</span>
</div>
<div class="row">
<span class="item1">Tac</span>
<span class="item2">Toe</span>
<span class="item3">Tic</span>
</div>
<div class="row">
<span class="item1">Toe</span>
<span class="item2">Tic</span>
<span class="item3">Tac</span>
</div>
</div>

with CSS:

#columns .row {position: relative; height: 1.5em;}
#columns .item1, #columns .item2, #columns .item3 {position: absolute;
top: 0; left: 0;}
#columns .item2 {left: 8em;}
#columns .item3 {left: 16em;}


A much simpler way is to:
1. Place the left side items into a div and float it left.
2. Place the right side items into a div and give it a margin-left value.

--
Gus
Jul 23 '05 #5
Gus Richter wrote:
Neal wrote:
I agree, table is best here. There's another tricky way which uses
absolute positioning, for those cases where a table would not be
semantically appropriate.


A much simpler way is to:
1. Place the left side items into a div and float it left.
2. Place the right side items into a div and give it a margin-left value.


The linearization would be different. Depends on what you're after.

Jul 23 '05 #6
Neal wrote:
Gus Richter wrote:
Neal wrote:
I agree, table is best here. There's another tricky way which uses
absolute positioning, for those cases where a table would not be
semantically appropriate.

A much simpler way is to:
1. Place the left side items into a div and float it left.
2. Place the right side items into a div and give it a margin-left value.

The linearization would be different.


What do you mean by that? It looks perfect to me. Just like two tabular
columns. Linear in all aspects; horizontally and vertically.
Depends on what you're after.


--
Gus
Jul 23 '05 #7
On Thu, 04 Nov 2004 20:54:12 -0500, Gus Richter
<gu********@netscape.net> declared in
comp.infosystems.www.authoring.html:
What do you mean by that? It looks perfect to me. Just like two tabular
columns. Linear in all aspects; horizontally and vertically.


Only in user agents that support CSS. In a user agent that doesn't
support CSS, or has CSS disabled, it will linearise like this:

Name:
Address:
City:

John Smith
1234 Main St.
New York, NY

--
Mark Parnell
http://www.clarkecomputers.com.au
Jul 23 '05 #8
Gus Richter wrote:
Neal wrote:
The linearization would be different.

What do you mean by that?


The degraded order of the items.
Jul 23 '05 #9
Mark Parnell wrote:
On Thu, 04 Nov 2004 20:54:12 -0500, Gus Richter
<gu********@netscape.net> declared in
comp.infosystems.www.authoring.html:

What do you mean by that? It looks perfect to me. Just like two tabular
columns. Linear in all aspects; horizontally and vertically.

Only in user agents that support CSS. In a user agent that doesn't
support CSS, or has CSS disabled, it will linearise like this:

Name:
Address:
City:

John Smith
1234 Main St.
New York, NY


Thank you.

--
Gus
Jul 23 '05 #10

"Mark Parnell" <we*******@clarkecomputers.com.au> wrote in message
news:15******************************@40tude.net.. .
On Thu, 04 Nov 2004 20:54:12 -0500, Gus Richter
<gu********@netscape.net> declared in
comp.infosystems.www.authoring.html:
What do you mean by that? It looks perfect to me. Just like two tabular
columns. Linear in all aspects; horizontally and vertically.


Only in user agents that support CSS. In a user agent that doesn't
support CSS, or has CSS disabled, it will linearise like this:

Name:
Address:
City:

John Smith
1234 Main St.
New York, NY


Also, it will break the instant any of the lines wraps.

Jul 23 '05 #11
On Thu, 04 Nov 2004 15:31:29 -0500, Gus Richter
<gu********@netscape.net> wrote:
Neal wrote:
rf wrote:
Tammy wrote:

Name: John Smith
Addres: 1234 Main St.
City: New York, NY

Use a table.

I agree, table is best here. There's another tricky way which uses
absolute positioning ...


A much simpler way is to:
1. Place the left side items into a div and float it left.
2. Place the right side items into a div and give it a margin-left value.


Simple, but not reliable. If the window width / text size combination
cause wrapping [1], the elements no longer line up. I'll second (third?)
the table.
[1] And before you claim an address wouldn't wrap in any normal window,
I'll point out that there's a street not far from me called the
Burgemeester Lefebvre de Montignylaan.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 23 '05 #12
I want to thank everyone for their input. It is greatly appreciated.
I have gone with the table option it is the easiest and for me, being
a newbie to html, it gives me a chance to work with tables.

Now I'm off to a new question....
.... but that's for a different posting.

:)

Thanks again,
Tammy
Jul 23 '05 #13
"Harlan Messinger" <h.*********@comcast.net> wrote in
news:2v*************@uni-berlin.de:
Also, it will break the instant any of the lines wraps.


Is this supposed to be a pun? ;-)
Jul 23 '05 #14
Neal <ne*****@yahoo.com> wrote in
news:op**************@news.individual.net:
Gus Richter wrote:
Neal wrote:
I agree, table is best here. There's another tricky way which uses
absolute positioning, for those cases where a table would not be
semantically appropriate.


A much simpler way is to:
1. Place the left side items into a div and float it left.
2. Place the right side items into a div and give it a margin-left
value.


The linearization would be different. Depends on what you're after.


Alternately, float the items to the left in the linearly happy order, with
clear:left applied to left-column elements. Linearizes nicely, wraps
nicely.
Jul 23 '05 #15

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

699
by: mike420 | last post by:
I think everyone who used Python will agree that its syntax is the best thing going for it. It is very readable and easy for everyone to learn. But, Python does not a have very good macro...
4
by: Werner Partner | last post by:
I'm looking for something like that: http://www.sonoptikon.de/praxis-mt/test.php The text should have a certain indent, and from the left border should come a "marker" which goes over the text...
1
by: Vincent | last post by:
I noticed an irritating behaviour of the text-indent property and I wonder if I'm the only one to feel this way about it: it seems that text-indent applies even to floated elements. Although this...
22
by: Firas | last post by:
Hi, Is there a CSSish way to indent a paragraph except for the first line? I tried p:first-line { text-indent: 0em; }
1
by: Christopher P. Winter | last post by:
I'm seeing some unexpected behavior with Text-indent, as shown on this page: http://www.chris-winter.com/Digressions/HP_Kayak/My_Kayak.html I set up the following style rules for footnotes: ...
8
by: tintagel | last post by:
Hi everyone, I've just joined your group! I'm pretty new to HTML etc. Here's my problem: I'm attached to the idea of keeping content separate from formatting information, so I like putting...
2
by: Chris Seidel | last post by:
Hi, I have a submit-element with a background-image of 16x16 px and the following style: background-image: url("ok.gif"); background-repeat: no-repeat; text-indent: 20 px; The problem is,...
1
by: tshad | last post by:
In VS 2008, I have in my footer a button, link and 2 images. But they are not displaying in the vertical middle of the row, even though I have it set that way: <asp:Button ID="AddQuestion"...
14
by: Jeff | last post by:
Lets say we have a paragraph that wraps several lines. I'd like to indent the first-line a bit. The first-line pseudo class sprang to mind, but you can't set a left padding there. Perhaps...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.