Help needed with minor CSS layout problems

[Martin Clark]

I am developing a new design for a canal society website.
The look I am attempting to achieve can be seen here:
http://www.tamevalley.freeserve.co.uk/hcs/index.htm
This has been achieved easily using tables for layout.

However, I am mindful of the current thinking that CSS should be used
for layout rather than tables.
I have managed to get as far as this using CSS for layout:
http://www.tamevalley.freeserve.co.uk/hcs/index2.htm

There are four problems I would appreciate help with:

1) The society's name in the header section appears at the bottom of the
dark blue header box, whereas I want it to be vertically central. I have
used vertical-align: middle; but I think this only affects images rather
than text.
In IE6, the text sits on the white line at the bottom of the box. In
Firefox it partly disappears behind the navigation bar. In Opera it
partly overlaps the navigation bar.
How can I get the text to appear half-way up the dark blue header box?

2)How can I get that same text in the header box to wrap onto a second
line in smaller windows (such as 800 pixels width), rather than overlap
the photo on the right? I would like to keep the white text in the dark
blue area only (as happens in the tables version).

3) In Firefox, the white area for the page's content overflows from the
"container" and covers the background colour to the right of the page.
This does not happen in Opera or IE6. How can I avoid this happening?

4) I only want the background colour to be visible to the left and
right, as happens with the table layout. Using CSS, the background is
also visible at the top and bottom.
I have set .container {margin: 0 3% 0 3%;} but this doesn't achieve what
I want. Any suggestions, please?

The pages have been validated and show no errors.
Most of the links on the page do not yet work.
Any assistance or pointers will be gratefully received.

 

[Neredbojias]

With neither quill nor qualm, Martin Clark quothed:

I am developing a new design for a canal society website.
The look I am attempting to achieve can be seen here:
http://www.tamevalley.freeserve.co.uk/hcs/index.htm
This has been achieved easily using tables for layout.

However, I am mindful of the current thinking that CSS should be used
for layout rather than tables.
I have managed to get as far as this using CSS for layout:
http://www.tamevalley.freeserve.co.uk/hcs/index2.htm

There are four problems I would appreciate help with:

1) The society's name in the header section appears at the bottom of the
dark blue header box, whereas I want it to be vertically central. I have
used vertical-align: middle; but I think this only affects images rather
than text.
In IE6, the text sits on the white line at the bottom of the box. In
Firefox it partly disappears behind the navigation bar. In Opera it
partly overlaps the navigation bar.
How can I get the text to appear half-way up the dark blue header box?

It appears to be next to an image, so when you use vertical-align,
assign a value in pixels (which will be _roughly_ half the image
height.)

 

[David Graham]

I am developing a new design for a canal society website.
The look I am attempting to achieve can be seen here:
http://www.tamevalley.freeserve.co.uk/hcs/index.htm
This has been achieved easily using tables for layout.

However, I am mindful of the current thinking that CSS should be used
for layout rather than tables.
I have managed to get as far as this using CSS for layout:
http://www.tamevalley.freeserve.co.uk/hcs/index2.htm

There are four problems I would appreciate help with:

1) The society's name in the header section appears at the bottom of the
dark blue header box, whereas I want it to be vertically central. I have
used vertical-align: middle; but I think this only affects images rather
than text.
In IE6, the text sits on the white line at the bottom of the box. In
Firefox it partly disappears behind the navigation bar. In Opera it
partly overlaps the navigation bar.
How can I get the text to appear half-way up the dark blue header box?

