Centralising a header?

[Terry Pinnell]

Do the alignment buttons not work when you try to use them on headers
which have been given a text align attribute in a CSS sheet? IOW, do
styles override manual editing?

On the page
http://www.cupod-mentoring.com/swprojectdoc_copy.htm
I thought I'd try centralising the header
'The role of mentors, schools and higher education institutions in
ensuring quality initial teacher training.' But the tool didn't work.

Checking the CSS file, I see I'd added this to h3 when I made it about
5 months ago:
text-align: left;

So to try that change, do I need to add another style, called say
'h3center'? Or is the approach to leave alignment out of styles, and
apply that with the buttons as you prefer? Or none of the above?

 

[Stefan B Rusynko]

The HX tags support html alignment (align="center" attribute)
- select it and click the center alignment formatting button

Or in CSS create either a class (apply style to any HX) or subclass of H3
..center
h3.center
--




| Do the alignment buttons not work when you try to use them on headers
| which have been given a text align attribute in a CSS sheet? IOW, do
| styles override manual editing?
|
| On the page
| http://www.cupod-mentoring.com/swprojectdoc_copy.htm
| I thought I'd try centralising the header
| 'The role of mentors, schools and higher education institutions in
| ensuring quality initial teacher training.' But the tool didn't work.
|
| Checking the CSS file, I see I'd added this to h3 when I made it about
| 5 months ago:
| text-align: left;
|
| So to try that change, do I need to add another style, called say
| 'h3center'? Or is the approach to leave alignment out of styles, and
| apply that with the buttons as you prefer? Or none of the above?
|
| --
| Terry, West Sussex, UK
|
|

 

[Terry Pinnell]

The HX tags support html alignment (align="center" attribute)
- select it and click the center alignment formatting button

Or in CSS create either a class (apply style to any HX) or subclass of H3
.center
h3.center

Thanks, but, as you see, it doesn't work here! Although the code looks
OK

<h3 align="center">The role of mentors, schools and higher education
institutions in ensuring quality initial teacher training.</h3>

the header is plainly still left-aligned.

 

[Stefan B Rusynko]

And I guess it won't until you publish your changes (-;
I see in your source right now no alignment
<h3>The role of mentors, schools and higher education institutions in ensuring quality initial teacher training.</h3>
<h4><i><b>By Simon Webster, Uckfield Community Technology College.</b></i></h4>

--




|
| >The HX tags support html alignment (align="center" attribute)
| >- select it and click the center alignment formatting button
| >
| >Or in CSS create either a class (apply style to any HX) or subclass of H3
| >.center
| >h3.center
|
| Thanks, but, as you see, it doesn't work here! Although the code looks
| OK
|
| <h3 align="center">The role of mentors, schools and higher education
| institutions in ensuring quality initial teacher training.</h3>
|
| the header is plainly still left-aligned.
|
| --
| Terry, West Sussex, UK
|

 

[Terry Pinnell]

And I guess it won't until you publish your changes (-;
I see in your source right now no alignment
<h3>The role of mentors, schools and higher education institutions in ensuring quality initial teacher training.</h3>
<h4><i><b>By Simon Webster, Uckfield Community Technology College.</b></i></h4>

That's very odd! It was published, and I've just done it *again* after
checking the HTML:
<h3 align="center">The role of mentors, schools and higher education
institutions in ensuring quality initial teacher training.</h3>

Yet, as I compose this, I'm looking at that page
http://www.cupod-mentoring.com/swprojectdoc_copy.htm
with View|Source, and seeing:
<h3>The role of mentors, schools and higher education institutions in
ensuring quality initial teacher training.</h3>

I'll do it once more after sending this post. It's worrying that it
can be out of sync like this. BTW, I used F5 and <Ctrl+F5> while
viewing online, to make sure I wan't getting my cache.

 

[Terry Pinnell]

That's very odd! It was published, and I've just done it *again* after
checking the HTML:
<h3 align="center">The role of mentors, schools and higher education
institutions in ensuring quality initial teacher training.</h3>

Yet, as I compose this, I'm looking at that page
http://www.cupod-mentoring.com/swprojectdoc_copy.htm
with View|Source, and seeing:
<h3>The role of mentors, schools and higher education institutions in
ensuring quality initial teacher training.</h3>

