|
|
Posted by dorayme on 11/10/07 00:07
In article
<1194647674.467584.30430@o38g2000hse.googlegroups.com>,
Nick <maxout2001-nospam@yahoo.co.uk> wrote:
> On Nov 9, 8:48 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> > In article
> > <1194604873.965413.132...@50g2000hsm.googlegroups.com>,
> >
> > Nick <maxout2001-nos...@yahoo.co.uk> wrote:
> > > alternativeherbal.co.uk/newexperiment2.php
> >
> > (sorry I'm not able to test Safari on Mac
> > > at the moment, but Mac user are welcome to let me know).
> >
> > But there are problems. I won't look at your code at all for now.
> >
> > First, a single click up of font-size starts
> > to break the design.
> > Take you a few mins only to be rid of that Supplement Facts pic
> > and make a simple table which will be readable because crisper
> > even if smaller and will enlarge naturally with built in browser
> > controls. At the *very least*, fix the enlargement link
> > mechanics. You using js and sizing the window? Well, be more
> > generous in the size, especially the height, it gets cut off
> > after the Cellulose, Gelatin, line on Safari and FF too (that's 2
> > out of 2, won't look further)
> >
> > It looks like you are not sizing the show and the cols right.
> > Given your content, no need to *not* allow it to shrink to 800px
> > wide and be readable...
> >
> > Frankly the first sign of trouble about fluidity was a semi
> > aesthetic thing I noticed. Why is the leafy background not on the
> > body itself, what is the *point* of not putting it on the body in
> > this design? Try it,
> >
> > still nice and pleasant a design anyway...
> >
> Hi Dorayme, thak you for saying you like the design. That's a good
> start at least. But I understand now about the font sizing up
> problem.
>
> Answering your question about why the leafy background is not on the
> body itself: I think it may affect readability.
>
> I'm finally on the way of a solution that could work with window
> variable sizing, and variable text sizing, and it is at
>
> http://alternativeherbal.co.uk/newindex.php
>
> for the moment I've left out the header picture and the menu on the
> top, and using mix and max widths I seems to work when changing the
> browser size, and also the font size. I still haven't enlarged the
> basic font size to 100%, but that will soon follow, but at least now
> the font can be enlarged without too many probs, and it seems to work
> on browser windows as small as 370px width, but I am ancountering new
> problems.
Now, at least from the users point of view, you are starting to
cook with gas. This is much better re window fluidity, needless
horiz scroll bars. Well done. (Still have not examined your code)
>
> The leafy background on the background, that is in div.main element
> containing all the others, takes all browser window in IE7, that's not
> too bad, but have a look at what happens in Firefox: the background of
> the container div doesn't size up to the height and width div.centre-
> left, div.centre, and div.centre-right-cats. Look at Opera, even
> worse, not only the background doesn't automatically sizes as in IE7,
> but the two DIVs to the right are positioned to the bottom of the
> other two.
>
> I'm sure there is a simple explanation to this, but I haven't managed
> to find it so far, so help is appreciated.
Ah, yes, this looks for all the world like something that puzzles
many people who have not got a good model in their head for how
floats work. Again, without looking at your code, I would bet
quids, you are floating things in a container div that has a
background but little content, little ordinary content in the
flow, (inline text, inline pics, ordinary unpositioned elements).
I will try to explain later, if you are still around, why this is
so but basically it is this, keep saying it to yourself. In good
standards compliant browsers, parents do *not* recognise their
floated children. They simply do not see them and so they do not
grow their heights to envelop them. IE does but the parents in IE
are from quite a different culture. This is not just silly talk,
it is a way to picture the thing. By default a div has no height.
It has 100% width but no height. It does not get height if all it
has is floated children. It does not get height unless a higher
power, the author, forces it to have height with a css height
instruction. Your parent must have some content otherwise it
would not be even be any high at all in Safari or my FF.
Floated children do "see" their parents. The relations between
parents and children of different kinds is actually a complicated
one (some people will tell you it is simple, but that is not so).
There are all the recommended rules as set by say CSS 2.1 and
4.01 and then there is the implementation of these rules by
different browsers. And you can be either struck by the
similarities or by the differences. Both are quite remarkable and
an interesting story.
Ah... perhaps I should mention, there are ways to get the parent
to get the height you might want without specifying a height: put
something into the flow after all the floats. Just before the
closing </div> of the parent whose background you need to grow,
put in
<div style="clear: both;"></div>
and it will happen for you.
>
> I've also tried a version of this page with the leafy background on
> the body instead, and this is
>
> http://alternativeherbal.co.uk/newindex2.php,
>
> although I've only placed it on the centre layer as it is a just
> test. Don't you think readability is affected? Perhaps if I made it
> much plaer than what it is could work, but is it worthy?
>
Perhaps you are misunderstanding me. On *no account* spoil the
nice clean white background of your text. I was suggesting to try
the leafy bg on the body itself but make sure the bg to the cols
is unsullied, be specific and give the cols a white background or
something nice and plain so the background is not transparent or
inheriting unwanted stuff. Nothing is worse than pesky
interference with your text.
> Again, I'd like to thank all that added their support here. When I
> studied Wed Design and Web Developing at this CIW course 3 years ago
> all they taught you was: design for the most common smaller screen
> resolution (width: 800px then), use tables and px font sizing, even
> though they did mention CSS2, and W3C guidelines on usability,
> alternative browsers, etc. Quite contraddictory... So I'm learning
> HTML design from scratch again at the moment.
--
dorayme
Navigation:
[Reply to this message]
|