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.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Feb 2010
    Posts
    223
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Guaranteed button positioning

    I'm quite excited because I've managed to do something with my tumblr blog that after hours of searching I had accepted wasn't possible. My concerns are that it's more of a work-around than a fix, and I'm hoping to get some help to fine-tune things.

    The tumblr platform has a series of social buttons that, by default, sit in the very top right of the screen. Below is an example, but I'm not sure you see them unless you're registered with tumblr:

    http://scenefrombehind.tumblr.com/

    What I wanted to do was move these buttons into the sidebar, and after hours of unsuccessful searching I suddenly thought, why not just use css positioning? This, of course was reliant on me knowing the id. A quick search on how to hide the buttons revealed that to be: #tumblr_controls.

    Okay, so now onto my question. Using top and right margins I have, by trial and error, managed to get them where I want, but what I need to know is, is there any way of ensuring this 'blind' positioning will align them correctly in all browsers/screen sizes/resolutions? This is my repositioning on my test blog:

    http://testblognumber1.tumblr.com/

    Thanks in advance.

    Damn it! I've just noticed the buttons scroll with the page. I tried 'position:fixed' in the css, but to no avail. Any ideas?
    Last edited by OurJud; 12-01-2011 at 09:05 AM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,760
    Thanks
    23
    Thanked 546 Times in 545 Posts
    Don't know where you put the buttons, but they should be placed in this
    <div id="nextlinks"><p>
    <a href="/page/2">next page</a>
    </p>
    </div>

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello OurJud,
    Put those buttons in #sidebar.
    #head_wrap is already position: fixed; and holds your sidebar in place. Putting your buttons in an existing sidebar would be the easiest fix.

    No real need for positioning them in there either, just put them in where you'd like them to show up and margin however much space you'd like around them.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Feb 2010
    Posts
    223
    Thanks
    25
    Thanked 0 Times in 0 Posts
    I'm sorry, perhaps I didn't explain myself properly. Although I can reposition the buttons by targeting the #tumblr_control id, I don't have access to the buttons html mark-up. The buttons are inline (is that the right word?) so tumblr themselves control them.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by OurJud View Post
    I'm sorry, perhaps I didn't explain myself properly. Although I can reposition the buttons by targeting the #tumblr_control id, I don't have access to the buttons html mark-up. The buttons are inline (is that the right word?) so tumblr themselves control them.
    Oops, I'm sorry OurJud. I'm working on 2 computers and a laptop here and I actually paid no attention to your very well explained issue. Totally my fault.

    Without access to the markup I have no idea how you'd make those buttons do what you want. Applying these settings to #tumblr_controls seems to work somewhat in FF -
    Code:
    element.style {
        background-color: transparent;
        border: 0 none;
        overflow: hidden;
        position: fixed;
        right: 250px;
        top: 500px;
        z-index: 1337;
    }
    It does not allow for different screen resolutions though.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Regular Coder
    Join Date
    Feb 2010
    Posts
    223
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Thanks, Excavator

    I'm having to look at other ideas, hence my other thread. I can get them where I want and have managed to 'fix' them with !important to override the inline styling. However, if your resize the browser window, they get pushed over into the main blog as they're remaining 208px from the right side of the screen.

    Thanks for your help, but I'm going to consider this 'undoable' and hope I can get some feedback with my other solution: Discovering button url/targets
    Last edited by OurJud; 12-02-2011 at 11:38 AM.


  •  

    Posting Permissions

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