Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts

    absolute positioning

    What are your opinions about absolute positioning? It is becoming attractive to me, because it works in all browsers and gives me total control over where each div is positioned. I realize the design becomes static, so it has limited application, but for webpages that don't have much space variation, it seems like a good solution.

    Thoughts?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I don't think its necessary all of the time. For most layouts its almost never needed unless you are trying to put an image that is meant to be on top of other stuff. What about different resolutions? It may look good on your resolution but things go crazy on other resolutions if you aren't careful. Absolute positioning also breaks the normal flow of the document. Another thing is if you change the height of one absolutely positioned element you'll have to change the top values of the elements under it which would be come tedious very fast.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Fumigator,
    I've always stayed away from using AP until there is no other way. If for no other reason than how difficult it is to update a layout for a repeat customer that comes back 2 years later wanting a few changes.

    I'm sure you've seen this? http://www.tyssendesign.com.au/artic...ning-pitfalls/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Hmmm, I've always used it because I like the control of setting the elements exactly where I want them, but I never thought about the issue of resolution raised above. I better get to learning all the other positioning stuff. I'm mostly clueless beyond relative and absolute.

  • #5
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    I don't think this reason has been mentioned: Code bloat. Absolute positioning adds its own statement and, in almost all cases, two pixel distances (some combination of top, right, bottom, left) from its containing element.

    Just letting the elements flow and float around each other avoids all this, and makes updating the site much easier as well, since, as Aero mentioned, you don't have to "recalculate" and tweak the distances if your new image is 4 pixels taller and 6 pixels wider than the old one.

    From a coding aesthetics standpoint, think of it as the "brute force" solution rather than the more elegant, algorithmic solution.
    Last edited by BoldUlysses; 03-12-2009 at 07:02 PM.
    matt | design | blog

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Absolute positioning has a big role in a drop down menu creation. Another situation, where I usually use absolute position is to place a logo(img) and a title(img or some text) inside the header.
    ie, when I need to centre any one of the above, while keeping the other one on the left/right ends, setting absolute position to the later one save a lot time and coding. It won't interfere with the centre-alignment of the other one(which may be by display:block;margin:auto; Or text-align:center; to the parent element)

    Dead centre is another useful absolute positioning trick.

    And it's very easy to make a sticky footer with absolute position inside a container having 100% height, and relatively positioned .

    Have I missed anything (useful and effective)?

    Edit: Got one more... to make rounded corner boxes with the help of images, it's very easy to position the required elements absolutely
    Last edited by abduraooft; 03-13-2009 at 09:12 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Good thoughts all.

    In the case where I want to overlap a div over top another div, natural page flow doesn't fly. So I'm thinking absolute is the best solution... See attached image for an example. The dark red div will be overlaid by the white div. And the thing in the upper right corner will be a logo, also planted into place with absolute pos.

    With relative or float, could I achieve this same effect?

  • #8
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    And of course, I forget to attach the image. Here it is.
    Attached Thumbnails Attached Thumbnails absolute positioning-pwgproto.jpg  

  • #9
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    OK... I left-floated three divs inside a position:relative container div with a hard-coded width. The first and third divs have a background that paints the red stripe at the right spot and it works fine. I'm still absolute positioning the logo in the upper right corner though I could probably right-float that and make it work.

    The main inspiration for "giving up" and absolute positioning everything is because I am entirely sick and tired of dealing with browser differences and incompatabilities and I saw it as a way out.

  • #10
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Fumigator,

    What about something like this? Making the bar a background image simplifies the markup considerably and uses no absolute positioning. Link here.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    	<title>Untitled Page</title>
    
    	<style type="text/css">
    	
    		* {
    			padding:0;
    			margin:0;
    			font-size:100%;
    		}
    		
    		#wrap {
    			font:0.8em arial, verdana, sans-serif;
    			width:800px;
    			margin:10px auto 0;
    			background:url(pwgproto.png) no-repeat;
    		}
    		
    		#main {
    			width:350px;
    			border:5px solid #b4b9bf;
    			border-left-color:#ececec;
    			border-bottom-color:#cfcfcf;
    			background:#fff;
    			height:500px;
    			overflow:scroll;
    			margin-left:80px;
    		}
    		
    		#nav {
    			float:right;
    			list-style-type:none;
    			margin:280px 50px 0 0;
    			color:#fff;
    		}
    		
    		#nav li {
    			font-size:1.5em;
    			padding-bottom:5px;
    		}
    			
    	
    	</style>
    
    </head>
    
    <body>
    
    	<div id="wrap">
    		<ul id="nav">
    			<li>Blog</li>
    			<li>About</li>
    			<li>Services</li>
    			<li>Portfolio</li>		
    		</ul>
    		<div id="main">
    			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>		
    		</div>
    	</div>	
    
    </body>
    </html>
    matt | design | blog

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The main inspiration for "giving up" and absolute positioning everything is because I am entirely sick and tired of dealing with browser differences and incompatibilities and I saw it as a way out.
    Actually(I believe) absolute positions show less incompatibilities than floats, when positioning elements having a fixed width&height. IE has many issues like double margin, 3px bug, auto clearing of floats etc.
    Last edited by abduraooft; 03-13-2009 at 07:52 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    What about something like this? Making the bar a background image simplifies the markup considerably and uses no absolute positioning.
    I'd disagree. A logo should be made up of an <img> element(to make it semantic), so that it'll be visible even in the naked CSS .
    Last edited by abduraooft; 03-13-2009 at 01:15 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    oesxyl (03-13-2009)

  • #13
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Quote Originally Posted by abduraooft View Post
    I'd disagree. A logo should be made up of an <img> element(to make it semantic), so that it'll visible even in the naked CSS .
    Good point, and thanks for the link (I might participate!). That being said, I'd still prefer to set the graphic box as the background of the main wrap (or body) while AP'ing the logo image over the alternative of making 3+ floated divs or AP'ing the whole thing. A hybrid solution, in other words.
    matt | design | blog

  • #14
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Thanks suffie, I'm going to use your idea, but will probably AP the logo if I can't get it to float correctly with the menu.

    Or maybe I'll just use the <table> tag to position everything (good times)

  • #15
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    What about - css

    display:table;

    etc.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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