Posted by David Graham on 03/18/06 13:11

"Jonathan N. Little" <lws4art@centralva.net> wrote in message
news:441af6b5$0$3688$cb0e7fc6@news.centralva.net...
> Martin Clark wrote:
>
> > 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.
>
> 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.
--

David Graham

[Back to original message]