Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

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

New Here ,
Nov 14, 2017 Nov 14, 2017

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>

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

correct answers 1 Correct answer

Community Expert , Nov 14, 2017 Nov 14, 2017

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>

Translate
Community Expert ,
Nov 14, 2017 Nov 14, 2017

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— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 14, 2017 Nov 14, 2017
LATEST

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>

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