|
|
Posted by David Segall on 12/03/07 04:06
Ben C <spamspam@spam.eggs> wrote:
>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.
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.
[Back to original message]
|