Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > How to align text in my page heading?

Reply
Thread Tools

How to align text in my page heading?

 
 
David Segall
Guest
Posts: n/a
 
      12-02-2007
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.
 
Reply With Quote
 
 
 
 
Ben C
Guest
Posts: n/a
 
      12-02-2007
On 2007-12-02, David Segall <(E-Mail Removed)> 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).
 
Reply With Quote
 
 
 
 
David Segall
Guest
Posts: n/a
 
      12-02-2007
Ben C <(E-Mail Removed)> wrote:

>On 2007-12-02, David Segall <(E-Mail Removed)> 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?
 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      12-02-2007
On 2007-12-02, David Segall <(E-Mail Removed)> wrote:
> Ben C <(E-Mail Removed)> wrote:
>
>>On 2007-12-02, David Segall <(E-Mail Removed)> 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.
 
Reply With Quote
 
David Segall
Guest
Posts: n/a
 
      12-02-2007
Ben C <(E-Mail Removed)> wrote:

>On 2007-12-02, David Segall <(E-Mail Removed)> wrote:
>> Ben C <(E-Mail Removed)> wrote:
>>
>>>On 2007-12-02, David Segall <(E-Mail Removed)> 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>.
 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      12-02-2007
On 2007-12-02, David Segall <(E-Mail Removed)> wrote:
> Ben C <(E-Mail Removed)> wrote:
>
>>On 2007-12-02, David Segall <(E-Mail Removed)> wrote:
>>> Ben C <(E-Mail Removed)> 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.
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-02-2007
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
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-02-2007
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/h...background.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%2 0Amato_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
 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      12-02-2007
On 2007-12-02, Jonathan N. Little <(E-Mail Removed)> 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.
 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      12-02-2007
On 2007-12-02, Ben C <(E-Mail Removed)> wrote:
> On 2007-12-02, Jonathan N. Little <(E-Mail Removed)> 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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
<div align=center> also affects align of dynamic dropdown item text Steve Richter ASP .Net 1 06-24-2007 07:11 PM
left align within centre align Paul Lautman HTML 3 03-03-2006 02:45 PM
text-align vs align tshad HTML 1 06-23-2005 10:29 PM
how to Align text left & vertical align middle Kay ASP .Net 2 07-25-2003 08:32 AM



Advertisments