Viewing problems with Absolute Positioning

[murali]

Hello everyone,

I used absolute positioning with div tag in my website. The page looks
cool as long as someone doesn't try to zoom in by increasing the text
size (ctrl++ or thru changing font size in browser settings). When
someone does that, the layers seem to overlap and the layer with a
greater z value pops in front and the other layers are pushed back.

The most obvious solution will be to prevent the user from increasing
the text size. But how to do that ?? any help will be greatly
appreciated.

Thanks,
Murali.

[murali]

Re: Viewing problems with Absolute Positioning

Hi,
[color=blue]
>
> The joy of pixel widths. Try using "em" units more often.[/color]

I dont follow what do you mean by this

[color=blue]
> You can't (except in broken browsers), and trying is a very bad idea. People
> usually increase their font size becuase they can't read the text at the
> size it was at before![/color]

But how to get around this problem. Only thing I can think about is
making the text as images so that their size cannot be changed (I know
this idea sucks).
I appreciate the sagacity of the browser designers, but is it not
unfair when someone who wants a better view of the page, zooms in on
the page only to see the page go haywire.

Is there any other better method to keep this dirty thing at bay.

Any Help will greatly be appreciated,
Thanks,
Murali.

[David Dorward]

Re: Viewing problems with Absolute Positioning

murali wrote:
[color=blue][color=green]
>> The joy of pixel widths. Try using "em" units more often.[/color][/color]
[color=blue]
> I dont follow what do you mean by this[/color]

CSS requires that all lengths include a unit. Many authors use pixels,
becuase that is what they are used to. There are several other options,
including em units - which are relative to the font size.

--
David Dorward http://david.us-lot.org/
Redesign in progress: http://stone.thecoreworlds.net/
Microsoft announces IE is dead (so upgrade):

http://minutillo.com/steve/weblog/2003/5/30/microsoft-announces-ie-is-dead

[kchayka]

Re: Viewing problems with Absolute Positioning

murali wrote:[color=blue]
>
> But how to get around this problem. Only thing I can think about is
> making the text as images so that their size cannot be changed (I know
> this idea sucks).[/color]

Yes, this idea sucks pretty badly. A much better solution would be to
fix the design so it wasn't dependent on a particular font size. Using
em or % units for absolute positioning, or using relative positioning
instead, could be solutions to your problem. It's hard to be very
specific without a URL.

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

[Alan J. Flavell]

Re: Viewing problems with Absolute Positioning

On Sun, Jul 13, murali inscribed on the eternal scroll:

[quoting David Dorward , but without attribution!]
[color=blue][color=green]
> > The joy of pixel widths. Try using "em" units more often.[/color]
>
> I dont follow what do you mean by this[/color]

Well, the css.nu FAQs haven't been extensively updated recently, but
they still have plenty of good sense in them[1].

http://css.nu/faq/ciwas-aFAQ.html#QA01 and onwards.
[color=blue][color=green]
> > You can't (except in broken browsers), and trying is a very bad idea. People
> > usually increase their font size becuase they can't read the text at the
> > size it was at before![/color]
>
> But how to get around this problem.[/color]

There isn't a problem - at least, not the one you think you've
identified.
[color=blue]
> Only thing I can think about is
> making the text as images so that their size cannot be changed (I know
> this idea sucks).[/color]

Please read the posting that you are following-up to, but *for
meaning* this time. "trying is a very bad idea", was what the chap
said, and rightly so too.
[color=blue]
> I appreciate the sagacity of the browser designers, but is it not
> unfair when someone who wants a better view of the page, zooms in on
> the page only to see the page go haywire.[/color]

So, learn to design flexibly.
[color=blue]
> Is there any other better method to keep this dirty thing at bay.[/color]

You haven't worked out yet what most of the regulars around here
reckon to be the "dirty thing". I'd recommend some quiet reading to
get yourself up to speed with the group.

good luck

[1] I have to admit that a few of the sentences in there were
originally written my me, in fact.

[Alan J. Flavell]

Re: Viewing problems with Absolute Positioning

On Sun, Jul 13, kchayka inscribed on the eternal scroll:
[color=blue]
> Yes, this idea sucks pretty badly. A much better solution would be to
> fix the design[/color]

