Re: using absolute positioning

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.

-- 
 -    Tina Holmboe                    Greytower Technologies
   tina@greytower.net                http://www.greytower.net/
   [+46] 0708 557 905

Received on Monday, 12 January 2004 07:20:47 UTC