dcsimg
www.webdeveloper.com
Results 1 to 10 of 10

Thread: Using only absolute positioning

  1. #1
    Join Date
    Apr 2008
    Location
    Slovenia
    Posts
    88

    Using only absolute positioning

    Some people advise against it, but I have yet to find any problems with it.

    I made a simple HTML page to test this out and can't find where it would go wrong. The entire page is centered, but absolute offsets are inside a div tag that has position set to relative so anything inside it has offset from the centered part with 760px of width.

    The only down side I can see is that you have to plan your site to the last detail before starting to position elements since any additions means all the offending elements left and top attributes must be changed to make room for the new element. But with absolute positioning your page is immune to different browsers, resolutions and window resizing. I think it's worth it.

    Maybe a hint as to with what element used in a certain way a problem could arise?

    Here is the page:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <HTML>
    <HEAD>
    <TITLE>Absolute Positioning Test</TITLE>
    </HEAD>
    	<BODY style="text-align: center;">
    
    	<div style="position: relative; width: 760px; margin: 0 auto; text-align: left">
    	
    		<div style="position: absolute; left: 0px; top: 0px;">first selector:</div>
    		<select name="dropdown1" style="position: absolute; left: 90px; top: 0px;">
    			<option value="1">option1</option>
    			<option value="2">option1</option>
    			<option value="3">option1</option>
    		</select>	
    		
    		<div style="position: absolute; left: 200px; top: 0px;">second selector:</div>
    		<select name="dropdown2" style="position: relative; left: 310px; top: 0px;">
    			<option value="1">option2</option>
    			<option value="2">option2</option>
    			<option value="3">option2</option>
    		</select>
    		
    		<div style="position: absolute; left: 20px; top: 100px;">third selector:</div>
    		<select name="dropdown3" style="position: absolute; left: 110px; top: 100px;">
    			<option value="1">option3</option>
    			<option value="2">option3</option>
    			<option value="3">option3</option>
    		</select>	
    		
    
    		<table style="position: absolute; left: 0px; top: 200px" border="1" width="760px">
    			<tbody align="center">
    				<tr>
    					<td>1</td>
    					<td>2</td>
    				</tr>
    				<tr>
    					<td>3</td>
    					<td>4</td>
    				</tr>
    				<tr>
    					<td>5</td>
    					<td>6</td>
    				</tr>
    			</tbody>
    		</table>
    		
    	</div>
    
    
    	</BODY>
    </HTML>

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Quote Originally Posted by kurent
    The only down side I can see is that you have to plan your site to the last detail before starting to position elements since any additions means all the offending elements left and top attributes must be changed to make room for the new element.
    Not only a new element, but an expanding element, and herein lies the problem. If the user resizes their text causing one element to expand, any following elements cannot adjust to make room. If you make your site a fluid width to fill any screen resolution, then elements need to be able to expand and reshuffle themselves as the window size is varied. Absolute positioning can be quite a useful tool for many scenarios, but is far too inflexible for general positioning.

    Quote Originally Posted by kurent
    I think it's worth it.
    I don't.


    Edit: just looked at your example - resize the text one step and the selector label text slides under and is partially hidden by the select boxes. Wouldn't happen if not absolutely positioned.......
    Last edited by Centauri; 05-09-2008 at 08:25 AM.

  3. #3
    Join Date
    Apr 2008
    Location
    Slovenia
    Posts
    88
    I don't know what you mean by "if the user resizes the text". How could he do that?

    And yes, another problem with absolute is that the page must not have any width defined in percentages, everything must be fixed lenght. But then you just make it <1024 pixels in width since very few people use anything smaller then that and even they can just make the page smaller with the browser? Sure everything will be small, but serves them right for lagging behind!

    So it would be better to use absolute positioning only in parts of the page that are enclosed into a div tag with relative positioning?

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    A user can resize the text easily. either via the browser's menu bar or Ctrl+ and Ctrl- for decent browsers, if they cannot read the text properly - this is always up to the user and it is our job to accommodate that.

    I usually only use absolute positioning where I want something to overlap or to be locked relative to the bottom of a parent.

  5. #5
    Join Date
    May 2005
    Posts
    2,040
    The one thing I have in the back of my mind about all this is that magazines aren't expandable yet the only people who complain about it are those who need a magnifying glass to read them, including me. Why are the accessibility people all up in arms over web sites accomodating such readers but not magazines and books? Just because a site can be adjusted doesn't mean they should automatically.

    If one wants to make a pixel perfect site, what's wrong with that? So what if someone wants to zoom in and things break up? I'm sure the user can deal with that.

    I'm not taking a stand. I'm just sayin'.

  6. #6
    Join Date
    Apr 2008
    Location
    Slovenia
    Posts
    88
    Quote Originally Posted by Centauri
    A user can resize the text easily. either via the browser's menu bar or Ctrl+ and Ctrl- for decent browsers, if they cannot read the text properly - this is always up to the user and it is our job to accommodate that.
    Ah now I understand, resizing only the fonts in the browser. I tried it and yes the text overlaps. But still, I'm not going to test my page in different browsers including versions and resolutions just so those few people will be able to increase the font size. Why not increase the size of the whole page then? Who increases only the text anyway? Weirdos!

    Btw, try to increase the text size on your page you have in your signature, the same problem arises.

    Come on people, I thought my idea of using only absolute positioning is going to get torn apart within minutes and send me crying.
    Last edited by kurent; 05-10-2008 at 09:20 AM.

  7. #7
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Quote Originally Posted by kurent
    Why not increase the size of the whole page then? Who increases only the text anyway? Weirdos!
    If I wanted to read small text easily, why the heck would I want pictures bigger, or have to scroll horizontally back and forth to read?? - "zooming" a page seems to be a silly idea

    Quote Originally Posted by kurent
    Btw, try to increase the text size on your page you have in your signature, the same problem arises.
    Huh ????

  8. #8
    Join Date
    Apr 2008
    Location
    Slovenia
    Posts
    88
    On this page:
    http://www.centauriaudio.com.au/web/index.html
    which I presume you made, I tried the CTRL and + and some of the text dissapeared. If I zoom the whole page some of the text only overlaps.

  9. #9
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    So what are you using to look at this ? - I increase text size in FF, no text disappears or overlaps - I zoom in IE7, nothing overlaps....

  10. #10
    Join Date
    Apr 2008
    Location
    Slovenia
    Posts
    88
    Opera and Firefox.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles