Hi again. Just wondering what is the simplest and best way to center html text within a coloured html box.
Tried padding each side a similar amount. looks good but not when previewed. What’s up here? What is the correct procedure please? It is a bit hit and miss for me on this one. obviously a gif would work. Is that the best way?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 30 Mar. 2008, 9:44 pm, John-Paul Kernot wrote:
Hi again. Just wondering what is the simplest and best way to center html text within a coloured html box.
Tried padding each side a similar amount. looks good but not when previewed. What’s up here? What is the correct procedure please? It is a bit hit and miss for me on this one. obviously a gif would work. Is that the best way?
Sorry - I mean centre in the horizontal way, equidistant from top and bottom
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 30 Mar 2008, at 22:45, John-Paul Kernot wrote:
Sorry - I mean centre in the horizontal way, equidistant from top
and bottom
Apply padding top and bottom?
best wishes
Paul Bradforth
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Tried padding each 4 side a similar amount. Text always floats to top.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 30 Mar 2008, at 23:38, John-Paul Kernot wrote:
Tried padding each 4 side a similar amount. Text always floats to top.
It can’t! If you have, say, 20px of padding at the top, the text
can’t go there; it’s the law!
best wishes
Paul Bradforth
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Jean-Paul
Have you got a link to the page in question?
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Dave -
simply draw a colored html box say 30 px high
pad 12px each side
fill with html text arial 12 pt 12pt in the style
looks centered now right?
preview - kaput! text moves up slightly
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I am not seeing this shift John-Paul
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Yup it still shifts. Don’t really know what you’re seeing here.
But the real crux of this is as to why it is so hard to centre html text (equidesitant from top and bottom of the enclosing box)- I mean REALLY hard!
Obviously much easier to use a gif but then who wants to?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Ok - let me put it this way.
I draw 12pt text in a 30px high box
I give the box an 18px padding from top
Not very obvious at this point that this padding should work.
The text is slightly above the middle line.
But, surprise! When previewed it is perfect!
So why does this happen? Is it a clear example of WYSINWYG?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 1 Apr 2008, at 11:18, John-Paul Kernot wrote:
But the real crux of this is as to why it is so hard to centre html
text (equidesitant from top and bottom of the enclosing box)- I
mean REALLY hard!
Is this what you’re trying to do?
http://www.paulbradforth.com/personalpics//ZZ00B9A992.jpg
… because if it is, it’s really easy!
best wishes
Paul Bradforth
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 1 Apr 2008, at 11:28, John-Paul Kernot wrote:
Ok - let me put it this way.
I draw 12pt text in a 30px high box
I give the box an 18px padding from topNot very obvious at this point that this padding should work.
The text is slightly above the middle line.But, surprise! When previewed it is perfect!
So why does this happen? Is it a clear example of WYSINWYG?
Still not sure what problem you’re having. I did what you say above,
and got this:
http://www.paulbradforth.com/personalpics//ZZ696901F7.jpg
As you can see from the handles on the top box, the text is exactly
in the middle, not slightly above the line; the Preview looks the same?
best wishes
Paul Bradforth
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks Paul - must be something else wrong here. I am looking into it.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Sometime around 1/4/08 (at 07:39 -0400) John-Paul Kernot said:
Thanks Paul - must be something else wrong here. I am looking into it.
You are right, however, about the need for a truly simple way to do
this. (BTW, it is probably more helpful to talk about “vertical
centering” rather than just centering; that’s easily done with a
simple paragraph alignment style.)
Vertical centering is a very useful thing in traditional DTP tools.
It is possible in table cells; those have a vertical alignment
setting that can be applied. But I don’t know if there’s an
equivalent in CSS for divs. The process of using padding is okay,
ish.
The apparent vertical centering effect breaks if the text that’s been
carefully centered happens to run over one more line, or underruns by
a line too for that matter. This is bad enough with text that might
happen to be drawn slightly larger in some browsers, but if you want
to achieve this effect and you’re working with CMS-based content -
just forget it. That fairly basic print-design feature seems to be
damn well non-existent in CSS-based web design.*
I’m not talking about just Freeway here BTW, this seems to be a real
weak spot of CSS in general, regardless of what tool you use to
write/generate it.
(*I will of course be delighted to be proved wrong!)
k
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Simple? Well, it’s not terribly difficult but then there’s no point-n-click solution either. Take what you can get I suppose. I’ve used this in the past though there are several variations out there, all of which have limitations from what I’ve found so far. Depending on if you want to center just one line or an entire block the method may vary. Hopefully the CSS 3 spec will offer better support.
Scroll down to Method 1, <http://phrogz.net/CSS/vertical-align/index.html>
On Apr 1, 2008, at 9:18 AM, Keith Martin wrote:
You are right, however, about the need for a truly simple way to do this.
Sometime around 1/4/08 (at 09:57 -0500) Todd said:
Simple? Well, it’s not terribly difficult but then there’s no
point-n-click solution either. Take what you can get I suppose. I’ve
used this in the past though there are several variations out there,
all of which have limitations from what I’ve found so far
Exactly. If I want to have something centered but that thing could
have a varying number of lines, because it is content pulled in from
some external source (i.e. some database-driven source such as a blog
or regular CMS) it is simply not practical to attempt.
Hopefully CS3, as you say. But how many years will it be before we
can rely on the average visitor having a CS3-spec browser? 
k
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 1 Apr. 2008, 3:45 pm, thatkeith wrote:
… But how many years will it be before we
can rely on the average visitor having a CS3-spec browser?k
…or a Mac for that matter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I agree. I threw this example out there to show that it is possible
to do without using padding using the current CSS2 spec albeit with
certain restrictions depending on your requirements. It may not FW-
simple but it is another possible option.
Todd
On Apr 1, 2008, at 10:40 AM, Keith Martin wrote:
Sometime around 1/4/08 (at 09:57 -0500) Todd said:
Simple? Well, it’s not terribly difficult but then there’s no
point-n-click solution either. Take what you can get I suppose. I’ve
used this in the past though there are several variations out there,
all of which have limitations from what I’ve found so farHopefully CS3, as you say. But how many years will it be before we
can rely on the average visitor having a CS3-spec browser?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options