Re: using absolute positioning

Also, absolute positioning, with some layouts, can make text resizing very
difficult - your text when at 200%, (say) may not be visible if you have
(say) an absolutely positioned div beneath its container div. (which looked
lovely when text was at 100%.)

In user testing, I have found that some screen readers when used in certain
modes will automatically make the text larger and then won't read anything
that is obscured on the screen.....

By using divs with margin-left and margin-right with percentage values, you
can still have a proportionately "correct" layout that is fluid in relation
to the size of the output media.

Julia Collins



On 12/1/04 4:20 am, "Tina Holmboe" <tina@greytower.net> wrote:

> 
> On 12 Jan, BAYLISS, Andrew wrote:
> 
>> positioning when building a web page.  Surely if you are building a web page
>> using a tableless design, you end up having to use absolute positioning to
>> ensure that the elements are positioned correctly?
> 
> Oh, no, not at all.
> 
> 
> 
>> Could somebody tell me why the use of absolute positioning should be
>> avoided?
> 
> Certainly.
> 
> Absolute positioning makes an assumption about the output media. When
> you position something absolutely, you might say something like:
> 
>  "Place this paragraph - this P - a fixed and given number of pixels
>   from the left edge of the user-agents canvas, and a fixed and given
>   number of pixels from the upper edge of the same"
> 
> aka
> 
>   p {
>    position : absolute ;
>    left     : 200px ;
>    top      : 200px ;
>   }
> 
> Beware that this is an example.[*] The above, however, means that if -my-
> user-agent doesn't have a canvas 200 pixels wide[**], the paragraph will quite
> neatly fall off the right hand side and give me a horizontal scrollbar.
> 
> This, as you can imagine, isn't very accessible at all. Should you,
> however, say
> 
>   p {
>    position : absolute ;
>    left     : 20% ;
>    top      : 20% ;
>   }
> 
> Then the assumption is that the paragraph should be position 20% of the
> canvas width from the left hand side and from the top. This is possible
> no matter what the size of the canvas.
> 
> As you can see, the second paragraph is still accessible, even if it is
> positioned absolutely - whether this technique is evil is, basically, all
> in the assumptions you make when you use it.
> 
> Of course, you can also do
> 
>   div#menubar {
>    position : fixed ;
>    top      : 2px ;
>    right    : 2px ;
>    width    : 52px ;
>   }
> 
> fill the div with 48 pixel icons and still remain fairly accessible; simply
> because the assumption is now that the div should stick close to the right
> hand side, be no wider than it's content plus 2 pixel padding on each side,
> and assume nothing -more- about the canvas. Still, a user-agent with a
> canvas less than 52 pixel wide will need to put in scrollbars.
> 
> 
> But all of this springs from the idea that a web page should have elements
> on it that are "properly positioned".
> 
> 
> So, let me stick my neck out once and for all:
> 
>  To have a web page look exactly the same in any two user-agents you
>  feel like mentioning is not interesting, not possible, and in most
>  cases harmful to the accessibility of the information ON the page.
> 
> 
> Before voices are raised in defense of the graphical, the consistent,
> and the pretty, let me go on and say
> 
>  The graphical layout of a web page can aid in the accessibility of
>  information found on it. Consistency of graphical layout can aid
>  even more.
> 
> 
> But: the moment graphical layout - "positioned correctly" - create
> difficulties in terms of -access-, ie. actually getting TO the content,
> then the graphical layout takes second stage. To quote Rober Bringhurst
> in "The Elements of Typographic Style"[***]
> 
>  "... typography is an art that can be deliberately misused. It is a
>   craft by which the meanings of a text (or its absence of meaning) can
>   be clarified, honored and shared, or knowingly disguised ...
> 
>   In a world rife with unsolicited messages, typography must often draw
>   attention to itself before it will be read. Yet in order to be read,
>   it must relinquish the attention it has drawn. Typography with anything
>   to say therefore aspires to a kind of statuesque transparency."
> 
> The same principle applies to design - and in particular to
> -accessible- design.
> 
> 
> 
> [*]
> A message that is often lost, here. Not necessarily by you, the reader,
> but on occation by others.
> 
> 
> [**]
> Where "canvas" has no relation what so ever to "resolution of
> physical monitor if one exist"
> 
> 
> [***]
> One of the "prettiest" books I know.

Received on Monday, 12 January 2004 10:08:51 UTC