Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Centering text inside a <header> with two other elements

Reply
Thread Tools

Centering text inside a <header> with two other elements

 
 
dorayme
Guest
Posts: n/a
 
      04-05-2012
In article
<33160409.794.1333574175450.JavaMail.geo-discussion-forums@ynib40>,
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:

> On Wednesday, April 4, 2012 2:58:45 PM UTC-4, dorayme wrote:
> > You forgot to ask the question in the body of your post. What,
> > specifically, do you want? For the words Jane Austen to be centred in
> > the maroon header box?

>
> Yes, I forgot to ask. Yes, I want to center that text without resorting
> to a table.
>
> I tried specifying different widths, including specifying width for all three
> elements, which didn't help. The right-aligned element just broke out of the
> box, or however you would put it.
>
> Personally, I like the idea of having it centered, but if I can't figure out
> how, then using a bullet to separate it from the site name would be
> sufficient, I think.
>
> Hope you're well.


Your instinct to be content enough with the author not centred is
sound, if you want the author to be more separated from the Bookstacks
as a small compensation to your flirtation with the aesthetics of
centring, you seem competent to do that (just span the author
container and give some sensible and modest left margin or padding).
Remember, other authors on other pages will be at exactly the same
place, you will get consistency. And it will look good, just as it did
when I first saw your work.

About Bootnic's, unless you can get it in writing from him that he
absolutely has to help for ever with all browsers, be careful! He
could do it, no doubt. But how old is he? Is he well? How long will he
be around? Does he intend to space travel and be away a long time?
Have your lawyer check *these* things even if he agrees to sign. <g>

I notice already your implementation of his is quite differently
expressed in my FF and Safari. Nevertheless, displaying as table is so
promising and tempting! You might find some things at

<http://netweaver.com.au/centring/>

useful, especially /page5.html to get a vertical centring.

The things we do to avoid HTML tables! You are into HTML5, maybe look
at:

<http://webdesign.about.com/od/tables/a/html5-tables-for-layout.htm>

to make it feel less bad.

--
dorayme
 
Reply With Quote
 
 
 
 
Norman Peelman
Guest
Posts: n/a
 
      04-05-2012
On 04/03/2012 10:25 PM, Ian wrote:
> I hope that this is the correct place to pose questions. If not, if anyone wants to direct me elsewhere, that's fine. ... I'm building a site in HTML5, a relevant sample of which is located at http://sundry.us/austen/index.php ... If you look there, you will see that I have an<h1> floated left, then a<p> floated left and center-aligned, and a<p> right-aligned. Here is the relevant section of code:
>
> <header>
> <h1 style="padding-left: 25px; padding-top: 10px; margin: 0px; text-align: left; float: left;"><strong><a href="http://sundry.us/" style="text-decoration: none; color: white;">Bookstacks</a></strong></h1>
> <p style="padding-right: 25px; padding-left: 25px; text-align: center; float: left; margin-left: auto;">Arthur Conan Doyle</p>
> <p style="padding-right: 25px; text-align: right; font-weight: bold;">Free eBooks</p>
> </header>
>
> As an aside, that section was originally split between external CSS and an include file, but the necessity of having a unique middle field on each header led me to think, right or wrong, that I should write out every header for every index page.
>
> Hope all are well.


Just to let you know, the text/links on the right hand side of the
page are nearly the same color as the background (Firefox 3.6.23).


--
Norman
Registered Linux user #461062
AMD64X2 6400+ Ubuntu 10.04 64bit
 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      04-05-2012
Norman Peelman wrote:

> Just to let you know, the text/links on the right hand side of the page
> are nearly the same color as the background (Firefox 3.6.23).


Kind of begs the question, why are you still fooling with 3.6.x when the
latest is 11? All you have to do is install the ppa:

sudo add-apt-repository ppa:mozillateam/firefox-stable && sudo apt-get
update && sudo apt-get upgrade



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
ian.rastall@gmail.com
Guest
Posts: n/a
 
      04-05-2012
On Wednesday, April 4, 2012 10:59:40 PM UTC-4, dorayme wrote:
> About Bootnic's, unless you can get it in writing from him that he
> absolutely has to help for ever with all browsers, be careful! He
> could do it, no doubt. But how old is he? Is he well? How long will he
> be around? Does he intend to space travel and be away a long time?
> Have your lawyer check *these* things even if he agrees to sign. <g>


You know, that's true. I really have no idea what he's doing there. To be honest, I read Dave Raggett's intro to CSS many years ago, and once I knew how it worked, just looked stuff up on W3Schools. It *does* make sense to work within my own capabilities.

> The things we do to avoid HTML tables! You are into HTML5, maybe look
> at:
>
> <http://webdesign.about.com/od/tables/a/html5-tables-for-layout.htm>
>
> to make it feel less bad.


It *does* help! The info in the header is reproduced in the <title>, for one, so maybe it's all right to use a table to layout that section? I hope so, because that's the next step.

Thanks for the ideas and the kind words.
 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      04-05-2012
ian.rastall wrote:

> It *does* help! The info in the header is reproduced in the <title>, for
> one, so maybe it's all right to use a table to layout that section? I
> hope so, because that's the next step.


If you don't want to use a table for layout (this is the 21st century,
after all), and you want floating and centered parts of your banner,
maybe this old page of mine will give you a few ideas about the
construction. My method would also center "Jane Austen" which on your
current page, is slightly to the right of center.

http://tekrider.net/html/banner.php

Figure out some left- and right- padding to keep "Bookstacks" and "Free
eBooks" off the outer margins.

--
-bts
-This space for rent, but the price is high
 
Reply With Quote
 
