Layout using position

Discussion in 'HTML' started by mrcakey \(The Eclectic Electric\), Feb 6, 2007.

  1. 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
    mrcakey \(The Eclectic Electric\), Feb 6, 2007
    #1
    1. Advertising

  2. On Feb 6, 6:59 am, "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?


    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.
    Travis Newbury, Feb 6, 2007
    #2
    1. Advertising

  3. mrcakey \(The Eclectic Electric\)

    Spartanicus Guest

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


    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
    Spartanicus, Feb 6, 2007
    #3
  4. "Spartanicus" <> wrote in message
    news:...
    > "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.

    >
    > 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\), Feb 6, 2007
    #4
  5. "Travis Newbury" <> wrote in message
    news:...
    > On Feb 6, 6:59 am, "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?

    >
    > 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::
    mrcakey \(The Eclectic Electric\), Feb 6, 2007
    #5
  6. mrcakey \(The Eclectic Electric\)

    Andy Dingley Guest

    On 6 Feb, 11:59, "mrcakey \(The Eclectic Electric\)"
    <> 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.
    Andy Dingley, Feb 6, 2007
    #6
  7. 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
    Jonathan N. Little, Feb 6, 2007
    #7
  8. mrcakey \(The Eclectic Electric\)

    JDS Guest

    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
    JDS, Feb 6, 2007
    #8
  9. 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!
    Toby A Inkster, Feb 9, 2007
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rick Spiewak
    Replies:
    3
    Views:
    3,130
    Rick Spiewak
    Aug 26, 2003
  2. RobertH
    Replies:
    1
    Views:
    707
    Steve C. Orr [MVP, MCSD]
    Nov 4, 2003
  3. NWx
    Replies:
    4
    Views:
    2,948
    Kevin Spencer
    Feb 19, 2004
  4. Eric
    Replies:
    4
    Views:
    696
    clintonG
    Dec 24, 2004
  5. Replies:
    1
    Views:
    559
    John Timney \(MVP\)
    Jun 19, 2006
Loading...

Share This Page