How set 3 different text on line with different styles?

Hi all,

I should display 3 pieces of text as follows

¦5px¦ <style1>Text1 ¦8px¦ <style>Text2 <style3>Text3 ¦150px¦

Each Text must have its own style and each text have a specific
distance between each others and between the left and right border.

This the style-code:
----------------------------
div#sentiment1 { position: absolute; top: 30px; left: 10px; width:
200px; text-align: left; font: italic bold 25px Arial, sans-serif;
color: white; }

div#sentiment2 {position: relative; display: top: 30px; left: 8px;
width: 50px; text-align: left; font: italic bold 25px Arial, sans-
serif; color: red; }

div#sentiment3 {position: absolute; top: 30px; right: 0px; width:
250px; text-align: left; font: italic bold 25px Arial, sans-serif;
color: white; }

And this is the HTML
------------------------------

........

<div id="sentiment1">
May you and
</div>

<div id="sentiment2">
May
</div>

<div id="sentiment3">
May you and
</div>
...........

The first and the third are positioned correctly, BUT the 2nd will not
align between text1 and text3 (it is shifted somewhere in the page.

Does I'm doing wrong?

Thank you in advance for your suggestions,
Giovanni

In article
<c858f3fa-c9e9-4177-b3a3-d60ff0616e23 (AT) i7g2000prf (DOT) googlegroups.com

,
gundam.f0rtre55 (AT) bluebottle (DOT) com wrote:

Hi all,

I should display 3 pieces of text as follows

¦5px¦ <style1>Text1 ¦8px¦ <style>Text2 <style3>Text3 ¦150px¦

Each Text must have its own style and each text have a specific
distance between each others and between the left and right border.

This the style-code:
----------------------------
div#sentiment1 { position: absolute; top: 30px; left: 10px; width:
....

Does I'm doing wrong?

First you are sizing the fonts in pixels which will ruin
everything when the user does not have the text size you are
expecting (almost only IE makes it hard to change the text size
when they are specified in pixels). In most browsers the user can
change the text size and many users do.

So the first thing to consider is to abandon pixels as units and
use percentages or better still, em. You can then also size the
boxes the texts go into in ems so they grow and contract with the
font size. And transform your wish to have a specific distance
between text into one of a number of other things. Two come to
mind:

A specific px distance between boxes

An em distance between boxes

Want examples?

--
dorayme

On Mar 14, 1:42 am, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

In article
c858f3fa-c9e9-4177-b3a3-d60ff0616... (AT) i7g2000prf (DOT) googlegroups.com

,
gundam.f0rtr... (AT) bluebottle (DOT) com wrote:
Hi all,

I should display 3 pieces of text as follows

¦5px¦ <style1>Text1 ¦8px¦ <style>Text2 <style3>Text3 ¦150px¦

Each Text must have its own style and each text have a specific
distance between each others and between the left and right border.

This the style-code:
----------------------------
div#sentiment1 { position: absolute; top: 30px; left: 10px; width:

...

Does I'm doing wrong?

First you are sizing the fonts in pixels which will ruin
everything when the user does not have the text size you are
expecting (almost only IE makes it hard to change the text size
when they are specified in pixels). In most browsers the user can
change the text size and many users do.

So the first thing to consider is to abandon pixels as units and
use percentages or better still, em. You can then also size the
boxes the texts go into in ems so they grow and contract with the
font size. And transform your wish to have a specific distance
between text into one of a number of other things. Two come to
mind:

A specific px distance between boxes

An em distance between boxes

Want examples?

--
dorayme

Yes,
I'm especially interested in the problem how to keep the three strings
on one line. The text in the strings is in "em" not "px".
If you have an example it would help.

Thank you,
John

gundam.f0rtre55 (AT) bluebottle (DOT) com wrote:

On Mar 14, 1:42 am, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:
In article
c858f3fa-c9e9-4177-b3a3-d60ff0616... (AT) i7g2000prf (DOT) googlegroups.com

,
gundam.f0rtr... (AT) bluebottle (DOT) com wrote:
Hi all,

I should display 3 pieces of text as follows

¦5px¦ <style1>Text1 ¦8px¦ <style>Text2 <style3>Text3 ¦150px¦

Each Text must have its own style and each text have a specific
distance between each others and between the left and right border.

This the style-code:
----------------------------
div#sentiment1 { position: absolute; top: 30px; left: 10px; width:

...

Does I'm doing wrong?

First you are sizing the fonts in pixels which will ruin
everything when the user does not have the text size you are
expecting (almost only IE makes it hard to change the text size
when they are specified in pixels). In most browsers the user can
change the text size and many users do.

So the first thing to consider is to abandon pixels as units and
use percentages or better still, em. You can then also size the
boxes the texts go into in ems so they grow and contract with the
font size. And transform your wish to have a specific distance
between text into one of a number of other things. Two come to
mind:

A specific px distance between boxes

An em distance between boxes

Want examples?

--
dorayme

Yes,
I'm especially interested in the problem how to keep the three strings
on one line. The text in the strings is in "em" not "px".
If you have an example it would help.

Will this do:

<http://netweaver.com.au/alt/giovani.html>

?

--
dorayme

In article
<doraymeRidThis-5D39A5.16585714032008 (AT) news-vip (DOT) optusnet.com.au>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

http://netweaver.com.au/alt/giovani.html

or perhaps you are meaning more like:

<http://netweaver.com.au/alt/giovani2.html>

?

--
dorayme

In article
<doraymeRidThis-E6305F.17054914032008 (AT) news-vip (DOT) optusnet.com.au>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article
doraymeRidThis-5D39A5.16585714032008...ptusnet.com.au>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

http://netweaver.com.au/alt/giovani.html

or perhaps you are meaning more like:

http://netweaver.com.au/alt/giovani2.html

?

or perhaps you might like something with some hidden
sentimentality:

<http://netweaver.com.au/alt/giovani3.html>

--
dorayme

dorayme wrote:

In article
doraymeRidThis-E6305F.17054914032008...ptusnet.com.au>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article
doraymeRidThis-5D39A5.16585714032008...ptusnet.com.au>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

http://netweaver.com.au/alt/giovani.html
or perhaps you are meaning more like:

http://netweaver.com.au/alt/giovani2.html

?

or perhaps you might like something with some hidden
sentimentality:

http://netweaver.com.au/alt/giovani3.html

And don't forget my favorite: float left and right and allow the third
to flow between the two.

--
Gus

In article <u_adnRSTTt9izEbanZ2dnUVZ_v3inZ2d (AT) golden (DOT) net>,
Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

dorayme wrote:
In article
doraymeRidThis-E6305F.17054914032008...ptusnet.com.au>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article
doraymeRidThis-5D39A5.16585714032008...ptusnet.com.au>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

http://netweaver.com.au/alt/giovani.html
or perhaps you are meaning more like:

http://netweaver.com.au/alt/giovani2.html

?

or perhaps you might like something with some hidden
sentimentality:

http://netweaver.com.au/alt/giovani3.html

And don't forget my favorite: float left and right and allow the third
to flow between the two.

Your wish, Gus, is my command, (I really am vulnerable to any
suggestion at the moment because of a bout of flu that is making
me more delerious than usual. I am putty in anyone's hands. I am
sending you $10 for the suggestion):

<http://netweaver.com.au/alt/giovani4.html>

--
dorayme