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

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

New Here ,
Nov 14, 2017 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>

Views

401
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
community guidelines
Community Expert ,
Nov 14, 2017 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— Product User, Community Expert & Moderator

Votes

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
community guidelines
LEGEND ,
Nov 14, 2017 Nov 14, 2017

Copy link to clipboard

Copied

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>

Votes

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
community guidelines