Posted by dorayme on 11/15/07 19:54

In article
<4f005925-7b2d-46c9-82ed-392efb7a20bf@e4g2000hsg.googlegroups.com
>,
Nick <maxout2001-nospam@yahoo.co.uk> wrote:
>
> Thank you for the explanation about children and parents elemtens.
>
> Following your suggestion I've managed to get the parent div "main" to
> get the right length (based on the children's). (see
> http://alternativeherbal.co.uk/newindex.php).
>
> I've added the menu and the header picture now, but I would like the 3
> floated div elements at the bottom to be centred in syntony with the
> content above (header picture + links made from unordered links).
>
.....
>
> I was just wondering whether you knew any other solutions to achieve
> this.
>

Looking better still now, Nick. I have a couple of thoughts for
you (to limit the number), one about your header, the other about
the centering. First the header, it may seem a minor aesthetic
thing to you but, imo, makes a difference. Try the gif I made of
it at:

http://netweaver.com.au/test/nick/header-new.gif

and see if it suits. I tested it on your site and it looks good.
It is just the same as yours but with a transparent bg. It then
sits much more naturally on your nice leafy background. Not so
"rectangular...I am a header see" look about it <g>. In fact,
this would be a really good candidate for fluid dimensioning as
it should surely look about as good contracted horizontally as it
would stretched horizontally. That way it could grow and contract
with the browser/screen settings of the user.

BTW, a sophistication would be to substitute real html text in
the pic and remove the pic text (I say this because while Macs do
a fabulous job of resizing pics in some browsers, Windows do not
cut the mustard and this really reveals itself when you try this
sort of thing with pictured text, the text gets the jaggies even
when resized in the browser *down* from a high quality original!

About centering... It can get complicated with your code and
widths but perhaps i will be bold and simply suggest the
following and see how you feel, it looks fine to me and sort of
fits in with what I imagine is your taste:

(1) In your divpositioning stylesheet, substitute for your
div.main, the following:

div.main {

border: 4px groove #2f2;
padding-bottom:1em;
width:55em;
margin:auto;
margin-top:1em;
margin-bottom:1em;
background-image:url(images/leaffade.gif);
}

I personally would add font-size: 100% to body. At 4.30am this
morning your lesser size did look nicer to my eye. Now at 6.30 I
would be grateful of 100% to fit in with my settings (I tire
easily <g>. But if you make it a little less than 100% the sky
will not fall in. Who goes in for all this herbal stuff, older
people (with poorer vision) wanting to delay death? Maybe more
than 100% rather than less then... <g>

and

(2) I think I would favour in the html:

<div>
<img style="width: 55em;"
src="http://netweaver.com.au/test/nick/header-new.gif"
alt="Alternative Herbal - Alternative Medicine and Herbal
Supplements">

I took the liberty of making the header pic transparent (you can
get it from the url there) to remove that "I am a header,
rectangular" look. It sort of looks more natural floating on the
background this way.

But important to note, you had:

<div style="text-align: center;">
<img src="images/header-new.gif" alt="Alternative Herbal -
Alternative Medicine and Herbal Supplements" height="160"
width="980">

and I have changed this considerably in function above. It is
simpler and grows with the wrapper of main div. Or it should!

Have a play, this may suit you.

Other things to play with are the em width (55 may be a bit
high), another thing to consider (I have raised it before is to
put the leafy bg on the body itself (rather than main) and let
the website content float on it.

--
dorayme

[Back to original message]