Layout using position

[mrcakey \(The Eclectic Electric\)]

How strongly would you counsel against building a page using CSS position?

The main problem I'm having is that when I'm changing the dimensions of
things, I sometimes have a lot of other things to change in consequence,
which somewhat negates one of the advantages of using CSS, but it does mean
I get exactly what I want where I want it.

Has anyone else had experience of doing this and if so, how did you get on?

+e

 

[Travis Newbury]

How strongly would you counsel against building a page using CSS position?
The main problem I'm having is that when I'm changing the dimensions of
things, I sometimes have a lot of other things to change in consequence,
which somewhat negates one of the advantages of using CSS, but it does mean
I get exactly what I want where I want it.
Has anyone else had experience of doing this and if so, how did you get on?

I wouldn't counsel against it. It is a good idea. But I would
probably skip absolute positioning of objects in favor of a few
columns and floating left or right with some wrapping the text. I
prefer fixed width for the columns, it allows you the "similar look"
thing that variable width does not offer as well, but it still allows
for some flexibility with the user using different fonts or font
sizes. YMMV

I think you have to remember that MOST people will see it the way it
looks in either IE or FireFox with all the default settings. This is
how most people have their browsers set up. They use the defaults. I
have only anticdotal evidence, but do your own reasearch and you will
probably come to the same conclusion.

And of course, there are a few for what ever reason that it will not
look like you want it to. That is just a fact of the web.

 

[Spartanicus]

How strongly would you counsel against building a page using CSS position?

The main problem I'm having is that when I'm changing the dimensions of
things, I sometimes have a lot of other things to change in consequence,
which somewhat negates one of the advantages of using CSS, but it does mean
I get exactly what I want where I want it.

An often made mistake is to position every element, this leads to a very
inflexible, hard to construct and hard to maintain result. Part of the
problem is often that the author mistakes web coding with DTP, resulting
in a wish to exert pixel precise control.

CSS positioning can be used very effectively to create a layout, but
typically only the main layout blocks should be positioned. The elements
within the main layout boxes should normally remain in the flow. Good
use of CSS positioning requires above average CSS skills.

 

[mrcakey \(The Eclectic Electric\)]

An often made mistake is to position every element, this leads to a very
inflexible, hard to construct and hard to maintain result. Part of the
problem is often that the author mistakes web coding with DTP, resulting
in a wish to exert pixel precise control.

CSS positioning can be used very effectively to create a layout, but
typically only the main layout blocks should be positioned. The elements
within the main layout boxes should normally remain in the flow. Good
use of CSS positioning requires above average CSS skills.

That's great news. That's pretty much exactly what I've done - only the
menu bar has elements positioned within it, this is because I'm after a very
specific look that I'd otherwise have to do with tables and colspans and
rowspans and such yukkiness.

Thanks for replying.

::mrcakey::

 

[mrcakey \(The Eclectic Electric\)]

I wouldn't counsel against it. It is a good idea. But I would
probably skip absolute positioning of objects in favor of a few
columns and floating left or right with some wrapping the text. I
prefer fixed width for the columns, it allows you the "similar look"
thing that variable width does not offer as well, but it still allows
for some flexibility with the user using different fonts or font
sizes. YMMV

I think you have to remember that MOST people will see it the way it
looks in either IE or FireFox with all the default settings. This is
how most people have their browsers set up. They use the defaults. I
have only anticdotal evidence, but do your own reasearch and you will
probably come to the same conclusion.

And of course, there are a few for what ever reason that it will not
look like you want it to. That is just a fact of the web.

Thanks for replying.

Page looks fine in IE6 on default settings in all main resolutions and
doesn't break too badly if the user increases font size. It looks better in
Firefox and Opera because I'm using a little transparency here and there.

For some reason I thought doing layout this was a big "no-no" and something
nasty would bite me in the bum later down the road.

::mrcakey::

 

[Andy Dingley]

How strongly would you counsel against building a page using CSS position?

I presume that you mean { position: <foo>; } where "foo" is anything
other than the usual initial value of "static".
"CSS positioning" as a broad topic is fine (and I'm in no mood for
another "I can't get CSS to work, therefore <table>s are better"
thread).

position:absolute; ties you into whatever you use as a length
dimension (i.e. pixels / ems) for the top and left values. If you go
for pixels it's inflexible against font size changes, if you go for
ems it's just as inflexible with images. Any absolute positioning is a
quick route to non-robust pages that look terrible on any browser
other than the author's.

The other positioning models are OK, except that they're more
complicated to understand and browser support is generally poor. You
can also do pretty much everything with static; it'll work, and it'll
keep working across all the varied devices you want to display it on.
What's not to like?

There are good reasons to use other positioning models, but they're
far from common. If you have a specific need in mind, tell us what it
is before you're going to get a detailed analysis of it.

 

[Jonathan N. Little]

How strongly would you counsel against building a page using CSS position?

The main problem I'm having is that when I'm changing the dimensions of
things, I sometimes have a lot of other things to change in consequence,
which somewhat negates one of the advantages of using CSS, but it does mean
I get exactly what I want where I want it.

Has anyone else had experience of doing this and if so, how did you get on?

Short answer is depends on how and what you are positioning your
elements. If your are positioning and sizing elements in 'px' if the
font size changes your layout can break badly. Rule of thumb is use px
only when sizing containers for images that are dimensioned statically
in pixels but where text is involved or window size use proportional
units with respect to associated element. For example, a menu or an
sidebar block scale in em's so as the font size scales so does your
block. If you are working with columns percentages may be the best choice.


Lastly, if you find your are using absolute positioning all over the
place, then chances are your are over-managing your design. Time to stop
and reevaluate what you are doing...

My $.02

 

[JDS]

For some reason I thought doing layout this was a big "no-no" and something
nasty would bite me in the bum later down the road.

Wherever did you get that idea?

Also, don't forget MSIE7! What works for 6 (which is badly broken as far
as CSS is concerned) will not always work for 7 (which is less badly
broken).

 

[Toby A Inkster]

position:absolute; ties you into whatever you use as a length
dimension (i.e. pixels / ems) for the top and left values.

Except when specifying a value of '0' which is often what I use when
absolutely positioning things. e.g.


<style type="text/css">
..wrap {
position: relative;
top: 0;
left: 0;
}
..main {
position: relative;
top: 0;
left: 0;
margin-left: 12em;
padding: 1em;
}
..nav {
position: absolute;
top: 0;
left: 0;
width: 12em;
padding: 0.5em;
}
..nav ul {
font-size: 80%;
}
</style>
<div class="wrap">
<div class="main">...</div>
<div class="nav">
<ul class="menu">...</ul>
</div>
</div>

is a reasonably simple and reliable method for a two-column layout. You
need to use a bit of jiggery-pokery for certain pre-7 versions of IE to
set ".nav { left: -12em; }" instead of ".nav { left: 0; }". IIRC, I've
gotten this working in IE4 before.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

* = I'm getting there!