ian.rastall@gmail.com
Guest
Posts: n/a
 
      04-05-2012
On Thursday, April 5, 2012 10:08:02 AM UTC-4, Beauregard T. Shagnasty wrote:
> If you don't want to use a table for layout (this is the 21st century,
> after all), and you want floating and centered parts of your banner,
> maybe this old page of mine will give you a few ideas about the
> construction. My method would also center "Jane Austen" which on your
> current page, is slightly to the right of center.
>
> http://tekrider.net/html/banner.php


Thanks for the link. The author was off-center because I had some CSS that was throwing it off. I'm pretty sure it's okay now. ... Okay in my one browser, though (FF 11), because (sad to admit) I haven't started looking at other ones yet. I also haven't checked today to see if it validates ... but my theory has always been that *if* it validates, I might not have to pay asclose attention to the different browsers. Especially if the page is rather simple, as this one is. But that's still a shortcoming. Hope you're well.
 
Reply With Quote
 
Norman Peelman
Guest
Posts: n/a
 
      04-05-2012
On 04/05/2012 09:11 AM, Jonathan N. Little wrote:
> Norman Peelman wrote:
>
>> Just to let you know, the text/links on the right hand side of the page
>> are nearly the same color as the background (Firefox 3.6.23).

>
> Kind of begs the question, why are you still fooling with 3.6.x when the
> latest is 11? All you have to do is install the ppa:
>
> sudo add-apt-repository ppa:mozillateam/firefox-stable && sudo apt-get
> update && sudo apt-get upgrade
>
>


I guess for the same reason I'm still using Thunderbird 3.1.15...
maybe I need to take alook at those ppa repos.

--
Norman
Registered Linux user #461062
AMD64X2 6400+ Ubuntu 10.04 64bit
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      04-05-2012
Norman Peelman wrote:
> I guess for the same reason I'm still using Thunderbird 3.1.15... maybe I need to take alook at those ppa repos.


sudo add-apt-repository ppa:mozillateam/thunderbird-stable

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      04-06-2012
In article
<8036578.244.1333635931121.JavaMail.geo-discussion-forums@ynib40>,
(E-Mail Removed) wrote:

> On Thursday, April 5, 2012 10:08:02 AM UTC-4, Beauregard T. Shagnasty wrote:
> > If you don't want to use a table for layout (this is the 21st century,
> > after all), and you want floating and centered parts of your banner,
> > maybe this old page of mine will give you a few ideas about the
> > construction. My method would also center "Jane Austen" which on your
> > current page, is slightly to the right of center.
> >
> > http://tekrider.net/html/banner.php

>
> Thanks for the link.


The big problem with centring three things (or more) where some fly
off to the left, some to the right and one or more are wanted in the
middle is vertical alignment. There are other problems too. There is
nothing quite as easy to construct and/or as solidly reliable as a
table or (for supporting browsers) CSS 'displaying' appropriate
elements as tables and cells.

Anyway, with this general schema:

<div class="banner">
<span class="left">Company</span>
<span class="right">...plug...</span>
author
</div>

all can be fine when the texts are short one-liners. The left and
right floated, the central text text-aligned center via a style on the
container. Someone might be wanting to middle the text vertically in a
box and scratch their head on how to do this *perfectly*! I won't stop
to show patience with this desire.

But when one of the members wraps or is made to wrap to more than one
line, the vertical alignment is not what many might want.

A related difficulty occurs when one of the members has a different
font or font size. For example, the left member might be bigger than
the others. In this case, the line on which the big text is on alters
the horizontal position of the top lines of any smaller centred text.
And the big text is taller, the other text does not sit in an
intuitively nice or natural line with it.

If the centred text is made to wrap, and has a few lines, the top
lines are pushed by both left and right text, the next few lines might
be pushed by the big text alone on the left, the smaller single line
text on the right having ended and having no more influence. When the
wrapped lines in the centre are clear of the influence of both left
and right floats, the calculation for centring is taken from the edges
of the container itself. There is an example of this below. Sometimes
it is not at all a pretty sight.

Untidy central text can be fixed by inline-blocking the "centre" span:

..centre { display: inline-block; ...

But that leaves vertical untidiness as some would see it.

In the URL below are some illustrations of what I am talking about.
Perhaps the second last is how it is done in hell, the last maybe how
it is done in heaven itself, but both damn near perfect. The rest are
how conflicted souls on earth might try it.

<http://dorayme.netweaver.com.au/centring3Texts.html>

--
dorayme
 
Reply With Quote
 
Norman Peelman
Guest
Posts: n/a
 
      04-06-2012
On 04/05/2012 07:03 PM, Jonathan N. Little wrote:
> Norman Peelman wrote:
>> I guess for the same reason I'm still using Thunderbird 3.1.15...
>> maybe I need to take alook at those ppa repos.

>
> sudo add-apt-repository ppa:mozillateam/thunderbird-stable
>


Last off topic note... looks like they've set up the update/upgrade
system to bring in the newest stable... I'll have to see what happens
next time I do an update.


--
Norman
Registered Linux user #461062
AMD64X2 6400+ Ubuntu 10.04 64bit
 
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
Problem centering UL and LI elements Newbie HTML 37 02-09-2011 06:59 PM
problem centering Menu - control inside a td Jeff ASP .Net 0 03-01-2009 07:19 PM
replacing xml elements with other elements using lxml Ultrus Python 4 08-30-2007 07:17 AM
Centering an image with text Jerry Camel ASP .Net 6 09-23-2005 10:12 PM
Re: Centering inline elements Mark Parnell HTML 2 09-15-2004 03:12 PM



Advertisments