How to align text in my page heading?

[David Segall]

I have a page heading
<http://www.profectus.com.au/ee_headingexample.html> 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.

 

[Ben C]

I have a page heading
<http://www.profectus.com.au/ee_headingexample.html> 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 <img> preceding the span (the one
that's a picture of a clock).

 

[David Segall]

Put vertical-align: middle on the <img> 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?

 

[Ben C]

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 <img> 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.

 

[David Segall]

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

Make the <img> 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

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
<http://www.profectus.com.au/credits.html>. If you would prefer to
make that your real name please send an email to the address on the
Contacts page <http://www.profectus.com.au/contact.html>.

 

[Ben C]

Thanks again. That works perfectly and I have posted the corrected
version as
<http://www.profectus.com.au/ee_headingexample_corrected.html> 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
<http://www.profectus.com.au/credits.html>. If you would prefer to
make that your real name please send an email to the address on the
Contacts page <http://www.profectus.com.au/contact.html>.

Thanks! No need for a real name.

 

[Jonathan N. Little]

Thanks again. That works perfectly and I have posted the corrected
version as
<http://www.profectus.com.au/ee_headingexample_corrected.html> for
anyone who finds this via a web search.

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

 

[Jonathan N. Little]

"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...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Better Way</title>
<style type="text/css">

#heading {
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 100%;
overflow: hidden;
color: rgb(255, 204, 0);

/* put image as bg on heading with offset for text */
background: rgb(7, 33, 125)
url(http://www.profectus.com.au/images/headingbackground.jpg) no-repeat
13em top;

font: bolder 22px Verdana, Arial, Helvetica, sans-serif;
}
/* no need for floats, just regular inline will do */
#heading img { vertical-align: middle; }

/* change of color on VOUS */
#heading span { color: rgb(255, 255, 255); }

/* offset for heading */
body { margin-top: 90px; }

</style>
</head>

<body>
<div id="heading">
<img
src="http://www.profectus.com.au/images/...otographer Enzo Amato_050307_445V_357x150.jpg"
alt="Logo">
RENDEZ<span>VOUS</span>
</div>

<h1>foo</h1>
<p>bar...</p>

</body>
</html>

 

[Ben C]

"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.

 

[Ben C]

David Segall wrote:

Thanks again. That works perfectly and I have posted the corrected
version as
<http://www.profectus.com.au/ee_headingexample_corrected.html> 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.

 

[Jonathan N. Little]

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.

 

[dorayme]

David Segall wrote:

Thanks again. That works perfectly and I have posted the corrected
version as
<http://www.profectus.com.au/ee_headingexample_corrected.html> 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"?

 

[Ben C]

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.

 

[David Segall]

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.

 

[David Segall]

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

But your heading
<http://www.profectus.com.au/ee_headingexample_little.html> 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.

 

[Jonathan N. Little]

But your heading
<http://www.profectus.com.au/ee_headingexample_little.html> 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.

 

[dorayme]

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.

 

[David Segall]

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.

 

[Bergamot]

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_corrected.html

 

[Jonathan N. Little]

http://www.bergamotus.ws/profectus/ee_headingexample_corrected.html

Far better solution in my opinion.