I'll do it once more after sending this post. It's worrying that it
can be out of sync like this. BTW, I used F5 and <Ctrl+F5> while
viewing online, to make sure I wan't getting my cache.

OK, just published again (that's 3rd publish since centering the
header!) and *this* time at least the HTML code is correct:
<h3 align="center">The role of mentors, schools and higher education
institutions in ensuring quality initial teacher training.</h3>

So now you can see the effect I was describing: the header is not
centered.

 

[chris leeds]

perhaps your style sheet is interfering. either set a new class or remove
the one you've got?
I just checked the page and it looked centered in ie6. the page is very
wide for no reason as well. might want to look at that.
HTH

 

[Terry Pinnell]

perhaps your style sheet is interfering. either set a new class or remove
the one you've got?

Thanks Chris. Full circle! That comes back to my original question:
"Do the alignment buttons not work when you try to use them on headers
which have been given a text align attribute in a CSS sheet? IOW, do
styles override manual editing?"

I have this in my sheet:

h3 {
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #31639C;
font-weight: bold
}

That 'text-align: left' was because I originally anticipated most
Header 3 lines to be left-aligned. In fact, that remains true,
although occasionally I'd like to try centering instead.

I just checked the page and it looked centered in ie6.

Do you mean that
'The role of mentors, schools and higher education institutions in
ensuring quality initial teacher training.'
is centered? I'm using MSIE6 and it looks like this here:
'The role of mentors, schools and higher education
institutions in ensuring quality initial teacher training.'
i.e. flush against left.

the page is very wide for no reason as well. might want to look at that.

OK, thank you. Still working on it, so not too surprised about that
though.

 

[chris leeds]

it may be browser specific. in my experimentation with style sheets for
layout I've found that opera, ie, and especially mozilla firebird all treat
the style sheet slightly differently and require different ways to apply the
style to an element.
I think the answer would depend on the browser in question.
If it were me I'd probably just do the text-align: center; on the style
sheet.

 

[Terry Pinnell]

it may be browser specific. in my experimentation with style sheets for
layout I've found that opera, ie, and especially mozilla firebird all treat
the style sheet slightly differently and require different ways to apply the
style to an element.
I think the answer would depend on the browser in question.
If it were me I'd probably just do the text-align: center; on the style
sheet.

Thanks for the follow-up. I've done exactly that, and it now centres
just fine. (Even centers too!)

It's unsettling though when you use that align button and nothing
happens. I'd still like to learn the definitive story on that
sometime.

Appreciate your help.

 

[chris leeds]

you think that's unsettling? try to do something like use .css for
positioning and layout and you'll really be unsettled. then see how your
new creation works in the different browsers and you'll be totally freaked
out ;-).
I think I'm going to give up on the css-p and just use tables with a style
sheet for everything else......very frustrating for something as promising
as .css ;-)
take a look at this:
http://csszengarden.com it's absolutely amazing how just a style sheet can
change the presentation of an html page.

 

[Terry Pinnell]

you think that's unsettling? try to do something like use .css for
positioning and layout and you'll really be unsettled. then see how your
new creation works in the different browsers and you'll be totally freaked
out ;-).
I think I'm going to give up on the css-p and just use tables with a style
sheet for everything else......very frustrating for something as promising
as .css ;-)
take a look at this:
http://csszengarden.com it's absolutely amazing how just a style sheet can
change the presentation of an html page.

I'll have a go at that exercise when I have a few hours - and my
nerves are in good shape <g>.

 

[jon spivey]

Remember 6 months ago everyone saying CSS-P was going to render tables for
layout obsolete? I think the best way is 1 table for layout and all content
within styled with CSS. For example try doing a 2 column layout - fluid main
column and fixed width sidebar on the right with CSS. This takes 2 seconds
with a table and is near impossible (cross browser) with CSS

Not sure why that csszengarden link is always posted as an example of what
CSS can do - it seems to be a good example of what CSS can't do

--
Jon
Microsoft MVP - FP

you think that's unsettling? try to do something like use .css for
positioning and layout and you'll really be unsettled. then see how your
new creation works in the different browsers and you'll be totally freaked
out ;-).
I think I'm going to give up on the css-p and just use tables with a style
sheet for everything else......very frustrating for something as promising
as .css ;-)
take a look at this:
http://csszengarden.com it's absolutely amazing how just a style sheet can
change the presentation of an html page.

apply

 

[Stefan B Rusynko]

It is centered but will never show because of your bad cell sizing issue
<td valign="top" height="7120" width="146">
The cell width is messing you up
- remove all you cell sizings from dragging cells

Html attributes (<h3 align="center">) rule over any css formatting

--




|
| >And I guess it won't until you publish your changes (-;
| >I see in your source right now no alignment
| ><h3>The role of mentors, schools and higher education institutions in ensuring quality initial teacher training.</h3>
| ><h4><i><b>By Simon Webster, Uckfield Community Technology College.</b></i></h4>
|
| That's very odd! It was published, and I've just done it *again* after
| checking the HTML:
| <h3 align="center">The role of mentors, schools and higher education
| institutions in ensuring quality initial teacher training.</h3>
|
| Yet, as I compose this, I'm looking at that page
| http://www.cupod-mentoring.com/swprojectdoc_copy.htm
| with View|Source, and seeing:
| <h3>The role of mentors, schools and higher education institutions in
| ensuring quality initial teacher training.</h3>
|
| I'll do it once more after sending this post. It's worrying that it
| can be out of sync like this. BTW, I used F5 and <Ctrl+F5> while
| viewing online, to make sure I wan't getting my cache.
|
| --
| Terry, West Sussex, UK
|

 

[chris leeds]

I've come to the same conclusion ( although from a much less experienced
standpoint) that the way to go is tables AND .css, maybe I'll start my own
cult. I wish it wasn't all .css OR tables out there. it really does seem
to make sense to use both. the only thing I can think is that maybe .css
has a little advantage for "aural" display because the screen reader won't
be rattling off table cells till the cows come home. maybe if i do and @
rule for aural display and specify td, tr, table as display: none; that'd
fix it....as long as the contents of a td, tr, or table don't also get the
property. it's really a small issue, unless you're blind or otherwise
forced to use the aural browser.

Remember 6 months ago everyone saying CSS-P was going to render tables for
layout obsolete? I think the best way is 1 table for layout and all content
within styled with CSS. For example try doing a 2 column layout - fluid main
column and fixed width sidebar on the right with CSS. This takes 2 seconds
with a table and is near impossible (cross browser) with CSS

Not sure why that csszengarden link is always posted as an example of what
CSS can do - it seems to be a good example of what CSS can't do

 

[Terry Pinnell]

It is centered but will never show because of your bad cell sizing issue
<td valign="top" height="7120" width="146">
The cell width is messing you up
- remove all you cell sizings from dragging cells

Html attributes (<h3 align="center">) rule over any css formatting

Well done, thanks Stefan - glad that mystery's solved. I'll come back
later and fix it properly the way you suggest.

Must say I'm confused why FP has what seems to be this very handy and
intuitive dragging facility - yet it seems a recipe for certain chaos?

BTW, I was doing a *lot* of dragging at one stage. Most of it was with
the aim of getting the left hand column of those 4 tables to line up
under each other. As its content in each table was identical, I
thought it looked tidier that way. I reckon I had managed it, but
somehow lost it again. So I've now taken line of least resistance and
used 'Autofit' on all 4 tables. The plus is that tables are now
identical in size, but the downside is that the identical left columns
no longer line up.

Thanks for your help on this stuff.

 

[Ozz]

Remember 6 months ago everyone saying CSS-P was going to render tables for
layout obsolete? I think the best way is 1 table for layout and all content
within styled with CSS. For example try doing a 2 column layout - fluid main
column and fixed width sidebar on the right with CSS. This takes 2 seconds
with a table and is near impossible (cross browser) with CSS

If you are interested in seeing how to use CSS for page layout take a
look at http://www.bluerobot.com/web/layouts/ or
http://glish.com/css/.

I have started to implement their techniques on my site at work. Using
tables *is* easier, especially if you are not familiar with CSS, but
it creates pages that are far less accessible and not compliant with
W3C standards.
--