....or indeed to un-fix the design (depending on which meaning of the
word 'fix' you had in mind) - SCNR.

[kchayka]

Re: Viewing problems with Absolute Positioning

Alan J. Flavell wrote:
[color=blue]
> On Sun, Jul 13, kchayka inscribed on the eternal scroll:
>[color=green]
>> Yes, this idea sucks pretty badly. A much better solution would be to
>> fix the design[/color]
>
> ...or indeed to un-fix the design (depending on which meaning of the
> word 'fix' you had in mind) - SCNR.[/color]

LOL, yes perhaps a poor word choice. Just to avoid any possible confusion:

fix: to repair, correct, mend, revise, etc., etc., etc.

:)

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

[Nick Kew]

Re: Viewing problems with Absolute Positioning

In article <6afdc005.03071 31124.1c0b1a6d@ posting.google. com>, one of infinite monkeys
at the keyboard of muraliddharan@y ahoo.com (murali) wrote:
[color=blue]
> I appreciate the sagacity of the browser designers, but is it not
> unfair when someone who wants a better view of the page, zooms in on
> the page only to see the page go haywire.[/color]

If the page goes haywire with different settings, your design is
*badly* broken.

--
Nick Kew

In urgent need of paying work - see http://www.webthing.com/~nick/cv.html

[murali]

Re: Viewing problems with Absolute Positioning

"Daniel R. Tobias" <dan@tobias.nam e> wrote in message news:<pMmQa.4$2 b1.3686@news2.n ews.adelphia.ne t>...
[color=blue]
>
> To me, though, the most obvious solution would be to rethink your
> original idea of trying to absolutely position everything, and make your
> design more flexible instead of trying to figure out ways to make it
> even *less* flexible.[/color]

Thanks for the suggestions.

The URL is http://www.eng.uab.edu/me/etlab/cluster.htm

I wanted to place the headings as images, so I did so by placing them
in seperate layers. try zooming in on the page and see how it affects
the page.

The gurus in this thread asked me to rethink about design, but can
anyone lemme know what kind of design factors you take into
consideration before you design a page with layers.

[kchayka]

Re: Viewing problems with Absolute Positioning

murali wrote:[color=blue]
>
> The URL is http://www.eng.uab.edu/me/etlab/cluster.htm
>
> I wanted to place the headings as images, so I did so by placing them
> in seperate layers. try zooming in on the page and see how it affects
> the page.[/color]

I don't even need to zoom text to see overlapping elements. It is not
pretty. There are other problems with the page as well, like no alt
text for images and some serious horizontal scrolling.
[color=blue]
> The gurus in this thread asked me to rethink about design, but can
> anyone lemme know what kind of design factors you take into
> consideration before you design a page with layers.[/color]

It really is a pretty simple layout, or at least should be. "Layers"
shouldn't be needed at all. The easiest thing would be to get rid of
all the positioning. Just arrange the sections in the order they should
display. You could keep the <div> tags, but they really serve no useful
purpose. The images really represent headings, thus they should be
contained in <hx> markup, presumably h2 (assuming there is an h1 on the
page). Add alt text to those images, too, so those with image loading
off can see some text.

For example, current code:
<div id="Layer10" style="position :absolute; left:1px; top:2069px;
width:110px; height:26px; z-index:19">
<a name =" resources"><img src="images/cluster-resources.jpg"
width="91" height="25"></a></div>
<div id="Layer11" style="position :absolute; left:19px; top:2106px;
width:1181px; height:199px; z-index:20">
<div align="justify" ><font size="2" face="Verdana, Arial, Helvetica,
sans-serif">The cluster consists of one compile node...

Change to:
<h2><a name="resources "><img src="images/cluster-resources.jpg"
width="91" height="25" alt="Resources" ></a></h2>
<p align="justify" ><font size="2" face="Verdana, Arial, Helvetica,
sans-serif">The cluster consists of one compile node...

The next thing would be to get rid of all the <font> tags and start
building an external stylesheet.

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

[Shawn K. Quinn]

Re: Viewing problems with Absolute Positioning

