473,839 Members | 1,447 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

1 left justified string, 1 centered 1 right justificed on the same line?

I want to (on one line) show something like the following

-------------------------------------------------------
left centered right
-------------------------------------------------------

If I use <hrto draw the lines, then there is too much space between the
line and the text

If I use a table, then how do I get the right-justified string to be at the
right margin of the page and the centered string to be in the center? Also,
how do I remove the vertical bars in the table?

Thanks.

Jul 20 '06 #1
4 2666
Austin Powers wrote:
I want to (on one line) show something like the following

-------------------------------------------------------
left centered right
-------------------------------------------------------

If I use <hrto draw the lines, then there is too much space between the
line and the text
(Untested idea coming up...)
Use a wrapper <divto create the border lines.
Use three <p>s, all floated left, width:33%. Set the margin and padding
to taste.
p1: text-align: left;
p2: text-align: center;
p3: text-align: right;

<div id="one-line-wrapper">
<p class="p1">left </p>
<p class="p2">cent er</p>
<p class="p3">righ t</p>
</div>

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jul 20 '06 #2
Jim Moe wrote:
Use a wrapper <divto create the border lines.
Use three <p>s, all floated left, width:33%. Set the margin and padding
to taste.
I forgot that the div collapses to zero height because there is no
content, it is all floated. You can
- use the clearfix solution
<http://www.positionise verything.net/easyclearing.ht ml>
- or, set the div to a fixed height (using ems)
- or, some other way

Sample code (actually works) -
HTML:
<div id="one-line-wrapper">
<p class="p1">Left text</p>
<p class="p2">Cent er text</p>
<p class="p3">Righ t text</p>
</div>

CSS:
#one-line-wrapper {
border-top: 1px solid #789;
border-bottom: 1px solid #789;
height: 2em;
}
#one-line-wrapper p {
float: left;
width: 30%;
border: 1px solid #ddd;
margin: 0.2em 1%;
}
#one-line-wrapper p.p1 { text-align: left; }
#one-line-wrapper p.p2 { text-align: center; }
#one-line-wrapper p.p3 { text-align: right; }

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jul 20 '06 #3
Jim Moe wrote:
Austin Powers wrote:
>I want to (on one line) show something like the following

-------------------------------------------------------
left centered right
-------------------------------------------------------

If I use <hrto draw the lines, then there is too much space between the
line and the text
(Untested idea coming up...)
Use a wrapper <divto create the border lines.
Use three <p>s, all floated left, width:33%. Set the margin and padding
to taste.
As you point out in a subsequent post, this fails because the wrapper
div has no content.

Perhaps something like this instead with alignment in each of the <p>s
self declared (more appropriate class names for left and right needed)

___styling____

div.wrapper { border: #000 dashed; border-width: 1px 0; }
div.wrapper p { margin: 1em 0; }/*IE margin collapse fix;*/
div.wrapper p.left { float:left;widt h:33%; }
div.wrapper p.right { float:right;wid th:33%; }

___markup_____

<div class="wrapper" >
<p class="left">le ft text</p>
<p class="right">r ight text</p>
<p>center text</p>

Louise
Jul 21 '06 #4
On Thu, 20 Jul 2006 17:42:11 GMT, "Austin Powers" <au**********@p obox.com>
wrote:
>I want to (on one line) show something like the following

-------------------------------------------------------
left centered right
-------------------------------------------------------

If I use <hrto draw the lines, then there is too much space between the
line and the text

If I use a table, then how do I get the right-justified string to be at the
right margin of the page and the centered string to be in the center? Also,
how do I remove the vertical bars in the table?

Thanks.

OK, first of all, I assume you want the horizontal lines running all the way
across the page. I'd do it like this:

CSS:
TD { padding: 0.25em; border-top: 2px Solid Black;
Border-bottom: 2px Solid Black }

TD.LH { Text-align: Left }

TD.CTR { Text-align: Center }

TD.RH { Text-align: Right }

HTML:
<TABLE CellSpacing=0 CellPadding=0>
<TR>
<TD Class="LH">Left y stuff</TD>
<TD Class="CTR">Cen tral stuff</TD>
<TD Class="RH">Righ ty stuff</TD>
</TR>
</TABLE>

You can adjust the CSS padding to control the separation of the lines from
the text. Maybe choose different values for top/bottom and right/left
padding.

Of course, if you're going to do this with more than one line, you'll have to
be a bit more clever with the borders, else you'll get lines doubling up.

Or else use a separate table for each line.
Jul 24 '06 #5

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

Similar topics

7
22263
by: Dave | last post by:
I've written a perl program to manipulate data formats so that I can import data from an estimating software program to an accounting program. Works just fine, with the following caveat: The record identifier field is numeric in the estimating program but it can be (and is interpreted as) a string in the accounting software. Hence, when I bring up project data in the accounting software, my items look like so: 10 100 110
8
1870
by: Tyler | last post by:
http://people.tamu.edu/~tmr8907 From the heading called SUMMARY on I would like for this page to be left aligned.
4
4615
by: Alex Bell | last post by:
I am developing at http://www.members.iinet.net.au/~abell1/test/index.htm with city.css at http://www.members.iinet.net.au/~abell1/test/city.css. Both validate. In index.htm there is a block of text that I want to be centered and left justified. I have used this technique <p class="indent"> 11 Frederick Street<br /> Launceston<br />
5
1870
by: Wilhelm Kutting | last post by:
Hi i want to use the following layout: ----------------- | | | | Text line 1 | | | Text line 2 | image.jpg | | ... | | | | | |
2
5714
by: sylvian stone | last post by:
Hi, I'm trying to do something that has always been easy with tables - namely use a three column layout, and above the main layout, show three images - one on the absolute left, one on the absolute right, and one in the middle. The one in the middle needs to be centered, as various browsers display slightly differently. However, using the CSS and code below, either the first image is not shown (IE) or the right image is shown below...
3
4547
by: Mark Urish | last post by:
I want to center-align the text in 2 Label controls, and I want the 1st char of their text to line up ------------------------------------------------------------------------------ label1.TextAlign = System.Drawing.ContentAlignment.MiddleCenter label2.TextAlign = System.Drawing.ContentAlignment.MiddleCenter label1.Text = "IDLE"; //4 char strin label2.Text = "RUN ";//4 char string, //but trailing space ignored and it is centered as thoug...
4
17630
by: Jason | last post by:
Is that possible? How? <td > <asp:Label ID="StartDateLabel" runat="server" Text="Start Date:"> <asp:imagebutton ID="Imagebutton1" width=18 Height=18 CommandName=SetDate imageUrl="../cal.jpg" runat=server /> </asp:Label> </td> <td >
0
1466
by: =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?= | last post by:
Hello, I was wondering whether it was possible to have left justified or center justified text under XSL:FO. From what I can see, it looks like text-align can take on the values of "left, center, right, justified". In such a context, how would it be possible to make text left justified. would we have to nest 2 blocks, one center aligned and one justified aligned? It seems to me like the last setting would override the previous one.
5
2221
by: Amir Michail | last post by:
Hi, I would like to center a logo between left and right floats with different widths. The issue is that the logo should be centered with respect to the window, not the area between the left and right floats. Is there an easy way to do this?
0
9856
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9698
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10914
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10299
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7834
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7022
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5684
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5872
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
4071
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.