6 Replies Latest reply on Nov 4, 2011 6:47 PM by brb1

    Full width background with header and float

    brb1

      I have been upgrading a web page to HTML5.  I would like to place a PayPal button on the right side of the screen inline with a header.  I am almost there.  See the "FreeAXP Support" line at http://home.earthlink.net/~msi1/FreeAXP_HTML5.html.

       

      What's missing is the background.  I would like it to extend across the entire line, as it does on the Legacy Hardware Virtualization line above and the FreeAXP Links line below.

       

      Suggestions?

       

      Thanks!

        • 1. Re: Full width background with header and float
          mytaxsite.co.uk Level 6

          brb1 wrote:

           

          I have been upgrading a web page to HTML5.  I would like to place a PayPal button on the right side of the screen inline with a header.  I am almost there.  See the "FreeAXP Support" line at http://home.earthlink.net/~msi1/FreeAXP_HTML5.html.

           

          What's missing is the background.  I would like it to extend across the entire line, as it does on the Legacy Hardware Virtualization line above and the FreeAXP Links line below.

           

          Suggestions?

           

          Thanks!

           

          Because the elements are displayed inline especially the h2, it is automatically shrunk to fit the contents of the element.  Therefore, as it stands, you won't be able to extend it unless you insert a width of 97% to that specific h2.

           

          However, there is another way to do it.   You could wrap the both items in a <div id="special"> </div> so that it looks like this:

           

           

          <div id="special" style="background-color: #F5F4FA">

          <h2 id="Support" style="display: inline;">FreeAXP Support</h2>

                          <form class="PayPal-h2" style="display: inline; float: right;" target="paypal" 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="BK4Y2PTKPRMK2"/>

                              <input type="image" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif"

                                  style="height:15px; padding-top:3px;" alt="PayPal - The safer, easier way to pay online!"/>

                              </form>

          </div>      

           

           

          HTH

          1 person found this helpful
          • 2. Re: Full width background with header and float
            brb1 Level 1

            Inserting width did not have the desired result.

             

            <h2 id="Support" style="display:inline; width:97%;">FreeAXP Support</h2>

             

            However, the <div> suggestion worked nicely and looks to be backward compatible with IE6 and 7.  Thanks!

             

            Incidently, I found that it is necessary to have the <h2> appear after the <form> in this scenario to maintain compatibility with IE6 & 7.

             

            P.S. - When I try to insert the relevant HTML in this thread, it ends up as a table.  What's the correct way to insert an HTML example?

            • 3. Re: Full width background with header and float
              mytaxsite.co.uk Level 6

               

              P.S. - When I try to insert the relevant HTML in this thread, it ends up as a table.  What's the correct way to insert an HTML example?

               

              You need to click on "Use Advanced Editor (see this picture)

               

              2011-11-04_2218.png

               

              Then click on this arrow that appears in the toolbar:

               

              2011-11-04_2220.png

               

              You then select the item called "Quote".  this should allow you to paste the text or to insert the highlighted syntax in plain text.

               

              hth

              • 4. Re: Full width background with header and float
                mytaxsite.co.uk Level 6

                In your code, you also need to add the border-bottom like this:

                #special {

                                background-color: #f5f4fa;

                                border-bottom: 1pt solid #036;

                 

                So that everything looks like other h2 s.

                • 5. Re: Full width background with header and float
                  brb1 Level 1

                  Tried the quote thing.  It still pasted as a table.  Turns out the problem was copying directly from the Dreamweaver 7 code window to the form window.  If I paste into notepad first, then copy it from there to the forum, it works okay.

                   

                  Here's the bit of IE6/7 compliant code I was refering to.  The header needs to follow the form statement.

                  <div id="special" style="background-color: #F5F4FA">

                   

                    <form class="PayPal-h2" target="paypal" 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="BK4Y2PTKPRMK2"/>

                    <input type="image" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif"

                    style="height:15px; padding-top:3px;" alt="PayPal - The safer, easier way to pay online!"/>

                    </form>

                   

                    <h2 id="Support" style="display:inline; width:97%;">FreeAXP Support</h2> <!-- Heading needs to come after form to support older versions of IE. -->

                   

                  </div>

                  • 6. Re: Full width background with header and float
                    brb1 Level 1

                    For conversation sake, this is the code I orginally used when I was prototyping adding the PayPal button:

                    <h2>FreeAXP Support

                    <form style="float:right;" target="paypal" 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="BK4Y2PTKPRMK2"/>

                      <input type="image" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif"

                       style="height:15px; padding-top:3px;" alt="PayPal - The safer, easier way to pay online!"/>

                      <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"/>

                    </form>

                    </h2>

                     

                    I think it is cleaner and it works nicely, but it is neither XHTML 1.0 or HTML 5 compliant.  You can see it here:

                     

                    file:///E:/WebSiteDevelopment/MSI/FreeAXP.html