...

View Full Version : absolute positioning



Fumigator
03-12-2009, 06:23 PM
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?

_Aerospace_Eng_
03-12-2009, 06:32 PM
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.

Excavator
03-12-2009, 06:42 PM
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/articles/css/absolute-positioning-pitfalls/

TinyScript
03-12-2009, 06:49 PM
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.

BoldUlysses
03-12-2009, 07:00 PM
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.

abduraooft
03-12-2009, 07:20 PM
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 (http://www.wpdfd.com/editorial/thebox/deadcentre4.html) 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)? :)

Got one more... to make rounded corner boxes with the help of images, it's very easy to position the required elements absolutely

Fumigator
03-12-2009, 09:51 PM
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?

Fumigator
03-12-2009, 09:52 PM
And of course, I forget to attach the image. Here it is.

Fumigator
03-12-2009, 11:54 PM
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. :o

BoldUlysses
03-13-2009, 02:31 AM
Fumigator,

What about something like this? Making the bar a background image simplifies the markup considerably and uses no absolute positioning. Link here (http://www.sufferndesign.com/helping/page9.html).


<!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>

abduraooft
03-13-2009, 07:48 AM
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.

abduraooft
03-13-2009, 07:50 AM
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 (http://naked.dustindiaz.com) .

BoldUlysses
03-13-2009, 01:09 PM
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 (http://naked.dustindiaz.com) .

Good point, and thanks for the link (I might participate!). :D 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.

Fumigator
03-13-2009, 05:10 PM
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)

effpeetee
03-13-2009, 05:42 PM
What about - css

display:table;

etc.

Frank

freedom_razor
03-13-2009, 06:17 PM
What about - css
display:table;


Could ask Bill G. that question. display:table won't work in IE7 and below.

effpeetee
03-13-2009, 06:28 PM
I was just being contentious. Just mention tables and watch the feathers fly.

Frank

Fumigator
03-13-2009, 09:17 PM
I was just being contentious. Just mention tables and watch the feathers fly.

Frank

:D :p :thumbsup:

rustang289
03-14-2009, 10:26 AM
I'm not one for ap I think it's like somebody said it's like useing "brute force".
what i like to use in confined situations is the z-index you can put divs inside of divs and just give them a z-index to display things over the top of other things such as images. Consider having a header background with a search box a menu and a logo all contained within your header div it becomes layered just like photoshop. something to think on:)

Stardog
03-14-2009, 07:49 PM
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 (http://naked.dustindiaz.com) .
Most sites nowadays make the logo a background image, but also include an img tag that's hidden, so it'll still appear in the naked CSS. (http://www.simplebits.com)

I've never had to use absolute positioning in my life. I've only used relative positioning in the rare case where I need something to overlap a border.

abduraooft
03-16-2009, 07:55 AM
Most sites nowadays make the logo a background image, but also include an img tag that's hidden, so it'll still appear in the naked CSS. (http://www.simplebits.com) The two logos (one displayed and hidden) are not same. After all, what's the benefit of adding an extra element/style to the document?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum