Please help me with the codes on how to center my capture pages.

8 replies
  • WEB DESIGN
  • |
Greetings Warriors!

I want to make sure that I am safe with my capture pages which I built using Dreamweaver.

GRN Retail
GRN Retail

They are centered in my monitor that has 1366 x 768 screen resolution. My fear is that how about for other monitors that have smaller and bigger screen resolution.

I wanted to know how do you center your web page, in any browser, regardless of the width of the browser window?

Please provide me the codes that can help me in addressing this problem. I am not sure if it's a css code, script code, pure html code.

Your help will be very much appreciated.

All The Best,
G.B.
#capture #center #codes #pages
  • Profile picture of the author ronc0011
    I think you are going to have to do some tweaking on your CSS file and if you're dealing with a Wordpress site you'll have to tweak the template files Fire up Google and search "Dynamic layout" and or "liquid layout".
    {{ DiscussionBoard.errors[6617676].message }}
    • Profile picture of the author Go4DBest
      Originally Posted by ronc0011 View Post

      I think you are going to have to do some tweaking on your CSS file and if you're dealing with a Wordpress site you'll have to tweak the template files Fire up Google and search "Dynamic layout" and or "liquid layout".
      The two capture pages are html pages and not wordpress.

      Thanks for the input, ron.

      I hope someone can help me on this.

      All The Best,
      G.B.
      Signature
      We setup and design wordpress sites using the Divi theme for roughly 200 USD. Let's talk.
      {{ DiscussionBoard.errors[6617732].message }}
      • Profile picture of the author jamaks
        Hi, couple of suggestions to help with different browser sizing. Original:
        Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="XHTML namespace">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>GRN Retail</title>
        <style type="text/css"> 
        body
        {
        background-image:url('http://lifetimevacationsecrets.com/retail/wp-content/uploads/2012/07/background1500-920.jpg');
        }
        </style>
        </head>
         
        <body>
        <div align="center"><table width="1500" border="0" background="http://lifetimevacationsecrets.com/r...height9201.jpg" height="920">
        If you change it to:
        Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="XHTML namespace">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>GRN Retail</title>
        <style type="text/css"> 
        body
        {
        background-position:top center;
        background-image:url('http://lifetimevacationsecrets.com/retail/wp-content/uploads/2012/07/background1500-920.jpg');
        }
        </style>
        </head>
         
        <body>
        <div align="center"><table width="100%" border="0">
        You must center the body background image (background-position:top center and not repeat the image within the div that contains the stated width of 1500px which should of course be 100% It should now center in different browser sizes. Jim
        {{ DiscussionBoard.errors[6617993].message }}
  • Profile picture of the author magiclouie
    Hello buddy, try adding this before the closing header:

    Code:
    <style type="text/css">
    body, html {
    height:100%;
    }
    body {
    margin:0;
    padding:0;
    }
    #wrap {
    position:relative;
    width:780px;
    margin:auto;
    min-height:100%;
    }
    * html #wrap {
    height:100%;
    }
    {
    background-image:url('http://lifetimevacationsecrets.com/retail/wp-content/uploads/2012/07/background1500-920.jpg');
    }
    </style>
    You should be able to center your capture pages.
    {{ DiscussionBoard.errors[6618004].message }}
    • Profile picture of the author Go4DBest
      Originally Posted by jamaks View Post

      Hi, couple of suggestions to help with different browser sizing. Original:
      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="XHTML namespace">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>GRN Retail</title>
      <style type="text/css"> 
      body
      {
      background-image:url('http://lifetimevacationsecrets.com/retail/wp-content/uploads/2012/07/background1500-920.jpg');
      }
      </style>
      </head>
       
      <body>
      <div align="center"><table width="1500" border="0" background="http://lifetimevacationsecrets.com/r...height9201.jpg" height="920">
      If you change it to:
      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="XHTML namespace">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>GRN Retail</title>
      <style type="text/css"> 
      body
      {
      background-position:top center;
      background-image:url('http://lifetimevacationsecrets.com/retail/wp-content/uploads/2012/07/background1500-920.jpg');
      }
      </style>
      </head>
       
      <body>
      <div align="center"><table width="100%" border="0">
      You must center the body background image (background-position:top center and not repeat the image within the div that contains the stated width of 1500px which should of course be 100% It should now center in different browser sizes. Jim
      Originally Posted by magiclouie View Post

      Hello buddy, try adding this before the closing header:

      Code:
      <style type="text/css">
      body, html {
      height:100%;
      }
      body {
      margin:0;
      padding:0;
      }
      #wrap {
      position:relative;
      width:780px;
      margin:auto;
      min-height:100%;
      }
      * html #wrap {
      height:100%;
      }
      {
      background-image:url('http://lifetimevacationsecrets.com/retail/wp-content/uploads/2012/07/background1500-920.jpg');
      }
      </style>
      You should be able to center your capture pages.
      Thanks to the both of you. Your codes have helped me to center my pages.

      I am so delighted now!

      Cheers,
      G.B.
      Signature
      We setup and design wordpress sites using the Divi theme for roughly 200 USD. Let's talk.
      {{ DiscussionBoard.errors[6618013].message }}
      • Profile picture of the author Brandon Tanner
        Is that the code that Dreamweaver spit out? If so, then it's time to upgrade to a newer version (or quit using DW altogether, lol).

        The reason I say that is because it's not good to use tables for layout, for many reasons. You should CSS for that instead. Below is what you need (much cleaner code, and far more standards-compliant).

        HTML Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        
        <html xmlns="http://www.w3.org/1999/xhtml">
        
        <head> 
        
            <title>GRN Retail</title> 
            
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > 
            
            <style type="text/css">
            
                body {
                background-image:url('http://lifetimevacationsecrets.com/retail/wp-content/uploads/2012/07/woman1500height9201.jpg');
                background-position: top; 
                background-repeat:no-repeat;
                }
                #optin {
                width: 420px;
                height: 300px;
                margin-left: -220px;
                margin-top: -160px;
                left: 50%;
                top: 50%;
                position: absolute;
                background-color:#181a1d;
                text-align: center;
                padding: 10px;
                border-style: groove;
                }
        
            </style>
            
        </head>
        
        <body>
        
        <div id="optin">
        
        <form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl"  >
        <div>
        <input type="hidden" name="meta_web_form_id" value="631017761" />
        <input type="hidden" name="meta_split_id" value="" />
        <input type="hidden" name="listname" value="grnfemale" />
        <input type="hidden" name="redirect" value="http://mygrn.co/retail.html" id="redirect_dd736511319154e922bea4c3d2c45f93" />
        
        <input type="hidden" name="meta_adtracking" value="retail" />
        <input type="hidden" name="meta_message" value="1" />
        <input type="hidden" name="meta_required" value="email" />
        
        <input type="hidden" name="meta_tooltip" value="" />
        
        
        <font face="Century Gothic" size="6" color="#ffffff"><strong>Free Video Reveals </strong></font><br/>
                           
                           <font face="Century Gothic" size="4" color="#ffffff"><strong>How To Travel the World @3 &amp; 4 star Resorts for up to 90% off Expedia's best prices.</strong></font> &nbsp; <br/>
                                      <br/>
                                        <font face="Century Gothic" size="3" color="#ffffff"> Enter your email below for this FREE video.  </font>  
                                        <br/>
                                        <br/>
                                        <input class="text" id="awf_field-35557562" type="text" name="email"  value="Enter Your Best Email Here"   onfocus="if(this.value == 'Enter Your Best Email Here') { this.value = ''} " 
                    onblur="if(this.value == '') { this.value='Enter Your Best Email Here'; }"   style="width:80%; height:40px; font-size:18px;   border:double; border: #FF0"  />
                    
                                    <input name="submit" type="image" id="submit" src="http://lifetimevacationsecrets.com/retail/wp-content/uploads/2012/07/orange_getinstantaccess.png" />
                              <br/>
                              <br/>
                              
                    </form>
                    <!-- Form ends here, add below the <script type="text/javascript"> of aweber -->
                   
                   <script type="text/javascript">
            <!--
            (function() {
                var IE = /*@cc_on!@*/false;
                if (!IE) { return; }
                if (document.compatMode && document.compatMode == 'BackCompat') {
                    if (document.getElementById("af-form-631017761")) {
                        document.getElementById("af-form-631017761").className = 'af-form af-quirksMode';
                    }
                    if (document.getElementById("af-body-631017761")) {
                        document.getElementById("af-body-631017761").className = "af-body inline af-quirksMode";
                    }
                    if (document.getElementById("af-header-631017761")) {
                        document.getElementById("af-header-631017761").className = "af-header af-quirksMode";
                    }
                    if (document.getElementById("af-footer-631017761")) {
                        document.getElementById("af-footer-631017761").className = "af-footer af-quirksMode";
                    }
                }
            })();
            -->
        </script>
        
        </div>
        
        </body>
        
        </html>
        Signature

        {{ DiscussionBoard.errors[6618100].message }}
        • Profile picture of the author Go4DBest
          Originally Posted by Brandon Tanner View Post

          Is that the code that Dreamweaver spit out? If so, then it's time to upgrade to a newer version (or quit using DW altogether, lol).

          The reason I say that is because it's not good to use tables for layout, for many reasons. You should CSS for that instead. Below is what you need (much cleaner code, and far more standards-compliant).

          HTML Code:
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
          
          <html xmlns="http://www.w3.org/1999/xhtml">
          
          <head> 
          
              <title>GRN Retail</title> 
              
              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > 
              
              <style type="text/css">
              
                  body {
                  background-image:url('http://lifetimevacationsecrets.com/retail/wp-content/uploads/2012/07/woman1500height9201.jpg');
                  background-position: top; 
                  background-repeat:no-repeat;
                  }
                  #optin {
                  width: 420px;
                  height: 300px;
                  margin-left: -220px;
                  margin-top: -160px;
                  left: 50%;
                  top: 50%;
                  position: absolute;
                  background-color:#181a1d;
                  text-align: center;
                  padding: 10px;
                  border-style: groove;
                  }
          
              </style>
              
          </head>
          
          <body>
          
          <div id="optin">
          
          <form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl"  >
          <div>
          <input type="hidden" name="meta_web_form_id" value="631017761" />
          <input type="hidden" name="meta_split_id" value="" />
          <input type="hidden" name="listname" value="grnfemale" />
          <input type="hidden" name="redirect" value="http://mygrn.co/retail.html" id="redirect_dd736511319154e922bea4c3d2c45f93" />
          
          <input type="hidden" name="meta_adtracking" value="retail" />
          <input type="hidden" name="meta_message" value="1" />
          <input type="hidden" name="meta_required" value="email" />
          
          <input type="hidden" name="meta_tooltip" value="" />
          
          
          <font face="Century Gothic" size="6" color="#ffffff"><strong>Free Video Reveals </strong></font><br/>
                             
                             <font face="Century Gothic" size="4" color="#ffffff"><strong>How To Travel the World @3 &amp; 4 star Resorts for up to 90% off Expedia's best prices.</strong></font> &nbsp; <br/>
                                        <br/>
                                          <font face="Century Gothic" size="3" color="#ffffff"> Enter your email below for this FREE video.  </font>  
                                          <br/>
                                          <br/>
                                          <input class="text" id="awf_field-35557562" type="text" name="email"  value="Enter Your Best Email Here"   onfocus="if(this.value == 'Enter Your Best Email Here') { this.value = ''} " 
                      onblur="if(this.value == '') { this.value='Enter Your Best Email Here'; }"   style="width:80%; height:40px; font-size:18px;   border:double; border: #FF0"  />
                      
                                      <input name="submit" type="image" id="submit" src="http://lifetimevacationsecrets.com/retail/wp-content/uploads/2012/07/orange_getinstantaccess.png" />
                                <br/>
                                <br/>
                                
                      </form>
                      <!-- Form ends here, add below the <script type="text/javascript"> of aweber -->
                     
                     <script type="text/javascript">
              <!--
              (function() {
                  var IE = /*@cc_on!@*/false;
                  if (!IE) { return; }
                  if (document.compatMode && document.compatMode == 'BackCompat') {
                      if (document.getElementById("af-form-631017761")) {
                          document.getElementById("af-form-631017761").className = 'af-form af-quirksMode';
                      }
                      if (document.getElementById("af-body-631017761")) {
                          document.getElementById("af-body-631017761").className = "af-body inline af-quirksMode";
                      }
                      if (document.getElementById("af-header-631017761")) {
                          document.getElementById("af-header-631017761").className = "af-header af-quirksMode";
                      }
                      if (document.getElementById("af-footer-631017761")) {
                          document.getElementById("af-footer-631017761").className = "af-footer af-quirksMode";
                      }
                  }
              })();
              -->
          </script>
          
          </div>
          
          </body>
          
          </html>
          Wow, thanks man.

          I agree, your codes are so clean. Classic..

          You rock!!!!!!!!!!!!

          Cheers,
          G.B.
          Signature
          We setup and design wordpress sites using the Divi theme for roughly 200 USD. Let's talk.
          {{ DiscussionBoard.errors[6618482].message }}
          • Profile picture of the author Brandon Tanner
            Originally Posted by Go4DBest View Post

            Wow, thanks man.

            I agree, your codes are so clean. Classic..

            You rock!!!!!!!!!!!!

            Cheers,
            G.B.
            Yeah, no problem.

            Also, I forgot to mention... Firesizer is a great little plugin for simulating different browser sizes.
            Signature

            {{ DiscussionBoard.errors[6618720].message }}

Trending Topics