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
6  3849 
John Topley wrote: 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?
Don't absolutely position them, let them flow normally and set margins
between them. Put all three inside another div, and position _that_.
--
David Dorward http://david.us-lot.org/
Which is stupider: Pop-up ads claiming they'll stop spam, or spam claiming
it'll stop pop-up ads? -- Dork Tower
Thanks to all who replied, it worked a treat.
John
"John Topley" <john@$NO_SPAM$ topley.freeserv e.co.uk> wrote in message news:<bg******* ***@news8.svr.p ol.co.uk>... 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 <kc*********@si hope.com> wrote in message news:<3f******* *@news.sihope.c om>... 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, ma**@planetmatt .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 <kc*********@si hope.com> wrote in message news:<3f******* *@news.sihope.c om>... 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. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Tom Szabo |
last post by:
Hi,
Just wondering if there are any disadvantage in absolute positioning
controls on a page?
In example instead of putting the text fields into a table to align
properly, one would absolute position them.
I understand the issue with resize, that is not a problem.
|
by: Geoff Cox |
last post by:
Hello,
I publish some web pages using large fonts and would like to give the
user the opportunity to print the pages using a smaller font.
I believe that this is possible using different style sheets? I am not
clear how the user would select the different .css files?
Seems to be easier than having duplicate html files ...
|
by: Jane Withnolastname |
last post by:
I am trying to re-work an old site by replacing the html with css.
On the main page, I have a logo image which I needed centred on the
initial screen. I found the solution here:
http://www.wpdfd.com/editorial/wpd0103.htm#toptip (the second example)
The problem is, under the image is a large table. But using the above
positioning, now the table starts at the top of the page and runs
underneath the image.
|
by: Brian |
last post by:
I'm developing a restaurant's website.
http://www.tsmchughs.com/
My template has div#content then div#navigation, which contains an
unordered list of links. I have positioned div#navigation on the left
side using the following:
BODY {
margin-left: 9.6em;
|
by: NS |
last post by:
I am relativly new to css positioning and have a question regarding the
display of a DHTML pop-up
Here is the basic HTML I am using:
<html>
<head>
<script language="JavaScript">
<!--
| | |
by: Darren |
last post by:
hi all. probably a trifle put google didn't tell me much. I notice there are
size units such as 'pt' and 'px'. is there one that will position the same
regardless of browser size, screen resolution, browser type?
Thanks
|
by: deko |
last post by:
As I understand it, most browser manufacturers have agreed on 16px for their
default font size.
So, this should be an accurate conversion for percentages:
px %
16 = 100
14 = 87.5
13 = 81.25
|
by: TheCeej |
last post by:
I'm sorry to post what is ultimately a myspace problem, but I'm sure I'd still be having this problem with any html/css document, so the answer would more than likely be able to help anyone out. I'm pretty sure I know what the problem is already. I just don't know how to fix it. I'd be very grateful of any help. I'll post what I'm trying to do, what keeps happening, what I believe the problem is, the link to my page and the css, and things...
|
by: Jonas Smithson |
last post by:
In his book "CSS: The Definitive Guide" 2nd edition (pgs. 116-117), Eric
Meyer has an interesting discussion about "font-size-adjust" that was
evidently dropped in CSS 2.1 due to browser non-support. I'm wondering
if there's some way I could still get a primitive version of this
functionality, because different fonts display at very different optical
sizes for the same nominal sizes.
For example, suppose I want type to display in...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| | |
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
