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

 
 
Ian
Guest
Posts: n/a
 
      04-04-2012
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.
 
Reply With Quote
 
 
 
 
Ian
Guest
Posts: n/a
 
      04-04-2012
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.
 
Reply With Quote
 
 
 
 
ian.rastall@gmail.com
Guest
Posts: n/a
 
      04-04-2012
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.
 
Reply With Quote
 
Captain Paralytic
Guest
Posts: n/a
 
      04-04-2012
On Apr 4, 5:08*am, (E-Mail Removed) 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.
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      04-04-2012
In article
<24141455.1211.1333506308179.JavaMail.geo-discussion-forums@ynil13>,
Ian <(E-Mail Removed)> 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
 
Reply With Quote
 
ian.rastall@gmail.com
Guest
Posts: n/a
 
      04-04-2012
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.
 
Reply With Quote
 
BootNic
Guest
Posts: n/a
 
      04-04-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,


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

iEYEARECAAYFAk980g8ACgkQOcdbyBqMFBEmbACgg9KZRRuebs aw7wyCiLksTy/K
8YwAn0Pbn4xMPNoH/IG70F2zejqACDb7
=EsKd
-----END PGP SIGNATURE-----

 
Reply With Quote
 
ian.rastall@gmail.com
Guest
Posts: n/a
 
      04-05-2012
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.
 
Reply With Quote
 
Ben Bacarisse
Guest
Posts: n/a
 
      04-05-2012
(E-Mail Removed) 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.
 
Reply With Quote
 
ian.rastall@gmail.com
Guest
Posts: n/a
 
      04-05-2012
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.
 
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