Re: Help needed with minor CSS layout problems

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
.

Relevant Pages

  • Re: Header and Footer with RichTextBox Control
    ... I send the footer and header to RTB when it is prining but I ... Dim margin As Single, printControl As Boolean ... pageHigh = .ScaleY(.Height, vbTwips, vbInches) ...
    (microsoft.public.vb.general.discussion)
  • Re: Header and Footer with RichTextBox Control
    ... I send the footer and header to RTB when it is prining but I ... In that case the RTB will print its contents within that area of the page and you will know exactly what the minimum top and bottom margins of the printed pages will be. ... If the above is approximately what you are currently doing then all you need to do is print the header and the footer within the specified top and bottom margins, normally with the "nearest to the edge" vertical position of the header or footer text about half of the margin size from the edge of the page. ...
    (microsoft.public.vb.general.discussion)
  • Re: Margins & Headers
    ... See also the MVP FAQ: http://www.mvps.org/word which is awesome! ... > Space Before/After is all that is required (whether you have a letterhead ... > the header or just an empty paragraph). ... >>> top margin needs to be set at 2.25, ...
    (microsoft.public.word.docmanagement)
  • Re: Chapter and page number in right margin
    ... with theses, to print the chapter title in the header. ... a chapter title in the top right header would be easier for people ... dictionaries and phone books. ... page number in the margin, ...
    (microsoft.public.word.pagelayout)
  • Re: Why last line prints on second page
    ... "Mark A. Sam" wrote: ... Then the new header height against the old. ... BOTTOM MARGIN. ... but once I changed the logo in the upper left corner ...
    (microsoft.public.access.forms)