How to align text in my page heading?

I have a page heading
which consists of
an image followed by a word and they should occupy the leftmost 25% of
the heading. The remainder is a background image which will fill the
rightmost 75%. The leftmost image has a fixed size and I want the word
to be vertically and horizontally centred in what remains of the
leftmost 25%. Currently the word, "Rendezvous" insists on being at the
bottom left of the remaining space. How can I reposition it? I don't
need to support browsers more than a couple of years old.

Re: How to align text in my page heading?

On 2007-12-02, David Segall wrote:
> I have a page heading
> which consists of
> an image followed by a word and they should occupy the leftmost 25% of
> the heading. The remainder is a background image which will fill the
> rightmost 75%. The leftmost image has a fixed size and I want the word
> to be vertically and horizontally centred in what remains of the
> leftmost 25%. Currently the word, "Rendezvous" insists on being at the
> bottom left of the remaining space. How can I reposition it? I don't
> need to support browsers more than a couple of years old.

Put vertical-align: middle on the preceding the span (the one
that's a picture of a clock).

Re: How to align text in my page heading?

Ben C wrote:

>On 2007-12-02, David Segall wrote:
>> I have a page heading
>> which consists of
>> an image followed by a word and they should occupy the leftmost 25% of
>> the heading. The remainder is a background image which will fill the
>> rightmost 75%. The leftmost image has a fixed size and I want the word
>> to be vertically and horizontally centred in what remains of the
>> leftmost 25%. Currently the word, "Rendezvous" insists on being at the
>> bottom left of the remaining space. How can I reposition it? I don't
>> need to support browsers more than a couple of years old.
>
>Put vertical-align: middle on the preceding the span (the one
>that's a picture of a clock).
Thanks. That's much better but it is still left aligned. How can I
centre it horizontally in the remaining space after the image?

Re: How to align text in my page heading?

On 2007-12-02, David Segall wrote:
> Ben C wrote:
>
>>On 2007-12-02, David Segall wrote:
>>> I have a page heading
>>> which consists of
>>> an image followed by a word and they should occupy the leftmost 25% of
>>> the heading. The remainder is a background image which will fill the
>>> rightmost 75%. The leftmost image has a fixed size and I want the word
>>> to be vertically and horizontally centred in what remains of the
>>> leftmost 25%. Currently the word, "Rendezvous" insists on being at the
>>> bottom left of the remaining space. How can I reposition it? I don't
>>> need to support browsers more than a couple of years old.
>>
>>Put vertical-align: middle on the preceding the span (the one
>>that's a picture of a clock).
> Thanks. That's much better but it is still left aligned. How can I
> centre it horizontally in the remaining space after the image?

I forgot you wanted that too. Then it gets a bit more complicated.

Make the float: left, and remove vertical-align from it (as it is
now senseless).

Set text-align: center and line-height: 80px on the containing div. This
relies on the fact that your image is 80px high, but it is, so never
mind.

Re: How to align text in my page heading?

Ben C wrote:

>On 2007-12-02, David Segall wrote:
>> Ben C wrote:
>>
>>>On 2007-12-02, David Segall wrote:
>>>> I have a page heading
>>>> which consists of
>>>> an image followed by a word and they should occupy the leftmost 25% of
>>>> the heading. The remainder is a background image which will fill the
>>>> rightmost 75%. The leftmost image has a fixed size and I want the word
>>>> to be vertically and horizontally centred in what remains of the
>>>> leftmost 25%. Currently the word, "Rendezvous" insists on being at the
>>>> bottom left of the remaining space. How can I reposition it? I don't
>>>> need to support browsers more than a couple of years old.
>>>
>>>Put vertical-align: middle on the preceding the span (the one
>>>that's a picture of a clock).
>> Thanks. That's much better but it is still left aligned. How can I
>> centre it horizontally in the remaining space after the image?
>
>I forgot you wanted that too. Then it gets a bit more complicated.
>
>Make the float: left, and remove vertical-align from it (as it is
>now senseless).
>
>Set text-align: center and line-height: 80px on the containing div.
Thanks again. That works perfectly and I have posted the corrected
version as
for
anyone who finds this via a web search.
> This
>relies on the fact that your image is 80px high, but it is, so never
>mind.
A helpful addendum and a nice way of putting it. I think I understand
what is happening but I don't think I would have arrived at your
solution without following a recipe. I wonder if I will ever write
HTML from a basis of logic rather than trial and error.

I have added "Ben C" to the Content Credits at
. If you would prefer to
make that your real name please send an email to the address on the
Contacts page .

Re: How to align text in my page heading?

On 2007-12-02, David Segall wrote:
> Ben C wrote:
>
>>On 2007-12-02, David Segall wrote:
>>> Ben C wrote:
[...]
>>> Thanks. That's much better but it is still left aligned. How can I
>>> centre it horizontally in the remaining space after the image?
>>
>>I forgot you wanted that too. Then it gets a bit more complicated.
>>
>>Make the float: left, and remove vertical-align from it (as it is
>>now senseless).
>>
>>Set text-align: center and line-height: 80px on the containing div.
> Thanks again. That works perfectly and I have posted the corrected
> version as
> for
> anyone who finds this via a web search.

There is a caveat, which is that the space available for the text
RENDEZVOUS is 25% of the viewport, minus 80px. That's only 110px for an
800px viewport. The text can easily be wider than that in a reasonably
sized font. This means it jumps down a whole line, which, since we've
set line-height to 80px, is 80px.

I get RENDEZVOUS jumping down in Firefox for viewports narrower than
about 950px, and I haven't made any changes to the fonts it installed
itself with. I often use an 800px viewport.

Making the container min-width: 25% rather than width: 25% may be better
(although that might not work in IE). Then you could also give
#headingLeft z-index: 1 so that if the viewport is too narrow, the blue
region and the text in it just covers up a bit of the picture of a cafe,
which is quite unnoticeable. Then it won't jump down until the viewport
gets really narrow.

[...]
> I have added "Ben C" to the Content Credits at
>. If you would prefer to
> make that your real name please send an email to the address on the
> Contacts page .

Thanks! No need for a real name.

Re: How to align text in my page heading?

David Segall wrote:

> Thanks again. That works perfectly and I have posted the corrected
> version as
> for
> anyone who finds this via a web search.

"perfectly" Are you sure? Have you view the page with the browser window
< 800px wide?

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: How to align text in my page heading?

Jonathan N. Little wrote:
> David Segall wrote:
>
>> Thanks again. That works perfectly and I have posted the corrected
>> version as
>> for
>> anyone who finds this via a web search.
>
> "perfectly" Are you sure? Have you view the page with the browser window
> < 800px wide?
>

If I had to do this is how I would do it...

"http://www.w3.org/TR/html4/strict.dtd">

src="http://www.profectus.com.au/images/Logo_FlindersStStati on_MEL_U_Photographer%20Enzo%20Amato_050307_445V_357x150.jpg "
alt="Logo">
RENDEZVOUS

foo

bar...

Re: How to align text in my page heading?

On 2007-12-02, Jonathan N. Little wrote:
> Jonathan N. Little wrote:
>> David Segall wrote:
>>
>>> Thanks again. That works perfectly and I have posted the corrected
>>> version as
>>> for
>>> anyone who finds this via a web search.
>>
>> "perfectly" Are you sure? Have you view the page with the browser window
>> < 800px wide?
>>
>
> If I had to do this is how I would do it...
[...]
> /* no need for floats, just regular inline will do */
> #heading img { vertical-align: middle; }

This was suggested the first time around, but OP wants the picture of
the clock and the left, and RENDEZVOUS centered (horizontally and
vertically) in what's left of the dark blue bit.

Hence the float idea.

Re: How to align text in my page heading?

On 2007-12-02, Ben C wrote:
> On 2007-12-02, Jonathan N. Little wrote:
>> Jonathan N. Little wrote:
>>> David Segall wrote:
>>>
>>>> Thanks again. That works perfectly and I have posted the corrected
>>>> version as
>>>> for
>>>> anyone who finds this via a web search.
>>>
>>> "perfectly" Are you sure? Have you view the page with the browser window
>>> < 800px wide?
>>>
>>
>> If I had to do this is how I would do it...
> [...]
>> /* no need for floats, just regular inline will do */
>> #heading img { vertical-align: middle; }
>
> This was suggested the first time around, but OP wants the picture of
> the clock and the left, and RENDEZVOUS centered (horizontally and
> vertically) in what's left of the dark blue bit.

Sorry I meant "on" the left.

Re: How to align text in my page heading?

Ben C wrote:

> This was suggested the first time around, but OP wants the picture of
> the clock and the left, and RENDEZVOUS centered (horizontally and
> vertically) in what's left of the dark blue bit.
>
> Hence the float idea.

Yeah, but the float then makes the vertical alignment problematic and
viewport|text-size issues. Not to mention possible IE bugs.

Sometimes a compromise like: does the RENDEZVOUS *absolutely have to be*
centered as long as visually there is a bit of padding of blue left and
right will do? Especially where it is simpler in markup and less likely
to break.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: How to align text in my page heading?

In article ,
Ben C wrote:

> On 2007-12-02, Jonathan N. Little wrote:
> > Jonathan N. Little wrote:
> >> David Segall wrote:
> >>
> >>> Thanks again. That works perfectly and I have posted the corrected
> >>> version as
> >>> for
> >>> anyone who finds this via a web search.
> >>
> >> "perfectly" Are you sure? Have you view the page with the browser window
> >> < 800px wide?
> >>
> >
> > If I had to do this is how I would do it...
> [...]
> > /* no need for floats, just regular inline will do */
> > #heading img { vertical-align: middle; }
>
> This was suggested the first time around, but OP wants the picture of
> the clock and the left, and RENDEZVOUS centered (horizontally and
> vertically) in what's left of the dark blue bit.
>
> Hence the float idea.

OP's initial request sure puzzled me, was there an implied "and
the text must not break out of the blue area"?

--
dorayme

Re: How to align text in my page heading?

On 2007-12-02, Jonathan N. Little wrote:
> Ben C wrote:
>
>> This was suggested the first time around, but OP wants the picture of
>> the clock and the left, and RENDEZVOUS centered (horizontally and
>> vertically) in what's left of the dark blue bit.
>>
>> Hence the float idea.
>
> Yeah, but the float then makes the vertical alignment problematic and
> viewport|text-size issues.

I agree it makes the vertical alignment more of a bother-- I suggested
an 80px line-height on the container, which does the trick, but requires
hard-wiring 80px which happens to be the same height as the clock image.

The viewport|text-size issues were caused by the width: 25% on the
container (in the OP's original version) and I did suggest a fix for
that (while keeping it at 25%). The float isn't the problem there per
se-- the line will break in a narrower viewport if the image is inline
in just the same way.

Using a background image for the other image as you have done is nice and
simple, but you haven't preserved the 25%/75% ratio the OP wanted
between the blue bit and the image.

Did he really want exactly that is it just something he ended up with? I
don't know. I just try to fix the problem as asked without changing
anything else. Others here are more qualified to comment on design,
accessibility, fluidity, etc.

> Not to mention possible IE bugs.

That goes without saying...

> Sometimes a compromise like: does the RENDEZVOUS *absolutely have to be*
> centered as long as visually there is a bit of padding of blue left and
> right will do? Especially where it is simpler in markup and less likely
> to break.

I think so-- it mostly fills the little blue space it's in anyway, so
centering it is not a dramatic effect. I almost did suggest settling for
left-alignment there, but thought the OP could make up his mind: he can
see that the more exact solution is more complex and decide whether he
wants to live with it.

Re: How to align text in my page heading?

Ben C wrote:

>On 2007-12-02, David Segall wrote:
>> Ben C wrote:
>>
>>>On 2007-12-02, David Segall wrote:
>>>> Ben C wrote:
>[...]
>>>> Thanks. That's much better but it is still left aligned. How can I
>>>> centre it horizontally in the remaining space after the image?
>>>
>>>I forgot you wanted that too. Then it gets a bit more complicated.
>>>
>>>Make the float: left, and remove vertical-align from it (as it is
>>>now senseless).
>>>
>>>Set text-align: center and line-height: 80px on the containing div.
>> Thanks again. That works perfectly and I have posted the corrected
>> version as
>> for
>> anyone who finds this via a web search.
>
>There is a caveat, which is that the space available for the text
>RENDEZVOUS is 25% of the viewport, minus 80px. That's only 110px for an
>800px viewport. The text can easily be wider than that in a reasonably
>sized font. This means it jumps down a whole line, which, since we've
>set line-height to 80px, is 80px.
>
>I get RENDEZVOUS jumping down in Firefox for viewports narrower than
>about 950px, and I haven't made any changes to the fonts it installed
>itself with. I often use an 800px viewport.
The application should work down to an 800x600 viewport and I would
have tested this before the alpha release. Honest! I can increase the
percentage width and/or reduce the font size.
>
>Making the container min-width: 25% rather than width: 25% may be better
>(although that might not work in IE). Then you could also give
>#headingLeft z-index: 1 so that if the viewport is too narrow, the blue
>region and the text in it just covers up a bit of the picture of a cafe,
>which is quite unnoticeable.
The heading is intended to line up with the content which is a web
application that lends itself to a two column format. Even if I
prevent the heading from breaking the content will.

Re: How to align text in my page heading?

"Jonathan N. Little" wrote:

>Jonathan N. Little wrote:
>> David Segall wrote:
>>
>>> Thanks again. That works perfectly and I have posted the corrected
>>> version as
>>> for
>>> anyone who finds this via a web search.
>>
>> "perfectly" Are you sure? Have you view the page with the browser window
>> < 800px wide?
>>
>
>If I had to do this is how I would do it...
But your heading
would not
line up with the body that I have designed for my application.

I thought "Ben C" provided a model answer to a "How do I..." request.
He achieved the requested result, indicated why the requested result
might not be the desired result and even provided some explanation of
how he achieved the requested result.

Re: How to align text in my page heading?

David Segall wrote:
> "Jonathan N. Little" wrote:
>
>> Jonathan N. Little wrote:
>>> David Segall wrote:
>>>
>>>> Thanks again. That works perfectly and I have posted the corrected
>>>> version as
>>>> for
>>>> anyone who finds this via a web search.
>>> "perfectly" Are you sure? Have you view the page with the browser window
>>> < 800px wide?
>>>
>> If I had to do this is how I would do it...
> But your heading
> would not
> line up with the body that I have designed for my application.

Have no idea what you mean "line up with the body that I have designed
for my application" since you give no url to said application. If you
did we could have a better idea of what parameters are important to the
design.

>
> I thought "Ben C" provided a model answer to a "How do I..." request.
> He achieved the requested result, indicated why the requested result
> might not be the desired result and even provided some explanation of
> how he achieved the requested result.

How can having "RENDEZ" disappear and "VOUS" dropping down into content
fulfill the requirement "line up with the body that I have designed
for my application"? Even if it did stay stable for >800px viewports,
how do you know your visitor has allot that much space. Hint: monitor
resolution != browser viewport.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: How to align text in my page heading?

In article <6dd3d$47540cbc$40cba7b1$10947@NAXS.COM>,
"Jonathan N. Little" wrote:

> How can having "RENDEZ" disappear and "VOUS" dropping down into content
> fulfill the requirement "line up with the body that I have designed
> for my application"? Even if it did stay stable for >800px viewports,
> how do you know your visitor has allot that much space. Hint: monitor
> resolution != browser viewport.

Sorry to keep chirping in here (without helping*), but that is
what I was wondering too. I recall words dropping down at text
size up clicks in all browsers as well...

*I did have an idea and it was based on an assumption of what the
OP wanted but gave up when he seemed so pleased with what Ben was
offering. I assumed I was not understanding the case. It seemed
to me OP wanted what simply could not be achieved with html text
and I was going to suggest some css dimensioned image of text...
But the mystery continues.

--
dorayme

Re: How to align text in my page heading?

dorayme wrote:

>In article <6dd3d$47540cbc$40cba7b1$10947@NAXS.COM>,
> "Jonathan N. Little" wrote:
>
>> How can having "RENDEZ" disappear and "VOUS" dropping down into content
>> fulfill the requirement "line up with the body that I have designed
>> for my application"? Even if it did stay stable for >800px viewports,
>> how do you know your visitor has allot that much space. Hint: monitor
>> resolution != browser viewport.
>
>Sorry to keep chirping in here (without helping*), but that is
>what I was wondering too. I recall words dropping down at text
>size up clicks in all browsers as well...
>
>*I did have an idea and it was based on an assumption of what the
>OP wanted but gave up when he seemed so pleased with what Ben was
>offering. I assumed I was not understanding the case. It seemed
>to me OP wanted what simply could not be achieved with html text
>and I was going to suggest some css dimensioned image of text...
>But the mystery continues.
Of course I would be interested in your ideas. I was pleased with
Ben's response because he provided an answer that met my
specification.

I did not respond to your previous post in this thread because I
assumed you were simply chiding me for accepting a solution that might
fail and you knew that there was an implied "the text must not break
out of the blue area". I have accepted the fact that _I_ cannot design
an application that will work well on a wrist watch computer and a
plasma TV screen without extensive additional code that "knows" the
size of the viewport. If you have a solution to the problem I posed
that works over a wider range of viewports I would be grateful if you
would post it.

Re: How to align text in my page heading?

David Segall wrote:
>
> If you have a solution to the problem I posed
> that works over a wider range of viewports I would be grateful if you
> would post it.

http://www.bergamotus.ws/profectus/ee_headingexample_correct ed.html

--
Berg

Re: How to align text in my page heading?

Bergamot wrote:
> David Segall wrote:
>> If you have a solution to the problem I posed
>> that works over a wider range of viewports I would be grateful if you
>> would post it.
>
> http://www.bergamotus.ws/profectus/ee_headingexample_correct ed.html
>

Far better solution in my opinion.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: How to align text in my page heading?

In article ,
David Segall wrote:

> dorayme wrote:
>
> >In article <6dd3d$47540cbc$40cba7b1$10947@NAXS.COM>,
> > "Jonathan N. Little" wrote:
> >
> >> How can having "RENDEZ" disappear and "VOUS" dropping down into content
> >> fulfill the requirement "line up with the body that I have designed
> >> for my application"? Even if it did stay stable for >800px viewports,
> >> how do you know your visitor has allot that much space. Hint: monitor
> >> resolution != browser viewport.
> >
> >Sorry to keep chirping in here (without helping*), but that is
> >what I was wondering too. I recall words dropping down at text
> >size up clicks in all browsers as well...
> >
> >*I did have an idea and it was based on an assumption of what the
> >OP wanted but gave up when he seemed so pleased with what Ben was
> >offering. I assumed I was not understanding the case. It seemed
> >to me OP wanted what simply could not be achieved with html text
> >and I was going to suggest some css dimensioned image of text...
> >But the mystery continues.
>
> Of course I would be interested in your ideas. I was pleased with
> Ben's response because he provided an answer that met my
> specification.
>

Fair enough, but that is why I was puzzled. It seemed I did not
understand your specification.


> I did not respond to your previous post in this thread because I
> assumed you were simply chiding me for accepting a solution that might
> fail and you knew that there was an implied "the text must not break
> out of the blue area". I have accepted the fact that _I_ cannot design
> an application that will work well on a wrist watch computer and a
> plasma TV screen without extensive additional code that "knows" the
> size of the viewport. If you have a solution to the problem I posed
> that works over a wider range of viewports I would be grateful if you
> would post it.

David, your text was jumping out of its box on my 20" monitor, I
rarely use the whole area for a browser and I often read with
text size bigger than you seem more accustomed to. I was not
really chiding you, I was thinking up theories about what it was
quite that you were wanting. I was not in any way critical of
Ben's proposals.

Lets see if you like the latest proposed solution by someone who
studiously avoids my name... someone who seems to have a rather
nice idea. If this does not please you, say so and I will have a
go...

--
dorayme

Re: How to align text in my page heading?

Bergamot wrote:

>David Segall wrote:
>>
>> If you have a solution to the problem I posed
>> that works over a wider range of viewports I would be grateful if you
>> would post it.
>
>http://www.bergamotus.ws/profectus/ee_headingexample_correc ted.html
Thank you Bergamot. It certainly behaves better than the included
alternative. I was going to postpone my thanks until I understood
enough of your HTML to ask some intelligent questions but I decided
that might take too long. :(

Re: How to align text in my page heading?

dorayme wrote:

>In article ,
> David Segall wrote:
>
>> dorayme wrote:
>>
>> >In article <6dd3d$47540cbc$40cba7b1$10947@NAXS.COM>,
>> > "Jonathan N. Little" wrote:
>> >
>> >> How can having "RENDEZ" disappear and "VOUS" dropping down into content
>> >> fulfill the requirement "line up with the body that I have designed
>> >> for my application"? Even if it did stay stable for >800px viewports,
>> >> how do you know your visitor has allot that much space. Hint: monitor
>> >> resolution != browser viewport.
>> >
>> >Sorry to keep chirping in here (without helping*), but that is
>> >what I was wondering too. I recall words dropping down at text
>> >size up clicks in all browsers as well...
>> >
>> >*I did have an idea and it was based on an assumption of what the
>> >OP wanted but gave up when he seemed so pleased with what Ben was
>> >offering. I assumed I was not understanding the case. It seemed
>> >to me OP wanted what simply could not be achieved with html text
>> >and I was going to suggest some css dimensioned image of text...
>> >But the mystery continues.
>>
>> Of course I would be interested in your ideas. I was pleased with
>> Ben's response because he provided an answer that met my
>> specification.
>>
>
>Fair enough, but that is why I was puzzled. It seemed I did not
>understand your specification.
>
>
>> I did not respond to your previous post in this thread because I
>> assumed you were simply chiding me for accepting a solution that might
>> fail and you knew that there was an implied "the text must not break
>> out of the blue area". I have accepted the fact that _I_ cannot design
>> an application that will work well on a wrist watch computer and a
>> plasma TV screen without extensive additional code that "knows" the
>> size of the viewport. If you have a solution to the problem I posed
>> that works over a wider range of viewports I would be grateful if you
>> would post it.
>
>David, your text was jumping out of its box on my 20" monitor, I
>rarely use the whole area for a browser and I often read with
>text size bigger than you seem more accustomed to. I was not
>really chiding you, I was thinking up theories about what it was
>quite that you were wanting. I was not in any way critical of
>Ben's proposals.
>
>Lets see if you like the latest proposed solution by someone who
>studiously avoids my name... someone who seems to have a rather
>nice idea. If this does not please you, say so and I will have a
>go...
Thanks dorayme. Since everyone approves of Bergamot's solution and Ben
C warned me that than an "improved" version of his would be
complicated I have to acknowledge that the problem I posed does not
have a simple solution. Although I am prepared to accept that my site
will break for viewports and font sizes outside the range I am capable
of designing I am not about to reject a superior "fluid design".

Re: How to align text in my page heading?

In article ,
David Segall wrote:

> dorayme wrote:

> >
> >Lets see if you like the latest proposed solution by someone who
> >studiously avoids my name... someone who seems to have a rather
> >nice idea. If this does not please you, say so and I will have a
> >go...


> Thanks dorayme. Since everyone approves of Bergamot's solution and Ben
> C warned me that than an "improved" version of his would be
> complicated I have to acknowledge that the problem I posed does not
> have a simple solution. Although I am prepared to accept that my site
> will break for viewports and font sizes outside the range I am capable
> of designing I am not about to reject a superior "fluid design".
>

Good for you and good luck on your project.

Just one thing though, while I agree that no author can be
expected to have a design look its best at all times on all
computers, the standard around here (but most definitely not out
there in the real world) is 'a few clicks of text size adjustment
by the user should make little difference, nor a range of
monitors from at least 800px to 1600px.

Now, of course, this might seem vague to you, but you can make it
mean more by thinking about it: for example, up the text size and
yes, it will look different but will something look 'particularly
wrong'? And you will develop a sense of judgement about these
things, nothing you can actually write down in strict rules...

--
dorayme