Grow your CSS skills. Land your dream job.

Sorry one last question…

  • # May 29, 2012 at 11:40 pm

    Hey sorry about the constant questions. I really do appreciate all the help. I am looking to move my stock ticker to the right hand side of the very top nav bar (to the right of Disclaimer) and shift the 3 titles over to the left and plunk it beside them flush with the end of the page content.
    Thanks so much

    http://petrowest.squarespace.com/

    # May 30, 2012 at 10:56 am
    #stockticker {
    position: absolute;
    top: 0px;
    right: 0px;
    }

    Change ‘right’ to ‘left’ and change the top value to whatever you like.

    #topNav {
    position: relative;
    height: 0px;
    text-align: right;
    margin: 0;
    margin-bottom: -25px;
    }

    Change text-align:right to text-align: left

    # May 30, 2012 at 11:24 pm

    @Johnnyb Thanks! everything is almost in place. when I view it on my laptop it is fine but when I look at on my I phone the stock ticker is still way to the right. Any idea why?

    # May 31, 2012 at 6:29 am

    the problem is the

    position: absolute;

    just reduce the sice of window on the laptop and it should not be visible.
    because the parent container “canvas” and “canvasWrapper” have no position-attribute the “stockticker” div is set 1010px from the left window-border.

    if you have a large screen it may be positioned good, but if you have a small one, you cant see it.

    change your css

    #stockticker { float:right}

    resize the bwoser and i hope you see what i mean.

    # May 31, 2012 at 10:32 pm

    @timmey Why is it that when I float this to the right it ends up way over to the other side of the page.

    http://petrowest.squarespace.com/

    # June 1, 2012 at 6:20 am

    well if you set float: right the element is put to the right side of its container “canvas”. but you cant use position:absolute; and float together, float has no effect there. i looked at your page again, maybe changing the following styles will help to position your stockticker on the right side of your nav:


    #canvasWrapper { width: 960px; padding: 0 8px 0 8px; position: relative;}

    #topNav {position: absolute;height: 0px;top: 60px;right: 160px;text-align: right;margin: 0;}

    #stockticker { position:absolute;top:0px; right: -60px;}

    because #canvasWrapper has a position-attribute now, #topNav and #stockticker set there right and top values from #canvasWrapper and not the hole page.

    sorry my english isnt that good, i hope you understand what iam trying to say :D

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

You must be logged in to reply to this topic.

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