Centering text inside a <header> with two other elements

Discussion in 'HTML' started by Ian, Apr 4, 2012.

  1. Ian

    Ian Guest

    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, Apr 4, 2012
    #1
    1. Advertising

  2. Ian

    Ian Guest

    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, Apr 4, 2012
    #2
    1. Advertising

  3. Ian

    Guest

    On Tuesday, April 3, 2012 10:42:02 PM UTC-4, Ian wrote:
    > 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.
    , Apr 4, 2012
    #3
  4. On Apr 4, 5:08 am, wrote:
    > On Tuesday, April 3, 2012 10:42:02 PM UTC-4, Ian wrote:
    > > 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 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.
    Captain Paralytic, Apr 4, 2012
    #4
  5. Ian

    dorayme Guest

    In article
    <24141455.1211.1333506308179.JavaMail.geo-discussion-forums@ynil13>,
    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


    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?

    --
    dorayme
    dorayme, Apr 4, 2012
    #5
  6. Ian

    Guest

    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.
    , Apr 4, 2012
    #6
  7. Ian

    BootNic Guest

    In article <33160409.794.1333574175450.JavaMail.geo-discussion-forums@ynib40>,
    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,


    [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-----
    BootNic, Apr 4, 2012
    #7
  8. Ian

    Guest

    On Wednesday, April 4, 2012 6:58:23 PM UTC-4, BootNic wrote:
    > 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.
    , Apr 5, 2012
    #8
  9. writes:

    > On Wednesday, April 4, 2012 6:58:23 PM UTC-4, BootNic wrote:
    >> 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.


    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.

    --
    Ben.
    Ben Bacarisse, Apr 5, 2012
    #9
  10. Ian

    Guest

    On Wednesday, April 4, 2012 9:21:50 PM UTC-4, Ben Bacarisse wrote:
    > 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.
    , Apr 5, 2012
    #10
  11. Ian

    dorayme Guest

    In article
    <33160409.794.1333574175450.JavaMail.geo-discussion-forums@ynib40>,
    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
    dorayme, Apr 5, 2012
    #11
  12. 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
    Norman Peelman, Apr 5, 2012
    #12
  13. 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
    Jonathan N. Little, Apr 5, 2012
    #13
  14. Ian

    Guest

    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.
    , Apr 5, 2012
    #14
  15. 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
    Beauregard T. Shagnasty, Apr 5, 2012
    #15
  16. Ian

    Guest

    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.
    , Apr 5, 2012
    #16
  17. 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
    Norman Peelman, Apr 5, 2012
    #17
  18. 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
    Jonathan N. Little, Apr 6, 2012
    #18
  19. Ian

    dorayme Guest

    In article
    <8036578.244.1333635931121.JavaMail.geo-discussion-forums@ynib40>,
    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
    dorayme, Apr 6, 2012
    #19
  20. 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
    Norman Peelman, Apr 6, 2012
    #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. Mark Parnell

    Re: Centering inline elements

    Mark Parnell, Sep 15, 2004, in forum: HTML
    Replies:
    2
    Views:
    1,375
  2. Jon Slaughter

    Centering Header

    Jon Slaughter, Mar 22, 2007, in forum: HTML
    Replies:
    14
    Views:
    594
    dorayme
    Mar 22, 2007
  3. Ultrus
    Replies:
    4
    Views:
    2,520
    Stefan Behnel
    Aug 30, 2007
  4. mlt
    Replies:
    2
    Views:
    819
    Jean-Marc Bourguet
    Jan 31, 2009
  5. Newbie
    Replies:
    37
    Views:
    1,331
    Beauregard T. Shagnasty
    Feb 9, 2011
Loading...

Share This Page