Grow your CSS skills. Land your dream job.

absolute position help

  • # May 27, 2012 at 6:47 pm

    Hey everyone,
    I am looking to move a chunk of html into my header area just below my search bar using absolute positioning. Any help on this would be great.

    Here is my website:

    http://petrowest.squarespace.com/

    # May 27, 2012 at 8:47 pm

    I have used this

    Stock Ticker

    but when i look at it with my iphone and stuff the text is out of place

    # May 27, 2012 at 9:07 pm

    As soon as you position something like that absolutely, it is removed from the document “flow”, which basically means that all other elements will kind of disregard/ignore your block and not place themselves around it.

    So, it is now ABOVE the menu. If you would move it to BELOW the menu, by keeping it absolute but just a different top coordinate, anything else on the page will not change or move. If that’s what you want — great! If not, I would advise against using position absolute.

    # May 27, 2012 at 9:10 pm

    oh ok I see what your saying. Thanks for teaching me about that. @Senff Is there another method that you would recommend using?

    # May 27, 2012 at 9:27 pm

    Well, why don’t you just put the ticker in a div and place it in your code wherever you want it (below the navigation, above the image slider), without using position absolute?

    # May 27, 2012 at 9:51 pm

    Ok so i created a div


    text


    and have this as the css. If i dont use absolute it does not place it in the right location.
    #stockticker { margin-top:50px; right:400px;}
    Can you show me what the css show look like

    # May 27, 2012 at 9:58 pm

    Don’t put the div right at the top of the code (right after ). Just put it where you want it to appear.

    For example, if you want it to appear right above the main menu, you need to put your div right before the line:

    If you want it to appear right above the image slider, you need to place your code right before the line:

    And so on.

    # May 27, 2012 at 10:17 pm

    @Senff I am soo close to fixing it. Can you take a look at it. The stock ticker is behind my petrowest logo and I would like it moved over to under the search bar

    http://petrowest.squarespace.com/

    # May 28, 2012 at 3:00 am

    SOLVED

    Rob
    # June 2, 2012 at 1:39 pm

    2 threads linked kinda: http://css-tricks.com/forums/discussion/17797/positioning-question

    Closing this one down and marking solved.

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘absolute position help’ is closed to new replies.

*May or may not contain any actual "CSS" or "Tricks".