Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Layout using position

Reply
Thread Tools

Layout using position

 
 
mrcakey \(The Eclectic Electric\)
Guest
Posts: n/a
 
      02-06-2007
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


 
Reply With Quote
 
 
 
 
Travis Newbury
Guest
Posts: n/a
 
      02-06-2007
On Feb 6, 6:59 am, "mrcakey \(The Eclectic Electric\)"
<(E-Mail Removed)> wrote:
> 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.


 
Reply With Quote
 
 
 
 
Spartanicus
Guest
Posts: n/a
 
      02-06-2007
"mrcakey \(The Eclectic Electric\)" <(E-Mail Removed)> wrote:

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

--
Spartanicus
 
Reply With Quote
 
mrcakey \(The Eclectic Electric\)
Guest
Posts: n/a
 
      02-06-2007
"Spartanicus" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> "mrcakey \(The Eclectic Electric\)" <(E-Mail Removed)> wrote:
>
>>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.
>


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


 
Reply With Quote
 
mrcakey \(The Eclectic Electric\)
Guest
Posts: n/a
 
      02-06-2007

"Travis Newbury" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) ups.com...
> On Feb 6, 6:59 am, "mrcakey \(The Eclectic Electric\)"
> <(E-Mail Removed)> wrote:
>> 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.
>
>


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


 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      02-06-2007
On 6 Feb, 11:59, "mrcakey \(The Eclectic Electric\)"
<(E-Mail Removed)> wrote:
> 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.

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-06-2007
mrcakey (The Eclectic Electric) wrote:
> 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


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
JDS
Guest
Posts: n/a
 
      02-06-2007
On Tue, 06 Feb 2007 14:22:25 +0000, mrcakey (The Eclectic Electric) wrote:

> 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).

--
JDS

 
Reply With Quote
 
Toby A Inkster
Guest
Posts: n/a
 
      02-09-2007
Andy Dingley wrote:

> 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!
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Choosing Layout: Css-Layout or Table-Layout hpourfard@gmail.com ASP .Net 1 06-19-2006 10:06 AM
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM
Oppinion regarding grid layout vs flow layout NWx ASP .Net 4 02-19-2004 08:56 PM
Converting from grid layout to flow layout. RobertH ASP .Net 1 11-04-2003 12:43 AM
DataList inside a Grid Layout Panel (<DIV>) item layout problem Rick Spiewak ASP .Net 3 08-26-2003 04:22 AM



Advertisments