Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 29
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Exclamation CSS positioning of buttons help

    Hi all,
    Hoping you can help me with an issue on my website. Here is the issue. I have a Javascript ticker that updates threads on my forum, the problem is there is a next-back and pause button set that i can't position correctly inside the ticker area see example:

    Here is how it should look-the buttons fall nicely inside the ticker area:


    This is what mine looks like-the buttons are under the ticker to the left:


    Example of what i'm trying to do:



    Here is the css code -I made a section of the code bold as to where i think the adjustments are need-not sure though.
    Any help would greatly appreciated.
    #ticker-wrapper * {
    margin-left: auto;
    margin-right: auto;
    }
    #ticker-wrapper.has-js {
    margin: 20px auto 20px auto;
    padding: 0px 20px;
    width: 870px;
    height: 30px;
    display: block;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-color: #f8f0db;
    font-size: 1.1em;
    }
    #ticker {
    width: 830px;
    height: 30px;
    display: block;
    position: relative;
    overflow: hidden;
    background-color: #f8f0db;
    }
    #ticker-title {
    padding: 5px;
    color: #990000;
    font-weight: bold;
    background-color: #f8f0db;
    text-transform: none;
    }
    #ticker-content {
    margin: 0px;
    padding: 5px;
    position: absolute;
    color: #1F527B;
    font-weight: normal;
    background-color: #f8f0db;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.2em;
    }
    #ticker-content:focus {
    none;
    }
    #ticker-content a {
    text-decoration: none;
    color: #1F527B;
    }
    #ticker-content a:hover {
    text-decoration: underline;
    color: #0D3059;
    }
    #ticker-swipe {
    padding-top: 9px;
    position: absolute;
    top: 0px;
    background-color: #f8f0db;
    display: block;
    width: 800px;
    height: 23px;
    }
    #ticker-swipe span {
    margin-left: 1px;
    background-color: #f8f0db;
    border-bottom: 1px solid #1F527B;
    height: 12px;
    width: 7px;
    display: block;
    }
    #ticker-controls {
    padding: 8px 0px 0px;
    list-style-type: none;
    float: left;

    }
    #ticker-controls li {
    padding: 0px;
    margin-left: 5px;
    float: left;
    cursor: pointer;
    height: 16px;
    width: 16px;
    display: block;
    }
    #ticker-controls li#play-pause {
    background-image: url('../images/controls.png');
    background-position: 32px 16px;
    }
    #ticker-controls li#play-pause.over {
    background-position: 32px 32px;
    }
    #ticker-controls li#play-pause.down {
    background-position: 32px 0px;
    }
    #ticker-controls li#play-pause.paused {
    background-image: url('../images/controls.png');
    background-position: 48px 16px;
    }
    #ticker-controls li#play-pause.paused.over {
    background-position: 48px 32px;
    }
    #ticker-controls li#play-pause.paused.down {
    background-position: 48px 0px;
    }
    #ticker-controls li#prev {
    background-image: url('../images/controls.png');
    background-position: 0px 16px;
    }
    #ticker-controls li#prev.over {
    background-position: 0px 32px;
    }
    #ticker-controls li#prev.down {
    background-position: 0px 0px;
    }
    #ticker-controls li#next {
    background-image: url('../images/controls.png');
    background-position: 16px 16px;
    }
    #ticker-controls li#next.over {
    background-position: 16px 32px;
    }
    #ticker-controls li#next.down {
    background-position: 16px 0px;
    }
    .js-hidden {
    display: none;
    }
    #no-js-news {
    padding: 10px 0px 0px 45px;
    color: #F8F0DB;
    }
    .left #ticker-swipe {
    left: 80px;
    }
    .left #ticker-controls, .left #ticker-content, .left #ticker-title, .left #ticker {
    float: left;
    }
    .left #ticker-controls {
    padding-left: 6px;
    }
    .right #ticker-swipe {
    right: 80px;
    }
    .right #ticker-controls, .right #ticker-content, .right #ticker-title, .right #ticker {
    float: right;
    }
    .right #ticker-controls {
    padding-right: 6px;
    }

  • #2
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Anyone?

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    First off all change the float:left to float:right (in #ticker-control)
    so that these buttons will move to right hand side.
    Now what else do you want to get?

  • #4
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by muftdagyan View Post
    First off all change the float:left to float:right (in #ticker-control)
    so that these buttons will move to right hand side.
    Now what else do you want to get?
    Did this, it changed nothing. the closest i got was when i added width in the code it put the buttons on the right but made them vertical.

    #ticker-controls {
    padding: 8px 0px 0px;
    list-style-type: none;
    float: left;
    width 7px;
    Last edited by tommydamic68; 02-12-2012 at 02:23 PM.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Doing this is impossible without the html.

    However, with the aid of my crystal ball....

    Code:
    #ticket-wrapper{position:relative}
    
    #ticker-controls {
        list-style-type: none;
        margin: 0;
        padding: 8px 0 0;
        position: absolute;
        right: 30px;
        top:0;
    }

  • #6
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Doing this is impossible without the html.

    However, with the aid of my crystal ball....

    Code:
    #ticket-wrapper{position:relative}
    
    #ticker-controls {
        list-style-type: none;
        margin: 0;
        padding: 8px 0 0;
        position: absolute;
        right: 30px;
        top:0;
    }
    Ok, some progress, the buttons need to come down quite a bit and to the left some. see here www.sphynxlair.com the buttons with your change put them in the far right corner.

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Code:
    #ticket-wrapper{position:relative}
    ..

    oh, and:

    Code:
    #ticker-controls {
        right: 30px;
        top:0;
    }
    are all missing.....

    What we're doing here is using absolute positioning to place the buttons element (#ticker-controls) with relation to its parent element #ticket-wrapper. To do this the buttons need to have position:absolute and the parent needs position:relative. Once this is implemented the location of #ticker-controls can be controlled using the left and top settings.

    Without position:relative on #ticket-wrapper, #ticker-controls is positioned with relation the the previous parent element with position:relative, which is your body tag. So, as it is now with your setting of left:1310px, it's set 1300px to the left of <body> and at its default position height-wise, in the absence of a top setting.

    Add the missing css and it should be pretty much where you want it.
    Last edited by SB65; 02-12-2012 at 04:15 PM.

  • #8
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tommydamic68 View Post
    Ok, some progress, the buttons need to come down quite a bit and to the left some. see here www.sphynxlair.com the buttons with your change put them in the far right corner.
    thought i had it. it weird, i placed this code

    #ticker-controls {
    list-style-type: none;
    margin: 0;
    padding: 8px 0 0;
    position: absolute;
    left: 1305px;
    top:45;

    in safari, it worked, placed the buttons exactly where they needed to be. on the ipad, the css change moved my entire forum to the left. i thought i had it! darn it!
    Last edited by tommydamic68; 02-12-2012 at 04:23 PM.

  • #9
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Code:
    #ticket-wrapper{position:relative}
    ..

    oh, and:

    Code:
    #ticker-controls {
        right: 30px;
        top:0;
    }
    are all missing.....

    What we're doing here is using absolute positioning to place the buttons element (#ticker-controls) with relation to its parent element #ticket-wrapper. To do this the buttons need to have position:absolute and the parent needs position:relative. Once this is implemented the location of #ticker-controls can be controlled using the left and top settings.

    Without position:relative on #ticket-wrapper, #ticker-controls is positioned with relation the the previous parent element with position:relative, which is your body tag. So, as it is now with your setting of left:1310px, it's set 1300px to the left of <body> and at its default position height-wise, in the absence of a top setting.

    Add the missing css and it should be pretty much where you want it.
    im confused on the ticker wrapper- are you asking me to replace this

    #ticker-wrapper * {
    margin-left: auto;
    margin-right: auto;

    with this?

    #ticket-wrapper{position:relative}

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Just add it.

    No, actually, you don't have a css statement for #ticket-wrapper. So you can add the whole thing.

  • #11
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Just add it.
    Any where?

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Right.

    Looking at your current live css you have:

    Code:
    #ticker-wrapper * {
            margin-left: auto;
            margin-right: auto;
            #ticker-wrapper{position:relative}
    }
    Make all this:

    Code:
    #ticker-wrapper{
           position:relative
    }
    
    #ticker-wrapper * {
            margin-left: auto;
            margin-right: auto;
            }
    EDIT: Sorry, as above - you can't have the nested css. I don't think that second statement has any effect though.

    EDIT AGAIN: My typo - should be #ticker-wrapper not #ticket-wrapper
    Last edited by SB65; 02-12-2012 at 04:35 PM.

  • #13
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Right.

    Looking at your current live css you have:

    Code:
    #ticker-wrapper * {
            margin-left: auto;
            margin-right: auto;
            #ticker-wrapper{position:relative}
    }
    Make all this:

    Code:
    #ticket-wrapper{
           position:relative
    }
    
    #ticker-wrapper * {
            margin-left: auto;
            margin-right: auto;
            }
    EDIT: Sorry, as above - you can't have the nested css. I don't think that second statement has any effect though.

    no, makes it all out of whack.

  • #14
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    It should be #ticker-wrapper not #ticket-wrapper, but you've lost some other css now for #ticker-wrapper.has-js.

    Ah, that seems OK now. Just replace #ticket-wrapper with #ticker-wrapper

    EDIT: You've sent me a link to the page by PM, but I don't know why. And now an email as well. Not sure why this thread forum isn't sufficient....

    In your css, find this, around line 319:

    Code:
    #ticker-wrapper.has-js {
        background-color: #F8F0DB;
        border-radius: 15px 15px 15px 15px;
        display: block;
        font-size: 1.1em;
        height: 30px;
        margin: 20px auto;
        padding: 0 20px;
        width: 870px;
    }
    following this add:

    Code:
    #ticker-wrapper{position:relative}
    
    #ticker-controls {
        list-style-type: none;
        margin: 0;
        padding: 8px 0 0;
        position: absolute;
        right: 30px;
        top:0;
    }
    Last edited by SB65; 02-12-2012 at 04:51 PM.

  • #15
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    It should be #ticker-wrapper not #ticket-wrapper, but you've lost some other css now for #ticker-wrapper.has-js.

    Ah, that seems OK now. Just replace #ticket-wrapper with #ticker-wrapper

    EDIT: You've sent me a link to the page by PM, but I don't know why. And now an email as well. Not sure why this thread forum isn't sufficient....

    In your css, find this, around line 319:

    Code:
    #ticker-wrapper.has-js {
        background-color: #F8F0DB;
        border-radius: 15px 15px 15px 15px;
        display: block;
        font-size: 1.1em;
        height: 30px;
        margin: 20px auto;
        padding: 0 20px;
        width: 870px;
    }
    following this add:

    Code:
    #ticker-wrapper{position:relative}
    
    #ticker-controls {
        list-style-type: none;
        margin: 0;
        padding: 8px 0 0;
        position: absolute;
        right: 30px;
        top:0;
    }
    With your settings in Safari on a large screen mac computer it puts the button too far right. The only adjustments i made was adding top: 45px; where you had 0. see screen shot. In windows on a small lap top it puts them dead on but loses the rounded corners. if i put the right: adjustment to right:1315 px; on the larger mac screen-it's dead on with rounded corners. Perfect but puts the buttons too far left on the small windows computer. On the ipad the buttons fall a little too far to the right. Any Suggestions?

    I feel so close yet so far away!LoL!
    Attached Thumbnails Attached Thumbnails CSS positioning of buttons help-screen-shot-2012-02-12-5.59.34-pm.jpg  
    Last edited by tommydamic68; 02-13-2012 at 12:16 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •