From: dorayme on
In article <pk9pr5hcaus511qi4bunmursr96nqtqs32(a)4ax.com>,
Albert Ross <spam(a)devnull.co.uk.invalid> wrote:

> On Wed, 07 Apr 2010 05:08:56 +1000, dorayme <dorayme(a)optusnet.com.au>
> wrote:


>
> >In article <qjpmr5d8js040mrl9l9vl59m4n91ag2e2c(a)4ax.com>,
> > Albert Ross <spam(a)devnull.co.uk.invalid> wrote:
> >
> >>
> >> There's something slightly freaky I don't quite understand here, I can
> >> put anything except an ul in the header and get it centred.
> >>
> >
> >I need to be reminded of the url and a more specific description
> >of what you are finding freaky.
> I started with Matthew James Taylor's otherwise excellent template and
> tried to adjust it so the navbar was centred
>
> http://www.combines.org.uk/Combines/about.html
>

Ah yes, now I recall.

> that was a much earlier failure
>
> I put the navbar into a separate div and toyed with adding his css
> code a bit at a time, and blocking out lines with Firebug.
>
> Somewhere around here
>
> #header ul li a {
> display:block;
> float:left;
> margin:0 0 0 1px;
> padding:3px 10px;
> text-align:center;
> background:#eee;
> color:#000;
> text-decoration:none;
> position:relative;
> left:15px;
> line-height:1.3em;
> }
>

Was it not at this point that I recommended a
minimum-interference solution for your problem that involved
modifying the above? Did I not say to remove the float because it
was shooting you in the foot here and to change the width so it
could be centred and suggested a character count width, 50 or so
em? What happened with this alleged pearl of wisdom of mine? Is
this something that was not understood or did it seem plain wrong
to you or did it not work when you tried it that you felt the
need to go on and find a different solution?


> everything snaps over to the left and stays there whatever I try to
> undo the effect
>
> I ended up doing this
>
> http://www.combines.org.uk/Combines/trial.html
>
> much simpler and works. problem solved

Essentially, you are relying on text-align: center here, all the
rest is not doing anything I can see.

..navbar {text-align: center;}
..navbar ul li {display:inline;}

with

<div class="navbar">
<ul>
<li><a href="intro.html" class="active">Home&nbsp;</a></li>
<li><a href="history.html">History&nbsp;</a></li>
<li><a href="bill.html">Bill's Story&nbsp;</a></li>
<li><a href="chris.html">Chris's Story&nbsp;</a></li>
<li><a href="about.html">About&nbsp;</a></li>
<li><a href="help.html">How You Can Help</a></li>
</ul>
</div>

Notice two relatively minor drawbacks with this: you have to use
no breaking spaces in the HTML, the other is that there is a
surely unsightly underlining overhang to the visible characters
in the link text (the no breaking space is being underlined, and
that is not something you would want to be drawing attention to
in any way, its naughty presentational job should be confined to
merely making a space. All this is fixable.

--
dorayme
From: Albert Ross on
On Thu, 08 Apr 2010 08:09:37 +1000, dorayme <dorayme(a)optusnet.com.au>
wrote:

>In article <pk9pr5hcaus511qi4bunmursr96nqtqs32(a)4ax.com>,
> Albert Ross <spam(a)devnull.co.uk.invalid> wrote:
>
>> On Wed, 07 Apr 2010 05:08:56 +1000, dorayme <dorayme(a)optusnet.com.au>
>> wrote:
>
>
>>
>> >In article <qjpmr5d8js040mrl9l9vl59m4n91ag2e2c(a)4ax.com>,
>> > Albert Ross <spam(a)devnull.co.uk.invalid> wrote:
>> >
>> >>
>> >> There's something slightly freaky I don't quite understand here, I can
>> >> put anything except an ul in the header and get it centred.
>> >>
>> >
>> >I need to be reminded of the url and a more specific description
>> >of what you are finding freaky.
>> I started with Matthew James Taylor's otherwise excellent template and
>> tried to adjust it so the navbar was centred
>>
>> http://www.combines.org.uk/Combines/about.html
>>
>
>Ah yes, now I recall.
>
>> that was a much earlier failure
>>
>> I put the navbar into a separate div and toyed with adding his css
>> code a bit at a time, and blocking out lines with Firebug.
>>
>> Somewhere around here
>>
>> #header ul li a {
>> display:block;
>> float:left;
>> margin:0 0 0 1px;
>> padding:3px 10px;
>> text-align:center;
>> background:#eee;
>> color:#000;
>> text-decoration:none;
>> position:relative;
>> left:15px;
>> line-height:1.3em;
>> }
>>
>
>Was it not at this point that I recommended a
>minimum-interference solution for your problem that involved
>modifying the above? Did I not say to remove the float because it
>was shooting you in the foot here and to change the width so it
>could be centred and suggested a character count width, 50 or so
>em? What happened with this alleged pearl of wisdom of mine? Is
>this something that was not understood or did it seem plain wrong
>to you or did it not work when you tried it that you felt the
>need to go on and find a different solution?

I misunderstood, I was changing the css that referred to the ul in
general. The whole code seems to hang together in that changing one
part gets overridden by other parts. So I ended up removing the lot,
it works well in his original concept but is too complicated for my
New Thought.

>> everything snaps over to the left and stays there whatever I try to
>> undo the effect
>>
>> I ended up doing this
>>
>> http://www.combines.org.uk/Combines/trial.html
>>
>> much simpler and works. problem solved
>
>Essentially, you are relying on text-align: center here, all the
>rest is not doing anything I can see.
>
>.navbar {text-align: center;}
>.navbar ul li {display:inline;}
>
>with
>
><div class="navbar">
><ul>
><li><a href="intro.html" class="active">Home&nbsp;</a></li>
><li><a href="history.html">History&nbsp;</a></li>
><li><a href="bill.html">Bill's Story&nbsp;</a></li>
><li><a href="chris.html">Chris's Story&nbsp;</a></li>
><li><a href="about.html">About&nbsp;</a></li>
><li><a href="help.html">How You Can Help</a></li>
></ul>
></div>

Pretty much yes, I hadn't finished yet! I might still need some of it
later. I'm reusing the code with slight variations on a couple of
other sites and the bits I don't need will vary. Essentially I like
the way his columns work but I'm simplifying the header code a lot.

>Notice two relatively minor drawbacks with this: you have to use
>no breaking spaces in the HTML, the other is that there is a
>surely unsightly underlining overhang to the visible characters
>in the link text (the no breaking space is being underlined, and
>that is not something you would want to be drawing attention to
>in any way, its naughty presentational job should be confined to
>merely making a space. All this is fixable.

Careful or I will start putting Rounded Corners on everything! Yes the
&nbsp was a quick and dirty fix to break up the underline which showed
as an unbroken underline uner the whole lot in some browser. My first
intention was to style the text into blocks/buttons but I thought I'd
leave it as text (likewise the text in the side panels on the original
design I was going to style with the manufacturers' logos but decided
it looked simpler just as text) I haven't finally decided how to style
it but I;m going with "less is more", probably some padding or margin
or both?