|
|
Posted by Nick on 11/15/07 13:32
On Nov 10, 12:07 am, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <1194647674.467584.30...@o38g2000hse.googlegroups.com>,
>
>
>
> Nick <maxout2001-nos...@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
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 understand that the problem comes from of the fact that they are
floated elements. Researching on the internet the only way I've found
to centre them requires using margin-right and margin-left to auto,
but this would only work if one sets a fixed width (such as 980px,
good for a 1024px monitor), but I'd rather not do this as it would
make the design less flexible for different screen resolutions and
browser sizes as it is now.
I was just wondering whether you knew any other solutions to achieve
this.
I've also made the font-size larger, but not 1em / 100%, as the font-
size seems to big to me when I've done that. I don't know if this is
the same to you, or others, but you can see a trial 1em font-size page
in http://alternativeherbal.co.uk/newindex2.php. Anyway, enlarging
the font-size in http://alternativeherbal.co.uk/newindex.php doesn't
make the page layout fall apart, like earlier, so this shouldn't
matter too much now, should it?
Thank you.
Navigation:
[Reply to this message]
|