Posted by Ben C on 12/02/07 17:03

On 2007-12-02, David Segall <david@address.invalid> wrote:
> Ben C <spamspam@spam.eggs> wrote:
>
>>On 2007-12-02, David Segall <david@address.invalid> wrote:
>>> Ben C <spamspam@spam.eggs> 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 <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
><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.

[Back to original message]