Re: Maintaining DIV Positioning with Different Font Sizes

"John Topley" <john@$NO_SPAMicrosofttopley.freeserve.co.uk> wrote

Hi,

I'm trying to create a pure CSS layout using DIVs. I have three DIVs (in
one column) down the left hand side of my page, with a ten pixel
vertical gap between each of them (the content is on the right). At the
moment these DIVs are all using absolute positioning, with dimensions
and co-ordinates specified in pixels. How can I make it so that if the
user increases the font size the DIVs enlarge to accommodate the content
but still maintain the ten pixel gap?

Thanks,

John

you can set all your margin and widths/heights using EMS. this is a
measurment of space relating to the current font-size. if you set the
body font-size and then set all subsequent div font-size to % and use
ems for the layout you can create a completely fluid layout which
works at any text size (monitor size permitting). i am currently
implementing this on a site im working on:
http://www.havant.ac.uk/adultlearning

clicking the textsize links at the bottom of the page causes the asp
page to insert the size querystring into a variable which is used in
an inline style to set the font-size of the body tag. if only
browsers supported svg, then i could have the images a little sharper
when they resize.

Matt

kchayka <kcha-ns-yka (AT) sihope (DOT) com> wrote

Matt Rushton wrote:

http://www.havant.ac.uk/adultlearning

clicking the textsize links at the bottom of the page causes the asp
page to insert the size querystring into a variable which is used in
an inline style to set the font-size of the body tag.

I've seen a lot of this kind of thing lately. I wish people would stop
these attempts at being "helpful".

First, if you set reasonable font sizes to begin with, the need for the
user to change the size at all would be lessened, if not eliminated.
Second, the little trick at this site is only good for the current page.
Follow any link and the text reverts to the original (sub-optimal)
size, so each page has to be re-adjusted. ish. Thirdly, the user's
browser is plenty capable of making text size changes without any added
trips to the server.

If you want to do something really helpful, then why not link to a page
that teaches the user how to adjust the text size in their browser?
That's something they can use almost anywhere, not just at this site.

As is, the body text size is far too small for my reading pleasure, I
imagine it's too small for lots of other folks, too. You may have set a
100% font size on the body tag within the page, but the stylesheet is
bumping that down to 70%. Pretty much defeats the purpose, eh?

a reasonable font size assumes all users have the same size monitor.
i designed the initial font size and layout to fit on an 800x600
display amd i considered the font legible. however im developing on a
21" monitor and this is very small when the browser is maximised on
this display hence the option to increase the layout size.

with reguard your point about the size change not being persistant
accross the pages, my testing suggests otherwise. ive tested in IE 6,
mozilla 1.4, opera 7.11, and firebird and the text size is permanent
until reset. the page uses cookies to store the setting or if these
are not available, a session variable which should stay valid for
20mins. the color change just uses session variables and the pages
default color will return after 20mins.

thank you for your comments tho, i have now reset the 100% font size
to 100% and increased the side bar size a little as well.

this is my first attempt at an accessable css site and im not a
professional designer so maybe ive gone a bit too far with the
"helpful" bits as you put it.

the intention of my post was'nt that people should copy my asp menu
but that by setting the body tag font size and then using % for text
size and ems for layout spacing, a truly fluid layout can be created.

can you also let me have a list of other sites which provide a text
size menu so i can see how others have approached this issue.

thanks

matt

On 5 Aug 2003 07:36:59 -0700, matt (AT) planetmatt (DOT) f2s.com (Matt Rushton)
wrote:

clicking the textsize links at the bottom of the page causes the asp
page to insert the size querystring into a variable which is used in
an inline style to set the font-size of the body tag.

I suggest that the method I use (see sig) is both simpler and more
useful to the reader.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Matt Rushton wrote:

kchayka <kcha-ns-yka (AT) sihope (DOT) com> wrote

Matt Rushton wrote:

http://www.havant.ac.uk/adultlearning

As is, the body text size is far too small for my reading pleasure, I
imagine it's too small for lots of other folks, too. You may have set a
100% font size on the body tag within the page, but the stylesheet is
bumping that down to 70%. Pretty much defeats the purpose, eh?

a reasonable font size assumes all users have the same size monitor.

Monitor size is irrelevant. What is relevant is the user's default font
size, which should be set for optimal reading in their given browsing
environment. If it isn't and they find 100% text size too big or small
for their liking, then showing them how to adjust their browser is a
solution that works for everyone, not just one user at one site. If the
default is already adjusted properly, then your setting the size at 70%
makes reading unnecessarily difficult.

with reguard your point about the size change not being persistant
accross the pages, my testing suggests otherwise. ive tested in IE 6,
mozilla 1.4, opera 7.11, and firebird and the text size is permanent
until reset. the page uses cookies to store the setting or if these
are not available, a session variable which should stay valid for
20mins.

Did you test this with cookies disabled? It doesn't seem to work like
you say it should, at least not in a mozilla browser. Session cookies
are still cookies, you know.

thank you for your comments tho, i have now reset the 100% font size
to 100% and increased the side bar size a little as well.

The content area is good now, thank you very much. The sidebar is
still pretty small, though.

the intention of my post was'nt that people should copy my asp menu
but that by setting the body tag font size and then using % for text
size and ems for layout spacing, a truly fluid layout can be created.

I understood the intent of your post, but I just couldn't pass up this
opportunity to make a point.

can you also let me have a list of other sites which provide a text
size menu so i can see how others have approached this issue.

Virtually any site that tries to customize the text size for the visitor
does it badly, IMO. Linking to a page that tells them how to adjust
their browser is the only win-win solution that I know of.

--
To email a reply, remove (dash)ns(dash). Mail sent to the ns
address is automatically deleted and will not be read.