Posted by Jonathan N. Little on 03/18/06 18:05

Martin Clark wrote:

> Jonathan N. Little wrote...
>
>>Martin Clark wrote:
>>
>>> 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
>>
>
> [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.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Back to original message]