Hi
Does it help if you put a unit in the height (px) - anything other than 0
needs a unit
..header {background-color:#281870; width: 100%; height: 79;}
HTH
David

 

[Martin Clark]

Neredbojias wrote...

With neither quill nor qualm, Martin Clark quothed:

It appears to be next to an image, so when you use vertical-align,
assign a value in pixels (which will be _roughly_ half the image
height.)

Thanks. I've tried that and it now does what I need in IE6, but the text
has only moved a little higher in Firefox and Opera.

 

[Martin Clark]

David Graham wrote...

Does it help if you put a unit in the height (px) - anything other than 0
needs a unit
.header {background-color:#281870; width: 100%; height: 79;}

Thanks for pointing that out, David. I have now changed it.
Sadly, it does not solve the problem.

 

[Alan J. Flavell]

David Graham wrote...

Thanks for pointing that out, David.

What might have also been pointed out is that it's a courtesy to other
usenauts to feed one's CSS (and HTML too) to the appropriate checkers
first, and to iron out these trivia before seeking help. It's
demeaning to ask humans to carry our trivial mechanical checks that
are so easily done by computer.

(It's particularly easy to do that if you install Chris Pederick's web
developer toolbar for Mozilla or Firefox).

 

[Martin Clark]

Alan J. Flavell wrote...

What might have also been pointed out is that it's a courtesy to other
usenauts to feed one's CSS (and HTML too) to the appropriate checkers
first, and to iron out these trivia before seeking help. It's
demeaning to ask humans to carry our trivial mechanical checks that
are so easily done by computer.

Sorry to have so demeaned you. I'm afraid I made the error of thinking
that if the style sheet is embedded in the page and I ran the page
through a validator then it would validate the CSS as well as the HTML.
However, as you have so courteously pointed out my error, I have run the
page through a separate CSS checker and corrected the faults.

The white text now appears in the correct position. Thank you, both.

Now, perhaps someone is able to offer some suggestions for the other 3
problems I mentioned? They are still there even with the corrected CSS!

(It's particularly easy to do that if you install Chris Pederick's web
developer toolbar for Mozilla or Firefox).

I should be delighted to add it to my Firefox. Thank you for the
suggestion.

 

[Martin Clark]

I wrote...

Now, perhaps someone is able to offer some suggestions for the other 3
problems I mentioned? They are still there even with the corrected CSS!

I have now solved two of these problems by removing the ".container" div
and setting margin and padding properties for "body".

I am still trying to find a way to make the white text in the header
area wrap in a 800 px window, rather than overflow across the photo.
Newest version: http://www.tamevalley.freeserve.co.uk/hcs/index2.htm

Any suggestions as to which properties I should be looking at would be
appreciated.

 

[Spartanicus]

I have now solved two of these problems by removing the ".container" div
and setting margin and padding properties for "body".

I am still trying to find a way to make the white text in the header
area wrap in a 800 px window, rather than overflow across the photo.
Newest version: http://www.tamevalley.freeserve.co.uk/hcs/index2.htm

Any suggestions as to which properties I should be looking at would be
appreciated.

You should fix these issues:

Use a Strict doctype, Transitional is for legacy documents who's code
can otherwise not be updated, and what you have now triggers quirks
mode.
Move the CSS to an external stylesheet.
Remove the presentational markup.
Two navbars are a nuisance, one suffices.
Nav links should be marked up as an unordered list, not as paragraphs.
Remove the spacer gifs, use CSS instead.
Fix your header structure, add one <h1> with "Huddersfield Canal
Society" as it's content.
Remove the <hr> and &nbsp;, use CSS instead.
Your body text size is uncomfortably small for me, there's little point
in specifying text-size:100% if you then reduce it to 90% for
..maincolumn
Fix your alt text, the logo is merely decorative, use alt="".
You've used far to many classes.
Don't use <br> to create spacings, use CSS.
Don't use characters ( ][ )to separate links, specify a border with CSS.
Don't use absolute positioning for the header, there is no need to do so
and it results in the problem you are seeing.

 

[Jonathan N. Little]

I wrote...



I have now solved two of these problems by removing the ".container" div
and setting margin and padding properties for "body".

I am still trying to find a way to make the white text in the header
area wrap in a 800 px window, rather than overflow across the photo.
Newest version: http://www.tamevalley.freeserve.co.uk/hcs/index2.htm

Any suggestions as to which properties I should be looking at would be
appreciated.

Try this...a little simpler

REPLACE your header, huddersfield , banner class defs with:

..header {background-color:#281870; color:#ffffff; width: 100%; }
..header {
font-family: Times New Roman, serif;
font-size: 1.75em; /* don't use Points on web */
font-weight: 700;
color: #ffffff;
background-color: #281870;
width: 100%;
margin: 0;
padding: 0;
}
..header .huddersfield { vertical-align: middle; }
..header .banner { float: right; }
..header A { color: #ffffff; white-space: nowrap; }
..line { clear: left; }

REPLACE HTML

<div class="header">
<!-- banner now first as it is floated and dumped unneeded SPANs -->
<img class="banner" src="images/banner01.jpg" width="420" height="78"
alt="Huddersfield Narrow canal">

<img class="huddersfield" src="images/translogo04.gif" width="125"
height="78" alt="Huddersfield Canal Society logo"
title="Huddersfield Canal Society logo">

<a href="index.htm" class="society">Huddersfield Canal Society</a>
</div>

for >800 windows 'Huddersfield Canal Society' slides under logo

 

[Martin Clark]

Spartanicus wrote...

You should fix these issues:

Hello Spartanicus. Thank you for taking the trouble to look through my
code.

Use a Strict doctype, Transitional is for legacy documents who's code
can otherwise not be updated, and what you have now triggers quirks
mode.

I have changed it to Strict. This has not produced a solution to the
problem I had. Instead, it has created a new problem - there is a small
gap between the header and the navigation bar in Firefox (and an even
smaller gap in Opera). It doesn't seem to appear in IE6. What could be
causing that?

Move the CSS to an external stylesheet.

The CSS is only internal while I am working on the page. I always
normally use external style sheets. This does not affect the problem I
was asking about.

Remove the presentational markup.

If you mean the italics, this is likely to be the only page with any
italics at all, so it hardly seems worth creating a class for it.

Two navbars are a nuisance, one suffices.

Why a nuisance? Surely a matter of personal preference? Some of the
pages will be much longer, so links in the footer could be helpful.

Nav links should be marked up as an unordered list, not as paragraphs.

They're not - except the links on the left which will draw attention to
specific features of the site. How can I use an unordered list to create
the blue backgrounds for headings and white backgrounds for the

Remove the spacer gifs, use CSS instead.

The white line between the header and the nav bar does not work unless I
put a spacer gif there (it ends up too thick). I will look at this
later. It does not affect the problem I was asking about.

Fix your header structure, add one <h1> with "Huddersfield Canal
Society" as it's content.

I have reserved <h1> for the titles of each page within the site. This
is the home page and doesn't have one. I want Google to give greater
priority to picking up the subject of each page rather than picking up
the name of the society.

Remove the <hr> and &nbsp;, use CSS instead.

Your body text size is uncomfortably small for me, there's little point
in specifying text-size:100% if you then reduce it to 90% for
.maincolumn

Yes, sorry. Changed.

Fix your alt text, the logo is merely decorative, use alt="".

Surely a matter of personal preference? It does not affect the problem I
was asking about.

You've used far to many classes.

Am I? I didn't realise there was a maximum permitted.

Don't use <br> to create spacings, use CSS.

Don't use characters ( ][ )to separate links, specify a border with CSS.

Why not? Surely a matter of personal preference? I may change this once
I have sorted out the layout. It does not affect the problem I was
asking about.

Don't use absolute positioning for the header, there is no need to do so
and it results in the problem you are seeing.

Ah, at last! The problem I was asking about. The reason why I am asking
the question is because I am still learning how to use CSS for layout
and am still struggling with some aspects. Can you please explain what I
should be doing instead?
I replaced .huddersfield{position: absolute;} with
..huddersfield{position: relative and the result was that the banner
photo on the right moved down so that its top was level with the bottom
of the logo. Am I misunderstanding what you are saying?

I have spent many hours trying to sort this out. If you can see an
obvious solution I would be glad to hear it. I really want to learn.

 

[Martin Clark]

Jonathan N. Little wrote...

Try this...a little simpler

[snip]

Thanks for that, Jonathan. The result is at
http://www.tamevalley.freeserve.co.uk/hcs/index3.htm
I will think about that an alternative although I would prefer to keep
the header the same height whatever the window width.
The reason I had a height of 79 px for the header was to end up with a
thin dark blue line between the banner photo and the white line.

Is there anyway at all to get the text to wrap, as in my original tables
layout version? http://www.tamevalley.freeserve.co.uk/hcs/index.htm

I have also tried to get the white writing to appear on two lines, as
Huddersfield
Canal Society
whatever the width of the screen but I can't seem to manage it. "Canal
Society" just disappears.

 

[Spartanicus]

I have changed it to Strict. This has not produced a solution to the
problem I had.

You may currently only be able to see one problem, more experienced
people can see more problems. Listen if you want to learn how to spot
these problems yourself.

Instead, it has created a new problem - there is a small
gap between the header and the navigation bar in Firefox (and an even
smaller gap in Opera). It doesn't seem to appear in IE6. What could be
causing that?

Leave it for the moment, take on the other advice given and in the event
that it's still there at the end of the track we'll deal with it then.

If you mean the italics

, this is likely to be the only page with any
italics at all, so it hardly seems worth creating a class for it.

Why a nuisance?

Navigating to the top or the bottom of a document is trivial, hence
there is no benefit to repeating a navbar, repetition is a nuisance for
situations where the document is rendered linearly.

They're not - except the links on the left which will draw attention to
specific features of the site. How can I use an unordered list to create
the blue backgrounds for headings and white backgrounds for the
descriptions? <p> seems to be ideal for this purpose.

I mistook them for navigation links due to other mistakes you've made: 2
consecutive links to the same target with different and poorly chosen
link text. Hyperlinked text should preferably be the same as the header
content of the page section that the link points to.

An example of how to structure side bar content assuming that the target
header is "74 Club":

<h2>News</h2>
<p><b>The 74 Club</b></p>
<p>Find out whether you can join the exclusive <a href="74club.htm">74
Club</a>!</p>
<p><b>Standedge Tunnel</b></p>
....
etc.

The white line between the header and the nav bar does not work unless I
put a spacer gif there (it ends up too thick).

Markup the navbar as an unordered list, use CSS to specify a bottom
border on the masthead or a top border on the navbar.

I have reserved <h1> for the titles of each page within the site. This
is the home page and doesn't have one. I want Google to give greater
priority to picking up the subject of each page rather than picking up
the name of the society.

The subject of the home/index page *is* the name of the society.

Done.

But what is wrong with <hr>?

It's used in a presentational manner.

Surely a matter of personal preference?

No, disable graphics and the "Huddersfield Canal Society" title of the
page is repeated twice.

It does not affect the problem I
was asking about.

I am getting tired of seeing you repeating that.

Am I? I didn't realise there was a maximum permitted.

Quality coding includes using the minimal amount of code needed to do
the job, no more.

Don't use <br> to create spacings, use CSS.

I have not used <br> anywhere on this page to create spacings.

Don't use characters ( ][ )to separate links, specify a border with CSS.

Why not?

A screen reader will read "Left square bracket Top of page Right square
bracket Left square bracket Home Right square bracket Left square
bracket The Society ..." a bloody nuisance.

Ah, at last! The problem I was asking about. The reason why I am asking
the question is because I am still learning how to use CSS for layout
and am still struggling with some aspects. Can you please explain what I
should be doing instead?

No positioning, just leave the element in the flow.

 

[Martin Clark]

Spartanicus wrote...

You may currently only be able to see one problem, more experienced
people can see more problems. Listen if you want to learn how to spot
these problems yourself.

Thanks for taking time again to spell things out for me. I will make a
few comments on what you have written but I will probably not have time
to act on them for a day or two.

Instead, it has created a new problem - there is a small
gap between the header and the navigation bar in Firefox (and an even
smaller gap in Opera). It doesn't seem to appear in IE6. What could be
causing that?

Leave it for the moment, take on the other advice given and in the event
that it's still there at the end of the track we'll deal with it then.

If you mean the italics

And the spacer images, the <br>s (address ones excepted), the &nbsp;s
and the ]['s.

Okay, I've lost the ][s, the footer nav bar, the <br>s and spacers,
except those in the Nav bar, which I will work on later.

I had put &nbsp; between "Canal" and "Society" so that if the text wraps
(as I would like it to) the two words both move onto the next line.
Huddersfield
Canal Society
would look better than
Huddersfield Canal
Society

This is a case where semantic <em> or <strong> markup is appropriate.


Navigating to the top or the bottom of a document is trivial, hence
there is no benefit to repeating a navbar, repetition is a nuisance for
situations where the document is rendered linearly.

Okay, I give in. Bottom navigation gone, along with its ][s. What about
a "Top of Page" link on longer pages? Is that good practice?

I mistook them for navigation links due to other mistakes you've made: 2
consecutive links to the same target with different and poorly chosen
link text. Hyperlinked text should preferably be the same as the header
content of the page section that the link points to.

There were a lot of links to the same target because these other pages
do not exist yet so it doesn't matter what the target is for now.

An example of how to structure side bar content assuming that the target
header is "74 Club":

<h2>News</h2>
<p><b>The 74 Club</b></p>
<p>Find out whether you can join the exclusive <a href="74club.htm">74
Club</a>!</p>
<p><b>Standedge Tunnel</b></p>

Thanks for the suggestion. I will have a play with this when I get time.

Markup the navbar as an unordered list, use CSS to specify a bottom
border on the masthead or a top border on the navbar.

I was under the impression that items in a list would appear one under
the other. I have never made them appear horizontally before. I will
need to look up how to achieve that.

The subject of the home/index page *is* the name of the society.

Point taken! However, I want the same style sheet to work for every page

Canal&nbsp;Society</a>&nbsp; still there.

Not any more. I thought I had already removed the second one and I
explained above my reason for the one between the words.

It's used in a presentational manner.

Ah. Only because I wanted it to fit in with the colour scheme. I thought
that if it is given a class then the presentational details move to the
style sheet.

No, disable graphics and the "Huddersfield Canal Society" title of the
page is repeated twice.

Okay. Won't it then run foul of accessibility guidelines that want
images to have alt text?

I am getting tired of seeing you repeating that.

Yeah, sorry. Please appreciate my frustration in looking for a solution
to a problem and getting everything marked with a red pen. However, I am
here in order to learn and I appreciate the explanations you are giving
me.

[snip]

Don't use characters ( ][ )to separate links, specify a border with CSS.

Why not?

A screen reader will read "Left square bracket Top of page Right square
bracket Left square bracket Home Right square bracket Left square
bracket The Society ..." a bloody nuisance.

Thanks - I didn't realise that. I will remove them from one of my other
sites once I have sorted this one out. What does a reader say to a "|" ?

No positioning, just leave the element in the flow.

Hmm. I'll need to work on that. I'll look at Jonathan's suggestion as
well and see what I can do. Thanks, both.

 

[Spartanicus]

Okay. done that. What is the difference between <i> and <em>?

<i> tells a browser to render text in italics, it's presentational, not

What about
a "Top of Page" link on longer pages? Is that good practice?

Replicating common browser controls such as the back function or the
start or end of document controls into the document itself is not good
practice.

I was under the impression that items in a list would appear one under
the other. I have never made them appear horizontally before. I will
need to look up how to achieve that.

ul li{display:inline}

To then center the links as your current page has done:

ul{text-align:center}

More info http://www.alistapart.com/articles/taminglists/

Point taken! However, I want the same style sheet to work for every page
and can't have <h1> doing different things on different pages.

There you have an example where classes and id's are necessary.

Okay. Won't it then run foul of accessibility guidelines that want
images to have alt text?

Not if the image is decorative as is the case here. Had the text not
been there, *then* the image should have alt="Huddersfield Canal
Society" and wrapped in a level one header for the home/index page.

What does a reader say to a "|" ?

"Bar", or "Pipe". Although less annoying, it should also be avoided. The
fact that it's marked up as a list should result in the items being
rendered by aural browsers with sufficient distinction (pauses),
possibly the start and end of the list will also be spoken.

How would I separate them with CSS - using <span>s or unordered lists
(which I need to learn about)?

ul li{border-left:1px solid white}

You then add a class to the left most <li> so that you can suppress the
border so that it only appears in between navbar links.

ul li.first{border:none}

 

[dorayme]

<[email protected].
ie>,

Replicating common browser controls such as the back function or the
start or end of document controls into the document itself is not good
practice.

The home button on the keyboard will take folk to the top of the
page. At some point, many website makers decide it is easier (and
simpler in effect) to assume some basic competency on the part of
the user.

 

[David Graham]

Try this...a little simpler

REPLACE your header, huddersfield , banner class defs with:

.header {background-color:#281870; color:#ffffff; width: 100%; }
.header {
font-family: Times New Roman, serif;
font-size: 1.75em; /* don't use Points on web */
font-weight: 700;
color: #ffffff;
background-color: #281870;
width: 100%;
margin: 0;
padding: 0;
}
.header .huddersfield { vertical-align: middle; }
.header .banner { float: right; }
.header A { color: #ffffff; white-space: nowrap; }
.line { clear: left; }

REPLACE HTML

<div class="header">
<!-- banner now first as it is floated and dumped unneeded SPANs -->
<img class="banner" src="images/banner01.jpg" width="420" height="78"
alt="Huddersfield Narrow canal">

<img class="huddersfield" src="images/translogo04.gif" width="125"
height="78" alt="Huddersfield Canal Society logo"
title="Huddersfield Canal Society logo">

<a href="index.htm" class="society">Huddersfield Canal Society</a>
</div>

for >800 windows 'Huddersfield Canal Society' slides under logo

Hi Jonathan
You apply the vertical-align to the logo on the left and not to the text
that the OP wanted alined vertically in the middle, is this the best way to
achieve text in the middle of the header? I guess I'm asking do you always
go about it like that, concentrate on the image and then the text behaves as
desired.

 

[Jonathan N. Little]

Hi Jonathan
You apply the vertical-align to the logo on the left and not to the text
that the OP wanted alined vertically in the middle, is this the best way to
achieve text in the middle of the header? I guess I'm asking do you always
go about it like that, concentrate on the image and then the text behaves as
desired.

The non-positioned image on the left sets the min height of the
containing DIV 'header', by setting vertical-align: middle to that
element means that the follow text will vertical aligned with that image
regardless of the size of the text and with respect to the DIV
'header' unless a wrap occurs. If you tried to align the text with
padding-top and padding-bottom of the text then as your scaled your text
(CTRL + and CTRL - in Firefox et al.) the test would move with respect
to the logo and the DIV 'header'.

 

[Jonathan N. Little]

Jonathan N. Little wrote...

Try this...a little simpler

[snip]

Thanks for that, Jonathan. The result is at
http://www.tamevalley.freeserve.co.uk/hcs/index3.htm
I will think about that an alternative although I would prefer to keep
the header the same height whatever the window width.
The reason I had a height of 79 px for the header was to end up with a
thin dark blue line between the banner photo and the white line.

Is there anyway at all to get the text to wrap, as in my original tables
layout version? http://www.tamevalley.freeserve.co.uk/hcs/index.htm

Only what to simulate it is

CSS:

..header {background-color:#281870; color:#ffffff; width: 100%; }
..header {
font-family: Times New Roman, serif;
font-size: 1.75em; /* don't use Points on web */
font-weight: 700;
color: #ffffff;
background: #281870 url(images/banner01.jpg) no-repeat top right;
width: 100%;
margin: 0;
padding: 0;
}
..header .huddersfield { position: absolute; }
..header A {
color: #ffffff;
background-color: transparent;
display: block;
min-height: 70px;
margin-left: 120px;
margin-right: 420px;
}

HTML:
<div class="header">
<img class="huddersfield" src="images/translogo04.gif" width="125"
height="78" alt="Huddersfield Canal Society logo"
title="Huddersfield Canal Society logo">
<a href="index.htm" class="society">Huddersfield Canal Society</a>
</div>


NOTE: Will break in IE because no support for 'min-height' Would have to
futz with some hack for IE, all are not very pretty.


You might try

CSS:
..header {
font-family: Times New Roman, serif;
font-size: 1.75em; /* don't use Points on web */
font-weight: 700;
color: #ffffff;
background: #281870 url(images/banner01.jpg) no-repeat top right;
width: 100%;
height: 70px;
margin: 0;
padding: 0;
}

..header .huddersfield { vertical-align: middle; }

..header A {
color: #ffffff;
white-space: nowrap;
background-image: url(images/50percent.gif);
}

HTML:

<div class="header">
<img class="huddersfield" src="images/translogo04.gif" width="125"
height="78" alt="Huddersfield Canal Society logo"
title="Huddersfield Canal Society logo">
<a href="index.htm" class="society">Huddersfield Canal Society</a>
</div>

Make a GIF 50percent.gif that is a grid of alternating dark blue and
transparent pixels and then when 'Huddersfield Canal Society' overrides
the canal image it darkens it a bit with a dark screen.

Or make 'Huddersfield Canal Society' a GIF with transparent background
and a blue border that would contrast when overriding the canal.

 

[Martin Clark]

Jonathan N. Little wrote...

Only what to simulate it is

[snip CSS suggestions]

Thanks. I won't be able to try these out over the weekend, but I will
have a go as soon as I can.

Make a GIF 50percent.gif that is a grid of alternating dark blue and
transparent pixels and then when 'Huddersfield Canal Society' overrides
the canal image it darkens it a bit with a dark screen.

I don't know how to do that but I will see whether any of the programs I
have can do it.

Or make 'Huddersfield Canal Society' a GIF with transparent background
and a blue border that would contrast when overriding the canal.

Yes, that's a good idea. I was trying to avoid using an image for text
if at all possible, but it might be an answer. I would have to find a
way to get some <h1> text somewhere else on the page with the society's
name. I have also been considering making a .gif with the text on two
lines so that it would always remain in the blue area.

It'll be a day or two until I have a chance to try anything though.