How to align text in my page heading?

Discussion in 'HTML' started by David Segall, Dec 2, 2007.

  1. David Segall

    David Segall Guest

    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.
     
    David Segall, Dec 2, 2007
    #1
    1. Advertising

  2. David Segall

    Ben C Guest

    On 2007-12-02, David Segall <> wrote:
    > 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).
     
    Ben C, Dec 2, 2007
    #2
    1. Advertising

  3. David Segall

    David Segall Guest

    Ben C <> wrote:

    >On 2007-12-02, David Segall <> wrote:
    >> 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).

    Thanks. That's much better but it is still left aligned. How can I
    centre it horizontally in the remaining space after the image?
     
    David Segall, Dec 2, 2007
    #3
  4. David Segall

    Ben C Guest

    On 2007-12-02, David Segall <> wrote:
    > Ben C <> wrote:
    >
    >>On 2007-12-02, David Segall <> wrote:
    >>> 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).

    > 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.
     
    Ben C, Dec 2, 2007
    #4
  5. David Segall

    David Segall Guest

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

    >> 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.
    > 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>.
     
    David Segall, Dec 2, 2007
    #5
  6. David Segall

    Ben C Guest

    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 <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.
     
    Ben C, Dec 2, 2007
    #6
  7. 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?

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Dec 2, 2007
    #7
  8. Jonathan N. Little wrote:
    > 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...

    <!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/Logo_FlindersStStation_MEL_U_Photographer%20Enzo%20Amato_050307_445V_357x150.jpg"
    alt="Logo">
    RENDEZ<span>VOUS</span>
    </div>

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

    </body>
    </html>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Dec 2, 2007
    #8
  9. David Segall

    Ben C Guest

    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
    >>> <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.
     
    Ben C, Dec 2, 2007
    #9
  10. David Segall

    Ben C Guest

    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
    >>>> <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.
     
    Ben C, Dec 2, 2007
    #10
  11. 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
     
    Jonathan N. Little, Dec 2, 2007
    #11
  12. David Segall

    dorayme Guest

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

    --
    dorayme
     
    dorayme, Dec 2, 2007
    #12
  13. David Segall

    Ben C Guest

    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.
     
    Ben C, Dec 2, 2007
    #13
  14. David Segall

    David Segall Guest

    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 <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.
     
    David Segall, Dec 3, 2007
    #14
  15. David Segall

    David Segall Guest

    "Jonathan N. Little" <> wrote:

    >Jonathan N. Little wrote:
    >> 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...

    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.
     
    David Segall, Dec 3, 2007
    #15
  16. 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
    >>>> <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...

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

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Dec 3, 2007
    #16
  17. David Segall

    dorayme Guest

    In article <6dd3d$47540cbc$40cba7b1$>,
    "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
     
    dorayme, Dec 3, 2007
    #17
  18. David Segall

    David Segall Guest

    dorayme <> wrote:

    >In article <6dd3d$47540cbc$40cba7b1$>,
    > "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.
     
    David Segall, Dec 4, 2007
    #18
  19. David Segall

    Bergamot Guest

    Bergamot, Dec 4, 2007
    #19
  20. Jonathan N. Little, Dec 4, 2007
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kay
    Replies:
    2
    Views:
    7,238
  2. tshad

    text-align vs align

    tshad, Jun 23, 2005, in forum: HTML
    Replies:
    1
    Views:
    1,328
    David Dorward
    Jun 23, 2005
  3. Paul Lautman

    left align within centre align

    Paul Lautman, Mar 3, 2006, in forum: HTML
    Replies:
    3
    Views:
    601
    Paul Lautman
    Mar 3, 2006
  4. Steve Richter
    Replies:
    1
    Views:
    940
    Mark Rae
    Jun 24, 2007
  5. JB
    Replies:
    1
    Views:
    408
    Alexey Smirnov
    Oct 21, 2009
Loading...

Share This Page