Re: Help needed with minor CSS layout problems

David Graham wrote:

"Jonathan N. Little" <lws4art@xxxxxxxxxxxxx> wrote in message
news:441af6b5$0$3688$cb0e7fc6@xxxxxxxxxxxxxxxxxxxxx

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.


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'.

--
Take care,

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

Relevant Pages

  • Re: vertical-align...
    ... how do I get text to vertical-align inside a div? ... text in the middle of the background image. ... Set the div line-height to the height of the image, ... Drop the fixed height and padding on the container div. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: vertical-align...
    ... vertical-align should work, according to this: ... Drop the fixed height and padding on the container div. ... Or a third way, using my solution, set everything to em sizes (which match the pixel sizes at font-size 100%) and use line-height to vertically center the text. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: HTML on Firefox 2
    ... Thank you for the explanation about children and parents elemtens. ... Following your suggestion I've managed to get the parent div "main" to ... I've added the menu and the header picture now, but I would like the 3 ... sort of thing with pictured text, the text gets the jaggies even ...
    (alt.html)
  • Re: Numeric character references in generated content
    ... the bottom of the page. ... Better would be to have two divs, one as header and one as footer. ... Include your h1 page title and navigation in the header; ... then a header div makes sense. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: Printer friendly ASP.Net
    ... body {padding: 20px;} ... You can reduce the margin and padding specifically for print, as in my example, but the browser also adds margin outside that area, as well as the header and footer. ...
    (microsoft.public.dotnet.framework.aspnet)