Highlighted

Looking for Help with aligning words within a Header to the Center of the Page

New Here ,
Nov 14, 2017

Copy link to clipboard

Copied

Hi! This is my first time posting.

I'm trying to get "Home" "apply for a loan" "location and hours" and about to center themselves in the middle of the email template. I can get the text to align centered but not the words to the whole doc.

I am seriously at my wits end here! Gah!

Here's the header:

<ul>

    <tr>

  <td valign="top" align="center" id="clear-padding" class="increase-padding-left 50" style="height: 500px;"></a></td>

                                                   

  <li><a href="https://www.foundersfcu.com/">Home</a></li>

  <li><a href="https://cs.loanspq.com/Consumer/login/default.aspx?enc2=CjDDGQgp6ViDEpMSQAmj1NmtoCpgP5GFFZ2xTRYN4b60...">Apply for a Loan</a></li>

  <li><a href="https://www.foundersfcu.com/locations-and-hours">Location & Hours</a></li>

  <li><a href="https://www.foundersfcu.com/about-founders">About</a></li>

        </tr>

      </a></li>

</ul>

And here's some of the email template.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<div id="fb-root"></div>

<script>(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <!--[if !mso]><!-->

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  <!--<![endif]-->

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title></title>

  <style type="text/css">

.ReadMsgBody { width: 100%; background-color: #ffffff; }

.ExternalClass { width: 100%; background-color: #ffffff; }

.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }

html { width: 100%; }

body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; margin: 0; padding: 0; font-family: 'Open Sans', Arial, Sans-serif !important; }

table { border-spacing: 0; table-layout: fixed; margin: 0 auto; }

table table table { table-layout: auto; }

img { display: block !important; overflow: hidden !important; }

.yshortcuts a { border-bottom: none !important; }

a { color: #FFFFFF; text-decoration: none; }

img:hover { opacity:0.9 !important;}

.textbutton a { font-family: 'open sans', arial, sans-serif !important;}

.btn-link-1 a { color: #FFFFFF !important; }

/*Responsive*/

@media only screen and (max-width: 640px) {

body { width: auto !important; font-family: 'Open Sans', Arial, Sans-serif !important;}

.table-inner { width: 90% !important;  max-width: 90%!important;}

.table-full { width: 100%!important; max-width: 100%!important; text-align: center !important;}

.hide {width: 0px !important; height: 0px!important; display: none!important;}

}

@media only screen and (max-width: 479px) {

body { width: auto !important; font-family: 'Open Sans', Arial, Sans-serif !important;}

.table-inner{ width: 90% !important; text-align: center !important;}

.table-full { width: 100%!important; max-width: 100%!important; text-align: center !important;}

.hide {width: 0px !important; height: 0px!important; display: none!important;}

}

     

</style>

</head>

<body>

<!DOCTYPE html>

<html>

<head>

<style>

ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

    border: 1px solid #e7e7e7;

    background-color: #f3f3f3;

}

li {

    float: left;

    padding:

}

li a {

    display: block;

    color: #003366;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;

}

li a:hover:not(.active) {

    color: white;

    background-color: #003366;

}

</style>

</head>

<body>

<!--start header-->

<ul>

    <tr>

  <td valign="top" align="center" id="clear-padding" class="increase-padding-left 50" style="height: 500px;"></a></td>

                                                   

  <li><a href="https://www.foundersfcu.com/">Home</a></li>

  <li><a href="https://cs.loanspq.com/Consumer/login/default.aspx?enc2=CjDDGQgp6ViDEpMSQAmj1NmtoCpgP5GFFZ2xTRYN4b60...">Apply for a Loan</a></li>

  <li><a href="https://www.foundersfcu.com/locations-and-hours">Location & Hours</a></li>

  <li><a href="https://www.foundersfcu.com/about-founders">About</a></li>

        </tr>

                          </a></li>

</ul>

<!--end header-->

</body>

</html>

            </div>

</div>

     </body>

    </html>

  <!--header bar-->

  <table bgcolor="#ecf0f1" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

    <tr>

      <td align="center">

        <table class="table-inner" width="400" border="0" align="center" cellpadding="0" cellspacing="0">

          <tr>

            <td height="45"></td>

          </tr>

          <tr>

            <td align="center">

              <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ecf0f1">

                <tr>

                  <td align="center">

                    <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">

                      <tr>

                    

                      </tr>

                    </table>

                    <table align="center" border="0" cellpadding="0" cellspacing="0">

                      <tr>

                        <td>

                          <!--Logo-->

                     <table width="250" border="0" align="center" cellpadding="0" cellspacing="0" class="table-full">

                            <tr>

                              <td height="65" align="center" style="line-height: 0px;padding-left: 0px;padding-right: 0px;">

                               <a style="text-decoration: none;" href="https://www.foundersfcu.com/"><img width="250" src="http://membermail.foundersfcu.com/dm/Images/cu/Foun1/gl/email/Foun1152017903235b0fe188-a1__1_5_2017_..." style="max-width: 250px; margin: 0px; border-width: 0px; border-style: solid;" alt="Logo" /><!--This is where the old logo code ends, it started with styl max width on the line above-->

                                                        </a></td>

                              </td>

                            </tr>

                          </table>

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

For best results, you should find an industry-tested Email Template that performs well in all email clients.  Keep things simple.

Free Responsive Email Templates

<table cellpadding="5" cellspacing="2" style="text-align:center; width: 80%; margin:0 auto">

<tr>

<th colspan="4">TABLE HEADING</th>

</tr>

<tr>

<td>Home</td>

<td>Apply for a Loan</td>

<td>Location & Hours </td>

<td>About</td>

</tr>

</table>

Views

182

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Looking for Help with aligning words within a Header to the Center of the Page

New Here ,
Nov 14, 2017

Copy link to clipboard

Copied

Hi! This is my first time posting.

I'm trying to get "Home" "apply for a loan" "location and hours" and about to center themselves in the middle of the email template. I can get the text to align centered but not the words to the whole doc.

I am seriously at my wits end here! Gah!

Here's the header:

<ul>

    <tr>

  <td valign="top" align="center" id="clear-padding" class="increase-padding-left 50" style="height: 500px;"></a></td>

                                                   

  <li><a href="https://www.foundersfcu.com/">Home</a></li>

  <li><a href="https://cs.loanspq.com/Consumer/login/default.aspx?enc2=CjDDGQgp6ViDEpMSQAmj1NmtoCpgP5GFFZ2xTRYN4b60...">Apply for a Loan</a></li>

  <li><a href="https://www.foundersfcu.com/locations-and-hours">Location & Hours</a></li>

  <li><a href="https://www.foundersfcu.com/about-founders">About</a></li>

        </tr>

      </a></li>

</ul>

And here's some of the email template.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<div id="fb-root"></div>

<script>(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <!--[if !mso]><!-->

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  <!--<![endif]-->

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title></title>

  <style type="text/css">

.ReadMsgBody { width: 100%; background-color: #ffffff; }

.ExternalClass { width: 100%; background-color: #ffffff; }

.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }

html { width: 100%; }

body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; margin: 0; padding: 0; font-family: 'Open Sans', Arial, Sans-serif !important; }

table { border-spacing: 0; table-layout: fixed; margin: 0 auto; }

table table table { table-layout: auto; }

img { display: block !important; overflow: hidden !important; }

.yshortcuts a { border-bottom: none !important; }

a { color: #FFFFFF; text-decoration: none; }

img:hover { opacity:0.9 !important;}

.textbutton a { font-family: 'open sans', arial, sans-serif !important;}

.btn-link-1 a { color: #FFFFFF !important; }

/*Responsive*/

@media only screen and (max-width: 640px) {

body { width: auto !important; font-family: 'Open Sans', Arial, Sans-serif !important;}

.table-inner { width: 90% !important;  max-width: 90%!important;}

.table-full { width: 100%!important; max-width: 100%!important; text-align: center !important;}

.hide {width: 0px !important; height: 0px!important; display: none!important;}

}

@media only screen and (max-width: 479px) {

body { width: auto !important; font-family: 'Open Sans', Arial, Sans-serif !important;}

.table-inner{ width: 90% !important; text-align: center !important;}

.table-full { width: 100%!important; max-width: 100%!important; text-align: center !important;}

.hide {width: 0px !important; height: 0px!important; display: none!important;}

}

     

</style>

</head>

<body>

<!DOCTYPE html>

<html>

<head>

<style>

ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

    border: 1px solid #e7e7e7;

    background-color: #f3f3f3;

}

li {

    float: left;

    padding:

}

li a {

    display: block;

    color: #003366;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;

}

li a:hover:not(.active) {

    color: white;

    background-color: #003366;

}

</style>

</head>

<body>

<!--start header-->

<ul>

    <tr>

  <td valign="top" align="center" id="clear-padding" class="increase-padding-left 50" style="height: 500px;"></a></td>

                                                   

  <li><a href="https://www.foundersfcu.com/">Home</a></li>

  <li><a href="https://cs.loanspq.com/Consumer/login/default.aspx?enc2=CjDDGQgp6ViDEpMSQAmj1NmtoCpgP5GFFZ2xTRYN4b60...">Apply for a Loan</a></li>

  <li><a href="https://www.foundersfcu.com/locations-and-hours">Location & Hours</a></li>

  <li><a href="https://www.foundersfcu.com/about-founders">About</a></li>

        </tr>

                          </a></li>

</ul>

<!--end header-->

</body>

</html>

            </div>

</div>

     </body>

    </html>

  <!--header bar-->

  <table bgcolor="#ecf0f1" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

    <tr>

      <td align="center">

        <table class="table-inner" width="400" border="0" align="center" cellpadding="0" cellspacing="0">

          <tr>

            <td height="45"></td>

          </tr>

          <tr>

            <td align="center">

              <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ecf0f1">

                <tr>

                  <td align="center">

                    <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">

                      <tr>

                    

                      </tr>

                    </table>

                    <table align="center" border="0" cellpadding="0" cellspacing="0">

                      <tr>

                        <td>

                          <!--Logo-->

                     <table width="250" border="0" align="center" cellpadding="0" cellspacing="0" class="table-full">

                            <tr>

                              <td height="65" align="center" style="line-height: 0px;padding-left: 0px;padding-right: 0px;">

                               <a style="text-decoration: none;" href="https://www.foundersfcu.com/"><img width="250" src="http://membermail.foundersfcu.com/dm/Images/cu/Foun1/gl/email/Foun1152017903235b0fe188-a1__1_5_2017_..." style="max-width: 250px; margin: 0px; border-width: 0px; border-style: solid;" alt="Logo" /><!--This is where the old logo code ends, it started with styl max width on the line above-->

                                                        </a></td>

                              </td>

                            </tr>

                          </table>

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

For best results, you should find an industry-tested Email Template that performs well in all email clients.  Keep things simple.

Free Responsive Email Templates

<table cellpadding="5" cellspacing="2" style="text-align:center; width: 80%; margin:0 auto">

<tr>

<th colspan="4">TABLE HEADING</th>

</tr>

<tr>

<td>Home</td>

<td>Apply for a Loan</td>

<td>Location & Hours </td>

<td>About</td>

</tr>

</table>

Views

183

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 14, 2017 0
Adobe Community Professional ,
Nov 14, 2017

Copy link to clipboard

Copied

For best results, you should find an industry-tested Email Template that performs well in all email clients.  Keep things simple.

Free Responsive Email Templates

<table cellpadding="5" cellspacing="2" style="text-align:center; width: 80%; margin:0 auto">

<tr>

<th colspan="4">TABLE HEADING</th>

</tr>

<tr>

<td>Home</td>

<td>Apply for a Loan</td>

<td>Location & Hours </td>

<td>About</td>

</tr>

</table>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 14, 2017 1
osgood_ LATEST
LEGEND ,
Nov 14, 2017

Copy link to clipboard

Copied

html emails should be kept as simple as possible and where you can you should use pre 1914 techniques - tables and inline css styling where you can.

I would not use an unordered list to construct your naviagtion for an html email - I would just use simple anchor tags:

<table cellpadding="0" cellspacing="0" border="0" width="100%">

<tr>

<td>

<!-- start navigation -->

<table cellpadding="0" cellspacing="0"  border="0" width="600" align="center">

<tr>

<td align="center" style="font-family: helvetica, sans-serif; font-size: 16px; padding: 20px 0;">

<a href="#" style="text-decoration: none; color: #003366;">Home</a> | <a href="#" style="text-decoration: none; color: #003366;">Apply for a loan</a> | <a href="#" style="text-decoration: none; color: #003366;">Location & Hours</a> | <a href="#" style="text-decoration: none; color: #003366;">About</a>

</td>

</tr>

</table>

<!-- end navigation -->

</td>

</tr>

</table>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 14, 2017 1