Daniel R. Tobias wrote:
[color=blue]
> By the time you get to the middle of this mess, you're within four
> nested DIVs and two FONTs... and several of them are completely
> superfluous. Note that the inner FONT has the exact same values as the
> outer one, and that you've got a "justify"-aligned DIV within a
> "left"-aligned DIV within a "justify"-aligned DIV. And does that
> absolute position do any good in contrast to the simpler alternative of
> letting the elements lay out naturally in the order you put them in the
> page?[/color]

Not to mention FONT is deprecated markup and should be replaced with SPAN.

--
Shawn K. Quinn

[murali]

Re: Viewing problems with Absolute Positioning

> Is there really any need for code like:[color=blue]
>
> <div id =" help1" style="position :absolute;
> left:11px;top:5 98px;width:1189 px;height:1px; z-index:0">
> <div align="justify" >
> <div align="left"><f ont size="2" face="Verdana, Arial, Helvetica,
> sans-serif">
> <div align="justify" >Send questions, suggestions, and problem
> reports to
> <a href="mailto:jo nbernard@uab.ed u">jonbernard@u ab.edu</a>.
> <font size="2" face="Verdana, Arial, Helvetica, sans-serif">In
> emergencies, call Jon Bernard at 205-934-8505, or Alan Shih at
> 205-934-8461.
> When reporting problems, please provide as much relevant
> information as
> possible, such as</font></div>
> </font></div>[/color]

All webdesign gurus like you might know that for a novice like me the
lifeline is to use a tool like Dreamweaver. The piece of code fragment
seen above was dreamweaver generated. I never really had to see the
source code as long as I was happy with the visual.
[color=blue]
>
> By the time you get to the middle of this mess, you're within four
> nested DIVs and two FONTs... and several of them are completely
> superfluous. Note that the inner FONT has the exact same values as the
> outer one, and that you've got a "justify"-aligned DIV within a
> "left"-aligned DIV within a "justify"-aligned DIV. And does that
> absolute position do any good in contrast to the simpler alternative of
> letting the elements lay out naturally in the order you put them in the
> page?[/color]

I choose absolute positioning only because of the fact that, when
users shrink the window size the text starts to spread/shrink
depending on the size of window.

I will take the pain to review the Dreamweaver generated code and try
to get rid of redundant and nonsensical parts. Thanks for your time
and valuable advice.

Murali.

[kchayka]

Re: Viewing problems with Absolute Positioning

murali wrote:[color=blue]
>
> I choose absolute positioning only because of the fact that, when
> users shrink the window size the text starts to spread/shrink
> depending on the size of window.[/color]

Um, this is what it is supposed to do. ;) Attempts at preventing the
page from doing what comes naturally actually creates display problems,
rather than "correcting " a problem that isn't really there.

Tis the nature of the beast. Just let it go with the flow and be happy
your visitors find it usable.

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

[Shawn K. Quinn]

Re: Viewing problems with Absolute Positioning

murali wrote:[color=blue]
>[Daniel R. Tobias wrote:][color=green]
>> Is there really any need for code like:
>>
>> <div id =" help1" style="position :absolute;
>> left:11px;top:5 98px;width:1189 px;height:1px; z-index:0">
>> <div align="justify" >
>> <div align="left"><f ont size="2" face="Verdana, Arial, Helvetica,
>> sans-serif">
>> <div align="justify" >Send questions, suggestions, and problem
>> reports to
>> <a href="mailto:jo nbernard@uab.ed u">jonbernard@u ab.edu</a>.
>> <font size="2" face="Verdana, Arial, Helvetica, sans-serif">In
>> emergencies, call Jon Bernard at 205-934-8505, or Alan Shih at
>> 205-934-8461.
>> When reporting problems, please provide as much relevant
>> information as
>> possible, such as</font></div>
>> </font></div>[/color]
>
> All webdesign gurus like you might know that for a novice like me the
> lifeline is to use a tool like Dreamweaver. The piece of code fragment
> seen above was dreamweaver generated. I never really had to see the
> source code as long as I was happy with the visual.[/color]

It really does not matter if the code came out of Dreamweaver. Poor code is
still poor code and responsibility for it rests with the site author,
regardless of whether said author used Frontpage, Dreamweaver, Pagemill, or
Notepad.

--
Shawn K. Quinn