My div tag wont stay in the one position on different screens

Discussion in 'CSS' started by sparkiii, Dec 3, 2009.

  1. #1
    Hi,

    Firstly I dont know a great deal about CSS, I convert my PSD to CSS at an online site but I was almost finished a site that I set up here and then the client wanted another area of text added on the page, I have set up a layer, and it seems to have all the same properties of other layers on the page that were set up in here. But 2 things go wrong

    1. If a layer is not selected in dreamweaver on the page , this added layer is not visible, this isnt important to me but may (or may not) shed light on this problem.

    2. This layer is the contact details in the top right hand corner at

    www.inaspace.com.au/index1.html

    on my screen the right hand side of the writing lines up with the right hand side of the main content area of the site, but other people comment that it is over the top of the logo (on the left) or further out to the right.

    This might not be the right spot for this question, but I thought it might be something that is very obvious to those in the know, but completely unobvious for those like me.

    In the style sheet Layer 2a says

    #Layer-2a {
    position: absolute;
    left: 713px;
    top: 18px;
    width: 241px;
    height: 102px;
    z-index: 2;
    /* Here are some suggestions for this area's text settings */
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #ffffff;
    visibility: visible;
    }

    Thanks in advance

    Nat
     
    sparkiii, Dec 3, 2009 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You will continue having problems in your web developer career so long as you continue to let DreamBeaver tell you two things:

    That web pages have something called "layers"
    and that position: absolute is how to use CSS to position things on the page.
    Both are very wrong.

    I couldn't really tell you how to fix it to make one thing work, esp considering I'm much too lazy to use my powerful psychic abilities to see the cleverly hidden code of your page, because that would be like
    "I built this house out of spoons instead of bricks but now I don't know how to make them look red like bricks"

    Someone here at DP or on some other forum will come along and tell you how to throw on some red paint and it'll work and all will be well and your client will be happy and you will be happy and you'll be a little pissed at that grouchy person at DP who told you DreamBeaver was a steaming pile.

    But the spoons will come back to haunt you. In the night-time. When everything else is quiet. They'll say
    "Someone is looking at that site with one of those disgustingly ginormous Apple monitors-who-are-also-computers (you know like 40 inches across or some crazy shit) and your site will die a terrible death..."

    Absolute positioning makes your page very brittle. Ok, it CAN be done correctly but only by crazy guys who are allergic to floats and margins (which is what the less crazy guys and the rest of us use instead). Especially if you're letting the Beav position things based on edges of the page.

    Because you take abso-po'd stuff out of normal flow, that means every HTML element can't see the other ones. So they all just cover each other up. Normally they'd push each other out of the way: HTML-land is really only 2-dimensional and so they can't break the Lawlz of Fizix by two things occupying the same space at the same time. That's like dividing the universe by zero or something.

    So CSS can change stacking contexts and lets DreamBeavers stack everyone everywhere willy nilly and famously causes problems. Abso-po has its place, but not in page layouts.
    Perils and Pitfalls of Absolute Positioning.
     
    Stomme poes, Dec 4, 2009 IP