Centering text inside a <header> with two other elements

[Ian]

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.

 

[Ian]

Apologies. I neglected to actually ask the question that the subject posed. I can't figure out how to unstick the middle element from the left one. I considered declaring a width of 100%, but of course that would have shoved things off the page.

Hope all are well.

 

[ian.rastall]

Apologies. I neglected to actually ask the question that the subject posed. I can't figure out how to unstick the middle element from the left one. I considered declaring a width of 100%, but of course that would have shoved things off the page.

As it turns out, since no one had any suggestions to offer, I decided it wasn't so bad to just go with the flow, so to speak. I knew I couldn't figureout how to truly center the text in the header, so that when I changed thesize of the browser window, the text would stay in the center. Instead, I started out the "middle" section with a bullet, and then added further padding.

The next step is to find a way to use the <h1> below the <header> (in the main <section>) to fill the <p> in the middle with its content. However, notbeing that advanced a coder, I would have no idea where to start. That's for another day.

Hope that's useful in some way. Hope all are well.

 

[Captain Paralytic]

As it turns out, since no one had any suggestions to offer, I decided it wasn't so bad to just go with the flow, so to speak. I knew I couldn't figure out how to truly center the text in the header, so that when I changed the size of the browser window, the text would stay in the center. Instead, I started out the "middle" section with a bullet, and then added further padding.

The next step is to find a way to use the <h1> below the <header> (in themain <section>) to fill the <p> in the middle with its content. However, not being that advanced a coder, I would have no idea where to start. That'sfor another day.

Hope that's useful in some way. Hope all are well.

You didn't exactly wait very long for an answer!

You haven't given you paragraph a width, so it will occupy a space
just large enough to contain the text.

If you use something like Chrome developer tools, you can use it to
highlight the elements and you will see the width of the <p> element
in which it is trying to centre.

 

[dorayme]

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

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?

 

[ian.rastall]

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.

 

[BootNic]

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,

[snip]

A table is the answer, no need for an element table, CSS table will suffice.

<!--[if IE 8]>
<script
src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style type="text/css">

header {
display: table;
min-width: 100%;
padding: 0.3em 0;
}
header > :nth-child(1) {
padding-left: 25px;
}
header > :nth-child(2) {
text-align: center;
width: 34%;
}
header > :nth-child(2):before {
content: '•';
display: inline-block;
font-size: larger;
padding-right: 0.5em;
vertical-align: middle;
}
header > :nth-child(3) {
padding-right: 25px;
text-align: right;
}
header > h1 > [href] {
background-color: transparent;
color: rgb(255, 255, 255);
}
header > h1,
header > div {
display: table-cell;
float: none;
margin: 0;
padding: 0;
vertical-align: middle;
white-space: nowrap;
width: 33%;
}

</style>

<header>
<h1>
<a href="http://sundry.us/">Bookstacks</a>
</h1>
<div>
Jane Austen
</div>
<div>
Free eBooks
</div>
</header>


--
BootNic Wed Apr 4, 2012 06:58 pm
Curious things, habits. People themselves never knew they had them.
*Agatha Christie*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)

iEYEARECAAYFAk980g8ACgkQOcdbyBqMFBEmbACgg9KZRRuebsaw7wyCiLksTy/K
8YwAn0Pbn4xMPNoH/IG70F2zejqACDb7
=EsKd
-----END PGP SIGNATURE-----

 

[ian.rastall]

A table is the answer, no need for an element table, CSS table will suffice.

Thank you. That works exactly as I had needed. It's going to take a while to figure out what you're doing with the CSS, but that's on my own time. Thank you again.

 

[Ben Bacarisse]

Thank you. That works exactly as I had needed. It's going to take a
while to figure out what you're doing with the CSS, but that's on my
own time. Thank you again.

You might want to check that the method works for the targets you have in
mind. For example, I don't think it works at all in IE7.

 

[ian.rastall]

You might want to check that the method works for the targets you have in
mind. For example, I don't think it works at all in IE7.

Hey Ben. Part of my reasoning is that it will take me a good year to rebuild the site. My domain mapping with WordPress doesn't expire until next February, so by then (hopefully) HTML5 will be pretty well established. As for IE7, I know that XP doesn't even allow for IE9, so it's reasonable to expect some people will be stuck on 8 or 7, but, again, hopefully in a year's time, it won't be such an issue. The main thing is, building it in 4.01 wouldbe a waste of my time, as I would just have to redo everything eventually anyway ... and part of the fun of this project is exploring everything new I can do with 5 and CSS3.

Hope you're well.

 

[dorayme]

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.

 

[Norman Peelman]

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

 

[Jonathan N. Little]

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

 

[ian.rastall]

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.

 

[Beauregard T. Shagnasty]

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.

 

[ian.rastall]

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.

 

[Norman Peelman]

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.

 

[Jonathan N. Little]

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

 

[dorayme]

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>

 

[Norman Peelman]

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.