Forum Moderators: open

Message Too Old, No Replies

align new text on the right but same line

         

member22

3:24 pm on Oct 22, 2008 (gmt 0)

10+ Year Member



Hello,

I need to create new text on the top right of my website next to this text which is aligned left :

<span style="color:#FFFFFF;font-family: Futura bk; font-size:12px;letter-spacing:2px">my current text on the left</h1></span>

I have this text on the left and to the right of it I want to write a phone number with a different color, different font size but on the same line.
What line of code do I need to add next to the one listed below.

Thanks,

essiw

3:35 pm on Oct 22, 2008 (gmt 0)

10+ Year Member



don't know if i understand you correctly but maybe just: <span style="color:#newcolourcode; dont-family: Futura bk; font-size:newsizepx; letter-spacing:2px">text</span> that should be on the same line

also why is there a </h1> tag in your code but not a <h1> tag?

member22

4:07 pm on Oct 22, 2008 (gmt 0)

10+ Year Member



Here is the entire line of code.

I tried what you said but my phone number stays next to the text on the left and I want space and want it sperated from the rest of the text on the right. Thank you,

<h1><span style="color:#FFFFFF;font-family: Futura bk;font-size:17px;letter-spacing:5px;" href="'. URL_ROOT .'/" onclick="mywebmastercompanyname.Page.Open('. $homepage_oid .'); return false;">mycompanyname</span><br/>
<span style="color:#FFFFFF;font-family: Futura bk; font-size:12px;letter-spacing:2px">my text on the left r</h1></span>

tedster

4:35 am on Oct 23, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You cannot align part of an H1 element to the left and another part to the right.
If you need a true right alignment next to a left alignment, try one of these two approaches:

<h1 style="font-size:17px;">mycompanyname</h1>
<p style="margin-top:-17px;text-align:right;">this text is aligned right</p>

...or

<h1 style="font-size:17px;">mycompanyname</h1>
<p style="position:relative;top:-17;text-align:right;">this text is aligned right</p>

If having the right element element in the same H1 tag is important, then you can come close to that look if your page has a fixed width with mark-up like this:

<h1>mycompanyname<span style="padding-left:500px;">this text is spaced 500px to the right</span></h1>

Trace

1:11 pm on Oct 23, 2008 (gmt 0)

10+ Year Member



tedster, just for arguments sake, why would this not be a viable solution;
<h1>
<span style="float:left; color:#f00;">This text is floating left</span>
<span style="float:right; color:#00f;">This text is floating right</span>
</h1>

Seems like it would accomplish what he's aiming for, no?

essiw

1:26 pm on Oct 23, 2008 (gmt 0)

10+ Year Member



@trace
the only problem is with big monitors, there would be much space between them

Trace

3:36 pm on Oct 23, 2008 (gmt 0)

10+ Year Member



Yeah, I understand it's probably not a very elegant approach, I was simply wondering if it was wrong as it seems to answer the original request from member22, Maybe I simply misunderstood the requirement.

tedster

5:39 pm on Oct 23, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Trace, you're right. That is an approach to getting the desired result within the H1 element.

I never thought about it, since I almost never use spans and I never floated one in my life.