Reply to Re: Help needed with minor CSS layout problems

Your name:

Reply:


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

David Graham wrote:

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


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

[Back to original message]


Удаленная работа для программистов  •  Как заработать на Google AdSense  •  England, UK  •  статьи на английском  •  PHP MySQL CMS Apache Oscommerce  •  Online Business Knowledge Base  •  DVD MP3 AVI MP4 players codecs conversion help
Home  •  Search  •  Site Map  •  Set as Homepage  •  Add to Favourites

Copyright © 2005-2006 Powered by Custom PHP Programming

Сайт изготовлен в Студии Валентина Петручека
изготовление и поддержка веб-сайтов, разработка программного обеспечения, поисковая оптимизация