1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

position:absolute

Discussion in 'Tips and Guides [Archive]' started by masterchief, Mar 12, 2011.

  1. masterchief

    masterchief Well-Known Member

    I was customizing my Flexile Dark theme the other day, adding embed code for my paypal button. After I tested it out and determined everything was functioning as expected, it was time to update my default style. Oooops.. the is no Right Content Area block in the default style. hmmm...

    So I opened up PAGE_CONTAINER template in the default style. I found this line of code
    Code:
    <div id="headerMover">
    
    I simply typed 'Paypal button goes here'... saved template and reloaded my webpage.
    ooops.. dont want that as it did write the string in the header area, but it had a white background. So.. I looked at PAGE_CONTAINER template and found another line of code
    Code:
    <div id="headerProxy"></div>
    
    I made these changes:
    Code:
    <div id="headerProxy">PayPal button goes here</div>
    
    Sure enough that is exactly what I wanted... string was written upper left corner of header area. So all I need to do next was use a <div style="position:absolute"> with appropriate values for TOP and RIGHT. Here is final block of code:
    Code:
            <div id="headerProxy">
    
            <!-- addon paypal button addon -->
    
            <div style="position: absolute; right: 50px; top: 20px;">
            <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
                <input type="hidden" name="cmd" value="_s-xclick">
                <input type="hidden" name="hosted_button_id" value="xxxxxxxxxxxxx">
                <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
               <img alt="" border="0" src="https://www.paypalobjects.com/WEBSCR-xxxxxxxxxxxxx/en_US/i/scr/pixel.gif" width="1" height="1">
            </form>
            </div>
    
            <!-- addon paypal button addon -->
    
    
            </div>
    

    Using POSITION:ABSOLUTE you can literally position your objects wherever you want by changing the values for TOP and RIGHT. peace
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

  3. masterchief

    masterchief Well-Known Member

    @brogan .. thanx for link. I must say that XenForo is the most flexible platform for customization. regards

    I remember when I was asking you where to find EXTRA.CSS templates... lol
    although I have come a long way since then, still have so much to absorb.
     
  4. dmnkhhn

    dmnkhhn Active Member

    Just make sure you give <div id="headerProxy" /> a position: relative; just in case you want to position the PayPal button within that element. :)

    Otherwise it will determine it's position by looking at the body which sometimes gives strange results.
     
    Xarcell likes this.
  5. masterchief

    masterchief Well-Known Member

    that is exactly the very first line of code in the example that I provided. specifically, I manipulated this line of code in the template: <div id="headerProxy"></div>

    and altered it thusly,

    <div id="headerProxy">
    <!-- addon paypal button -->
    CODE GOES HERE
    </div>
     
    WhiteTiger likes this.
  6. EvilSeph

    EvilSeph Member

    Hmm, you might want to take a look at this site: http://w3fools.com. Though w3schools has definitely improved, they're still not as good as they used to be :(
     
  7. Brogan

    Brogan XenForo Moderator Staff Member

    That just reads like a sour grapes website to me.
     
  8. Erik

    Erik Well-Known Member

    Meh... one website isn't going to teach you everything anyways. Like anything, you should always get your information from multiple sources. W3Schools is great for beginners who would simply balk at a statement like, "well technically the browser doesn't add a newline character before and after the heading, it's just that it's default style sheets have non-zero margin-top and margin-bottom values for those elements."

    It will sound like Greek to someone who is just learning HTML. All websites have their place. :)
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

  10. Forsaken

    Forsaken Well-Known Member

    The W3C -has- asked for W3Schools to disavow that they're affiliated, and they have not done so.

    Their credentials/certificates are no more than unicorn farts, and have as much basis in reality :rolleyes:.

    And yeah, it probably is a sour grapes website, but they have reason to do so, as they continue to do things that are negatively effecting people learn proper HTML/CSS.
     
  11. Brogan

    Brogan XenForo Moderator Staff Member

    WhiteTiger likes this.

Share This Page